17/07/16

Nodeの種類と子要素の取得について


Nodeの種類と、子要素の取得についての備忘録です。

Nodeについて

文書(ドキュメント)を構成するものです。
つまり、HTMLタグやテキストは全てノードで構成されています。

var grandson1 = document.createElement("li")
var grandoson1_text = document.createTextNode("hoge")
grandson1.appendChild(grandoson1_text)

var grandson2 = document.createElement("li");
var grandson2_text = document.createTextNode("fuga")
grandson2.appendChild(grandson2_text)

var child = document.createElement("ul");
child.classList.add("children");
child.appendChild(grandson1);
child.appendChild(grandson2);

var parent = document.createElement("div")
parent.classList.add("parent");
parent.appendChild(child);

先ほどのスクリプトを実行すると以下のようなになります

<div class="parent">
    <ul class="children">
        <li>hoge</li>
        <li>fuga</li>
    </ul>
</div>

<div>や<ul>、<li>もノードになります。

node.NodeType

ノードの属するタイプを付与されています。
NodeTypeは12種類あり、
ELEMENT_NOD
TEXT_NODE
DOCUMENT_NODE
などがあります。

grandson1.nodeType
// 1: ELEMENT_NODE
grandoson1_text.nodeType
// 3: TEXT_NODE
document.nodeType
// 9: DOCUMENT_NODE

参考記事
Node.nodeType – Web API インターフェイス | MDN

node.Nodelist

NodeList オブジェクトは DOM ノードの集合を表すオブジェクトです。
Node.childNodes や document.querySelectorAll メソッドの戻り値として用いられます。

参考記事
NodeList – Web API インターフェイス | MDN

nodeの子要素を取得する2種類

node.childNodes

全ての子ノードのオブジェクト(コレクション)が返されます

node.children

TextNodeは含まない、要素ノードだけのオブジェクト(コレクション)が返されます

 

grandson1.childNodes
// [text]

grandson1.children
// []

参考記事
Node.childNodes – Web API インターフェイス | MDN


ParentNode.children – Web API インターフェイス | MDN

スポンサーリンク

メールアドレスが公開されることはありません。

youya66

だらけとびびり、それとちょっぴりのてきとーさ。

コアラになってだらだらしながら愛されたい。