[JavaScript General] ノードを取得する
ノードを取得する
memo.
[markdown]
技術評論社
売り上げランキング: 9,393
## 特定のノードを取得する
> * [document.getElementById – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById)
“`javascript
var el = document.getElementById(‘ID’);
“`
> * [document.getElementsByTagName – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName)
“`javascript
var el = document.getElementsByTagName(‘TagName’);
“`
> * [document.getElementsByClassName – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName)
“`javascript
var el = document.getElementsByClassName(‘ClassName’);
“`
See the Pen JavaScript getElementById by DriftwoodJP (@DriftwoodJP) on CodePen.
## 相対的な位置関係でノードを取得する
> * [Node.childNodes – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Node/childNodes)
> * [Node.nodeType – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Node/nodeType)
See the Pen JavaScript childNodes by DriftwoodJP (@DriftwoodJP) on CodePen.
> * [Node.firstChild – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Node/firstChild)
> * [Node.nextSibling – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Node/nextSibling)
See the Pen JavaScript firstChild / nextSibling by DriftwoodJP (@DriftwoodJP) on CodePen.
> * [Node.lastChild – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Node/lastChild)
> * [Node.previousSibling – Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/Node/previousSibling)
### Element Traversal API / IE9+
> * [Element Traversal API – 三等兵](http://d.hatena.ne.jp/sandai/20101220/p1)
>
> firstChildとかlastChildとかが便利になったやつ。空白ノードとかコメントノードとか無駄なノードをよけて、要素ノード(nodeTypeが1)しか手を出しません。
このように書き換えられる。
> * [ParentNode.children – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children)
“`javascript
var elList = elementNodeReference.children;
“`
> * [ParentNode.childElementCount – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/childElementCount)
“`javascript
var elCount = elementNodeReference.childElementCount;
“`
See the Pen JavaScript children by DriftwoodJP (@DriftwoodJP) on CodePen.
> * [ParentNode.firstElementChild – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/firstElementChild)
“`javascript
var childNode = elementNodeReference.firstElementChild;
“`
> * [NonDocumentTypeChildNode.nextElementSibling – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/nextElementSibling)
“`javascript
var nextNode = elementNodeReference.nextElementSibling;
“`
See the Pen JavaScript firstElementChild / nextElementSibling by DriftwoodJP (@DriftwoodJP) on CodePen.
> * [ParentNode.lastElementChild – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/lastElementChild)
“`javascript
var childNode = elementNodeReference.lastElementChild;
“`
> * [NonDocumentTypeChildNode.previousElementSibling – Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/NonDocumentTypeChildNode/previousElementSibling)
“`javascript
var prevNode = elementNodeReference.previousElementSibling;
“`
## 補遺
> * [JavaScriptのDOM Core基礎 – 三等兵](http://d.hatena.ne.jp/sandai/20100823/p1)
> * [Element Traversal API – 三等兵](http://d.hatena.ne.jp/sandai/20101220/p1)
[/markdown]