(javascript) 要素ノードの取得方法

#はじめに
今回は、Javascriptの"超基本"
<strong>要素ノードの取得方法</strong> について記録します。
また <strong>selector</strong> による取得はここでは、紹介していません。

過去に6点オブジェクトについて、記事を投稿しました。

・<a href="https://qiita.com/Tateishi0819/items/10168748360409f38d82" terget="blank">(Javascript) オブジェクト指向 と オブジェクト&配列 の違い</a>
・<a href="https://qiita.com/Tateishi0819/items/bf2f340941b7a10a0bfa" terget="blank">(Javascript) インスタンス化 と コンストラクター</a>
・<a href="https://qiita.com/Tateishi0819/items/00b5adde47a40e3bd1a7" target="blank">(Javascript) 静的プロパティと静的メソッド</a>
・<a href="https://qiita.com/Tateishi0819/items/fb64ecfb87a387989fad" target="blank">(Javascript) 組み込みオブジェクトとnew演算子によるインスタンス化</a>
・<a href="https://qiita.com/Tateishi0819/items/51777538dacf0bc7cbc1" target="blank">(Javascript) データ型と参照型</a>
・<a href="https://qiita.com/Tateishi0819/items/55b99526cfa31f08ce57" target="blank">(Javascript) データ型のリテラルについて</a>

#要素ノードの取得方法

クライアントサイドのjavascript(<strong>DOM</strong>)は操作するには、の対象となる要素を取りださければいけません
。
ここでは、そんな取得方法を紹介します。

##①id値を受け取る getElementByIdメソッド
<strong>目的要素が明確</strong>な場合にこのメソッドを使用します。
指定したid値を持つ要素をElementオブジェクトとして返します。

```javascript
document.getElementById(取得したいID)
```

###※getElementByIdメソッドの注意
<strong>getElementById</strong>は、最初に合致した要素を<strong>1つ</strong>だけ返します。
なので、使用するときはページ内で<strong>id値が一意</strong>になるようにしてください。

##②タグ名をキーに取得する getElementByTagName
<strong>getElementByTagName</strong>は、getElementByIdと異なり<strong>複数の要素</strong>を取得することができます。なので戻り値は<strong>要素の集合(HTMLCollectionオブジェクト)</strong>となります。

引数に<strong>*</strong>を使うと、全ての要素を取得すルことができます。

```javascript
document.getElementByTagName(取得したいタグ名)
```

##③name属性をキーに取得する getElementByName
<strong>getElementByName</strong>は、<strong>name属性</strong>をキーに要素を取得します。
よく、 input や select など<strong>フォーム要素</strong>に使用します。しかし、単一要素ならば getElementById の方が適しています。なので、最適に使用できるのは、<strong>ラジオボタンやチェックボタン</strong>などになります。

また、getElementByNameは<strong>NodeListメソッド</strong>です。

```javascript
document.getElementByName(取得したいname属性の値)
```

##④Class属性をキーに取得する getElementByClassName
<strong>getElementByClassName</strong>を利用すると、<strong>class属性</strong>のキーを取得することができます。

なので、特定の役割を持つ要素に対してクラスを付与指定れば<strong>まとめて</strong>取り出すことができます。

```javascript
document.getElementByClassName(取得したいclass属性の値)
```

#HTMLCollection と NodeList とは？
<strong>getElementByTagName</strong> は <strong>HTMLCollectionオブジェクト</strong>。
<strong>getElementByName</strong> は <strong>NodeListメソッド</strong>
と記述しました。では HTMLCollectionオブジェクト・NodeListメソッド とはどんな物なのでしょうか？

##HTMLCollection
<strong>要素の集合</strong>で以下のメンバーを利用できます。
また、<strong>ブランケット構文</strong>を使用することもできます。

|メンバー  |説明  |
|---|---|---|
|length  |リストに含まれる要素数  |  
|item(b)  |b番目の要素を取得  | |
|namedltem(name)  |name や id を取得する  |  

##NodeList
<strong>ノードリスト</strong>を表すためのオブジェクトです。
(要素ノード・属性ノード・テキストノード)
HTMLCollectionと大きな違いはないのですが、HTMLCollectionメンバーの <strong>namedltem が使用できません</strong>。

#あとがき
以上が、<strong>要素ノードの取得方法</strong> でした。
いかがでしたか？
役に立っていれば嬉しいです。
では!

#Myリンク
また、Twitter・Portfolio のリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。

<a href="https://twitter.com/0819_tateishi" target="blank">Twitter</a>
<a href="https://ayu-portfolio.herokuapp.com/" target="blank">Portfolio</a>
<a href="https://github.com/ayu0819" target="blank">Github</a>
<a href="https://note.com/ayu0819" target="blank">Note</a>