【Javascrpt】「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法
【Javascrpt】
「Node.Childnodes」の使い方 - 要素内の子要素を参照・設定する方法
「Node.Childnodes」プロパティは、
「Node」オブジェクトのプロパティの1つで、
読み取り専用のプロパティ。
「Javascript」の中で、要素の中にある「子要素」を確認する方法に使わている。
「Node」は、他のオブジェクトが継承しているインターフェイスなので、
「Childnodes」は、他のオブジェクトで利用できるように継承されている。
「Childnodes」プロパティは、
「テキストノード」「コメントノード」などの「非要素ノード」含むすべての子ノードが含まれる。
要素のみを取得したい場合は、「ParentNode.children」を利用する。
「Childnodes」プロパティを使用して、
要素内に含まれる要素(子要素)を指定した結果は、
配列の形式で参照できるようになっていて、
・length(子要素の数)
・id(ID名を取得する)
・nodeValue(子要素内のテキストを参照する)
・nodeType(子要素の種類)
・nodeName(子要素のタグ名)
などのプロパティを利用して、
子要素の情報を取得していきます。
「Node.Childnodes」の書式
すべての子要素を指定する書式
var 配列名 = window.document.getElementById('ID名').childNodes;
子要素を指定する
var Get_Childnodes = window.document.getElementById('ID名').childNodes;
「タグ名」を表示させるコード
for (var i = 0, i &lgt; Get_Childrens.length; i++) {
console.log(Get_Childrens[i].nodeName);
}
子要素の数
var NodeLength=Get_Childrens.length
子要素の「ID」を取得するコード
var NodeID=Get_Childrens[0].id;
「childNodes」で取得した子要素配列には、テキストも含まれているので注意。
テキスト抽出
var NodeText=Get_Childrens[0].nodeValue
要素のタグ名
var NodeName=Get_Childrens[0].nodeName
各種要素が返す数値(要素ノードは1,テキストノードは3)
var NodeType=Get_Childrens[0].nodeType
ノードの指定した属性名の属性値を得る
var NodeAttribute=Get_Childrens[0].getAttributeNode("属性名");
Back