タグの要素名からタグ情報を取得したいときに使うのがgetElementsByTagNameです。構文を使って見る前に注意事項や代替方法をしっかり理解するのが重要です。今回はgetElementsByTagNameの要素取得方法や注意点2つを説明します。
Contents
getElementsByTagNameの要素取得方法
構文
|
1 |
var elements = document.getElementsByTagName(name); |
nameに取得（検索）したい要素を指定します。例えばh1タグを検索する場合はこうなります。
|
1 |
var elements = document.getElementsByTagName(“h1”); |
特定の子要素の中でgetElementsByTagNameを指定したい場合
HTML文書のタグを全部取得するなら、そのままgetElementsByTagNameでいいかと思いますが、特定の子要素内のタグを検索したい場合は、特定の子要素を指定してからgetElementsByTagNameを指定すると良いでしょう。
以下は、specialのclass IDを持つ特定の子要素を指定した後に、<p>タグの要素をgetElementsByTagNameで取得しているコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <p>これは取得したくない</p> <p>これは取得したくない</p> <div id="special> <p>取得したい要素</p> <p>取得したい要素</p> <p>取得したい要素</p> </div> </body> <script> var special = document.getElementById('special'); var specialParas = special.getElementsByTagName('p'); </script> |
上記は「<p>これは取得したくない</p>」を避けて、specialの子要素内の<p>タグを取得しています。
getSelectorAllでも似たように要素を取得できる
タグの要素名の取得は他のメソッドでも可能です。例えばgetSelectorAllは、似たように複数の要素名を取得することが可能です。
以下はページ内の全てのh1タグを取得する構文です。
|
1 |
var elements = document.getSelectorAll(“h1”); |
getSelectorAllでは、classを取得する場合は（.ドット）,IDを取得する場合は（#）を前につけるなどルールは異なりますので、事前に確認しておきましょう。
getElementsByTagNameの注意点
変更した要素は更新される
getElementsByTagNameはHTMLコレクションである（生きているともいう）ので、元のDOMが変更された場合、取得する要素は変更されます。（更新されたら自動で同期される）
例えば、getElementsByTagNameで、要素をjavascriptで削除した場合は、削除下状態の要素が取得できます。
getElementsByTagNameは取得要素が変更された場合は同期されますが、同じ用途でよく使われるgetSelectorは同期されません。変更前の情報を取得したい場合はgetSelectorを使うと良いでしょう。
取得要素が1つでもリストを指定する
getElementsByTagNameはNodeListを返します。そのため、取得した要素が1つであっても、要素の取得はarrayのデータ取得のように、[0]の指定が必要です。
|
1 |
document.getElementsByTagName("h1")[0]; |
上記は取得したh1の中で1番最初の要素を返します。
まとめ
getElementsByTagNmeについて説明しました。間違いやすい注意点や構文をしっかり押さえておきましょう。教科書的な情報は以下を参考にしてみると良いでしょう。
