getElementsByTagNameについて[HTMLCollection][ライブオブジェクト]

2017年6月18日

getElementsByTagNameはdocumentオブジェクトおよびElementオブジェクトのメソッドで、指定したタグ名から要素を取得することができます。

 

スポンサーリンク

 

 

getElementsByTagNameメソッドは要素の集合であるHTMLCollectionオブジェクトを返します(※getElementByIdメソッドは、Elementオブジェクトを返します)。HTMLCollectionオブジェクトは配列のようなオブジェクトで、以下のようなプロパティとメソッドを利用できます。

 

lengthプロパティ 要素数
item(i)メソッド i番目の要素を取得する
namedItem(id/name)メソッド idまたはname属性の要素を取得する

 

関連ページ

getElementByIdについて[DOM][ノード][Element]

 

 

getElementsByTagNameは、Elementオブジェクトのメソッドでもあるので、getElementById(Elementオブジェクトを返す)を利用して下記のようにある特定の要素内のタグだけを指定することも可能です。

 

 

またタグ名にはワイルドカード(’*’)を指定して、すべての要素を取得することもできます。

 

 

 

 

ライブオブジェクト


 

HTMLCollectionオブジェクトはライブオブジェクトの特徴を持ちます。

 

 

13行目の時点では<li>タグ行は3つ存在し、15〜21行目において<li>タグ行を1つ追加しています。

 

11行目において、getElementsByTagNameメソッドは一度だけHTMLCollectionオブジェクト(上記コードではlistオブジェクト)を返している状況ですが、23行目においてlistオブジェクトは<li>タグを追加した後の状態を知っていることがわかります。つまりHTMLCollectionオブジェクトは常にDOMツリーを参照しています。このような挙動を持つのがライブオブジェクトです(『パーフェクトJavaScript』p.252参照)。

 

 

 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー