#はじめに
今回は、Javascriptの"超基本"
要素ノードの取得方法 について記録します。
また selector による取得はここでは、紹介していません。
過去に6点オブジェクトについて、記事を投稿しました。
・(Javascript) オブジェクト指向 と オブジェクト&配列 の違い
・(Javascript) インスタンス化 と コンストラクター
・(Javascript) 静的プロパティと静的メソッド
・(Javascript) 組み込みオブジェクトとnew演算子によるインスタンス化
・(Javascript) データ型と参照型
・(Javascript) データ型のリテラルについて
#要素ノードの取得方法
クライアントサイドのjavascript(DOM)は操作するには、の対象となる要素を取りださければいけません
。
ここでは、そんな取得方法を紹介します。
##①id値を受け取る getElementByIdメソッド
目的要素が明確な場合にこのメソッドを使用します。
指定したid値を持つ要素をElementオブジェクトとして返します。
document.getElementById(取得したいID)
###※getElementByIdメソッドの注意
getElementByIdは、最初に合致した要素を1つだけ返します。
なので、使用するときはページ内でid値が一意になるようにしてください。
##②タグ名をキーに取得する getElementByTagName
getElementByTagNameは、getElementByIdと異なり複数の要素を取得することができます。なので戻り値は要素の集合(HTMLCollectionオブジェクト)となります。
引数に*を使うと、全ての要素を取得すルことができます。
document.getElementByTagName(取得したいタグ名)
##③name属性をキーに取得する getElementByName
getElementByNameは、name属性をキーに要素を取得します。
よく、 input や select などフォーム要素に使用します。しかし、単一要素ならば getElementById の方が適しています。なので、最適に使用できるのは、ラジオボタンやチェックボタンなどになります。
また、getElementByNameはNodeListメソッドです。
document.getElementByName(取得したいname属性の値)
##④Class属性をキーに取得する getElementByClassName
getElementByClassNameを利用すると、class属性のキーを取得することができます。
なので、特定の役割を持つ要素に対してクラスを付与指定ればまとめて取り出すことができます。
document.getElementByClassName(取得したいclass属性の値)
#HTMLCollection と NodeList とは？
getElementByTagName は HTMLCollectionオブジェクト。
getElementByName は NodeListメソッド
と記述しました。では HTMLCollectionオブジェクト・NodeListメソッド とはどんな物なのでしょうか？
##HTMLCollection
要素の集合で以下のメンバーを利用できます。
また、ブランケット構文を使用することもできます。
|メンバー |説明 |
|---|---|---|
|length |リストに含まれる要素数 |
|item(b) |b番目の要素を取得 | |
|namedltem(name) |name や id を取得する |
##NodeList
ノードリストを表すためのオブジェクトです。
(要素ノード・属性ノード・テキストノード)
HTMLCollectionと大きな違いはないのですが、HTMLCollectionメンバーの namedltem が使用できません。
#あとがき
以上が、要素ノードの取得方法 でした。
いかがでしたか？
役に立っていれば嬉しいです。
では!
#Myリンク
また、Twitter・Portfolio のリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。