[JavaScript General] ノードを取得する

ノードを取得する
memo.

JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
山田 祥寛
技術評論社
売り上げランキング: 9,393

Contents

特定のノードを取得する

var el = document.getElementById('ID');
var el = document.getElementsByTagName('TagName');
var el = document.getElementsByClassName('ClassName');

See the Pen JavaScript getElementById by DriftwoodJP (@DriftwoodJP) on CodePen.

相対的な位置関係でノードを取得する

See the Pen JavaScript childNodes by DriftwoodJP (@DriftwoodJP) on CodePen.

See the Pen JavaScript firstChild / nextSibling by DriftwoodJP (@DriftwoodJP) on CodePen.

Element Traversal API / IE9+

firstChildとかlastChildとかが便利になったやつ。空白ノードとかコメントノードとか無駄なノードをよけて、要素ノード(nodeTypeが1)しか手を出しません。

このように書き換えられる。

var elList = elementNodeReference.children;
var elCount = elementNodeReference.childElementCount;

See the Pen JavaScript children by DriftwoodJP (@DriftwoodJP) on CodePen.

var childNode = elementNodeReference.firstElementChild;
var nextNode = elementNodeReference.nextElementSibling;

See the Pen JavaScript firstElementChild / nextElementSibling by DriftwoodJP (@DriftwoodJP) on CodePen.

var childNode = elementNodeReference.lastElementChild;
var prevNode = elementNodeReference.previousElementSibling;

補遺