,

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

公開日: 2016/08/10
更新日: 2019/01/11

ノードを取得する
memo.

JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで
JavaScript本格入門　～モダンスタイルによる基礎からAjax・ｊQueryまで

posted with amazlet at 16.08.09
山田 祥寛
技術評論社
売り上げランキング: 9,393
Amazon.co.jpで詳細を見る

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;

補遺