JavaScriptを初めて学ぶ４

DOM操作について学んでいく
DOM操作とは、今まで勉強したJavaScriptを使ってようやっとWebサイトを動的に置き換えていくこと
その前に必要な要素を学ぶ。

・getElementByIdメソッド
指定したidを持つ要素を一つゲットする→getElementById(id)
指定したidを持つ要素がなかったら、nullを返す。nullはオブジェクトが存在しないやつ

実際どんな感じで使われるのか。↓
まずはHTMLに
```html
<body>
...
    <p id="sentence">お腹減った</p>
    <input id="button" type="button" value="eat!">

    <script src="main.js"></script>
</body>
```
bodyだけ書いたけど、とりあえず２つのidを。Webページ上では、「お腹減った」っていう文章と、「eat!」って言うボタンが表れてる。
次にJavaScript上で

```javascript
const e = document.getElementById('button');  //定数e＝document(HTML)からbuttonと言うidの要素をゲットする
e.addEventListener('click', () => {　//これはゲットしたidの要素（button）をクリックしたら処理が実行されるやつ。event処理ともいう
    const sen = document.getElementById('sentence');  //定数sen=document(HTML)からbuttonと言うidの要素をゲットする
    console.log(sen.innerText);  //innerTextを入れることで、文章のみ表示される。入れなかったら<p>から入ってしまう
}, false);

```
と言う風に、ボタンを押したらconsole上に、お腹減ったと表示される機能完成。お腹減った。

・getElementsByTagNameメソッド
指定したタグ名を持つ要素をゲットする→document.getElementsByTagName(tageName)
戻り値は、HTML Collection(配列と似た構造のデータ)
指定したname属性が存在しない場合は空のHTMLCollection([])を返す。nullではない。

実際に
```html
...
<body>
    <div>要素１-div</div>
    <p>要素２-p</p>
    <div>要素３-div</div>
    <span>要素４-span</span>
    <div>要素５-div</div>

    <input id="button" type="button" value="get!">

    <script src="main.js"></script>
</body>
```
が、htmlで、Javascriptでは↓
```javascript
const e = document.getElementById('button');  //定数e＝document(HTML)からbuttonと言うidの要素をゲットする
e.addEventListener('click', () => {   //これはゲットしたidの要素（button）をクリックしたら処理が実行されるやつ。event処理ともいう
    const elements = document.getElementsByTagName('div');  //定数elements=document(HTML)から「div」がつくタグをゲット
    for (let i =0; i < elements.length; i++) {  //divがある分だけループ
        console.log(elements[i].innerText);  //divを一つずつ出力
    }
}, false);
```
なんで急にfor構文が出てきたかというと、elementsの中には複数入る場合がある。
HTML Collectionと言う配列に似た構造のデータが入る。つまり、elementsに[0],[1],[2],[3],[4],[5]と入っている
して、このelementsに入っている要素、つまりdivタグ全てを一件ずつconsoleに出力するため、for構文が使われている。
結果、要素１-div、要素３-div、要素５-divが出力される

・getElementsByNameメソッド
指定したname属性を持つ要素をゲットする→document.getByName(name)
戻り値は、HTML Collection(配列と似た構造のデータ)
指定したname属性が存在しない場合は空のHTMLCollection([])を返す。nullではない。

実際に
```html
<body>
...
    <input name="result" type="text">
    <input name="button" type="button" value="send!">

    <script src="main.js"></script>
</body>
</html>
```
がHTML。WEB上ではテキストボックスが表示され、その横にsend!のボタンが。

で、JavaScriptでは
```javascript
const e = document.getElementById('button'); 
e.addEventListener('click', () => {   
    const elements = document.getElementsByName('result'); //定数elements=resultの要素ゲット
    console.log(elements[0].value);
}, false);
```
つまり、ボタンをクリックしたら、テキスト内（result）の文をゲットして、最後HTMLMCollectionから[0]を取り出す。[0]は一番目のやつ。今回は一個しかないので,[0]
.valueで文字を取り出す。これで、テキスト内の文章が表示される

・getElementsByClassName
指定したclass属性を持つ要素をゲット→document.getElementsByClassName(className)
戻り値は、HTML Collection(配列と似た構造のデータ)
指定したname属性が存在しない場合は空のHTMLCollection([])を返す。nullではない。
実際に
```html
...
<body>
    <ul>
        <li class="wbc">要素1</li>
        <li class="otani">要素2</li>
        <li class="wbc">要素3</li>
        <li class="otani">要素4</li>
        <li class="wbc">要素5</li>
    </ul>
    <input id="button" type="button" value="get">
    <script src="main.js"></script>
</body>
```
とWEB上では、リストとボタンが表示
```javascript
const e = document.getElementById('button'); 
e.addEventListener('click', () => {  
    const elements = document.getElementsByClassName(`wbc`);
    for(let i=0; i<elements.length; i++){
        console.log(elements[i].innerText);
    }
}, false);
```
と言う感じで、wbcクラスの要素１、要素３、要素５が出力される。