DOM②


## 属性値の取得と変更

```
要素.要素名
```

下記の例を見てください。


```html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<img id="image" src="sample1.jpg" alt="sample画像">

<script type="text/javascript">
window.onload = function() {
    // id名がimageである要素を取得
    var aaa = document.getElementById('image');

    // 取得した要素のsrc属性値を取得
    var src = aaa.src;

    // src属性が取得出来ている事を確認
    console.log(src); //=> sample.jpg
};
</script>

</body>

```
 
↑上記の場合、「image.src」というプロパティ名でHTMLのsrc属性の値「sample.jag」を取得出来ている事が分かる。

実際の表示とコンソールログの結果↓

![syutoku.png](https://qiita-image-store.s3.amazonaws.com/0/35975/70f78965-d8a9-7f99-5420-c8fc3c48366d.png "syutoku.png")



## 属性値の変更

```
要素.属性名 = 属性値
```

属性値は取得するだけでなく、変更する事もできます。属性値を変更するには、取得した要素のプロパティに代入します。

下が取得したsrc属性の値を`sample1.jpg`から`sample2.jpg`に変更した場合↓

```html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<img id="image" src="sample1.jpg" alt="sample画像">

<script type="text/javascript">

window.onload = function() {

    // id名がimageである要素を取得
    var aaa = document.getElementById('image');

    // 取得した要素のsrc属性値をsample2jpgに上書き
    aaa.src = 'sample2.jpg';

};

</script>

</body>

```

更に、上書きの他にも、設定されてない属性を追加する事も出来ます。

```html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<img id="image" src="sample1.jpg" alt="sample画像">

<script type="text/javascript">

window.onload = function() {

	// id名がimageである要素を取得
    var aaa = document.getElementById('image');

	// width属性を追加
    aaa.width = 300;
    // height属性を追加
    aaa.height = 200;

};

</script>

</body>


```

![henkou.png](https://qiita-image-store.s3.amazonaws.com/0/35975/86ed0bdd-19ac-01d5-7b74-affc72d508ce.png "henkou.png")

↑sample1の大きさが変わっている。

以下が「属性値の取得と変更」のイメージ図です。

![illa_001.png](https://qiita-image-store.s3.amazonaws.com/0/35975/c230d85c-0b4d-d5f1-43c9-98d77ab4ab49.png "illa_001.png")


## 「getAttribute」と「setAttribute」による属性値の取得と変更

属性値の取得、変更を行うのに、「getAttribute」と「setAttribute」という関数を使う方法もあります。
以下の様に記述します。

```js

要素.getAttribute(属性名)
要素.setAttribute(属性名, 属性値)

```

getAttributeは属性値の取得、setAttributeは属性値の変更を行います。


```html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<img id="image" src="sample1.jpg" alt="sample画像">

<script type="text/javascript">

window.onload = function() {

    // id名がimageである要素を取得
    var image = document.getElementById('image');

    // 属性の値の取得
    var src = image.getAttribute('src');

    // 属性値の変更
    image.setAttribute('src', 'sample2.jpg');

};

</script>

</body>

```

「image.getAttribute('src')」でsrc属性値を取得し、「image.setAttribute('src', 'sample2.jpg')」でsrc属性値の変更を行っています。

最初に紹介した方法と出来る事はほとんどかぶっています(style属性の取得や操作などで挙動が異なるそうです)。

まとめると、同じ事をやるのに複数やり方があると現時点では思っていて良いのではないかと思います。

## innerHTMLによる要素の内容の取得と変更

要素の「内容」を取得するには「innerHTML」を使います。

以下使用例です(取得して、更に変更した場合)

```html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<title>test</title>
</head>
<body>
<div id="box">This is box</div>

<script type="text/javascript">
window.onload = function() {
    // idがboxの要素を取得する
    var box = document.getElementById('box');

    //取得した要素の背景を赤にする
    box.innerHTML = '<em>あいうえお</em>'
    
    document.write(box.innerHTML);
};
</script>

</body>

</html>


```

![innerHTML.png](https://qiita-image-store.s3.amazonaws.com/0/35975/622a66fb-6f48-2c63-7669-53bca72fed2a.png "innerHTML.png")


↑上の例の場合、わざと`<em>あいうえお</em>`と入れたのですが、傾いているように文字列にHTMLを代入すると表示もその通りになります。

* 「innerHTML」に代入すると、代入前のHTMLはすべて消えて新しいHTMLが上書きされてしまいます。
これまでのHTMLも残した上で新しいHTMLを追加したい場合は「演算子+」を使う。


```html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<title>test</title>
</head>
<body>
<div id="box">This is box</div>

<script type="text/javascript">
window.onload = function() {
    // idがboxの要素を取得する
    var box = document.getElementById('box');

    //取得した要素の内容を変更
    box.innerHTML = box.innerHTML + '<b>追加</b>';
    
    //内容が変更されてる事を出力
    document.write(box.innerHTML);
};
</script>

</body>

</html>


```

![innerHTML2.png](https://qiita-image-store.s3.amazonaws.com/0/35975/3d7396ea-add1-15d4-3366-15e1132aa102.png "innerHTML2.png")



## 「createElement」と「appendChild」--------- 要素の作成と追加

要素の作成は

```js
document.createElement(要素名)
```

要素の追加は

```js
追加される要素.appendChild(追加したい要素)
```

で、組み合わせると？以下の様に↓

```html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>
<body>

<div id="box"></div>

<script type="text/javascript">
window.onload = function() {

	//id名がboxの要素を取得
	var box = document.getElementById('box');

    // div要素を新規作成
    var newdiv = document.createElement('div');
    
    // 新規作成したdiv要素のid属性をnewに設定
    newdiv.id = 'new';
    
    // 新規作成したdiv用を野内容に'new div'というテキストを設定
    newdiv.innerHTML = 'new div';
    
    // box要素の中に新規作成したdiv要素を追加
    box.appendChild(newdiv);
};

</script>

</html>


```

![作成と追加.png](https://qiita-image-store.s3.amazonaws.com/0/35975/58e77a6d-568f-0ea0-d0bc-5f87dcfe4c2c.png "作成と追加.png")

↑ソースをみても間に新しい「div」が出来た事が分かる。

boxはあらかじめHTMLに書かれているdiv要素です。このboxの中(子要素=Child)にnewdivを追加するのがbox.appendChildです。