JavaScriptで親や兄弟要素を取得する

JavaScriptで指定した要素から親・子・兄弟に当たる要素を取得する方法をメモ。

サンプルコード

id=”second”を基準にして、親要素と兄弟要素を取得してみます。

HTML

<ul id="parent">
	<li id="first">1番目</li>
	<li id="second">2番目</li>
	<li id="third">3番目</li>
</ul>

JavaScript

// 基準になる要素
var target = document.getElementById('second');

// 親要素
var parent = target.parentNode;
console.log('parent', parent); // <ul id="parent">...</ul>

// 兄弟要素
var prev = target.previousElementSibling;
console.log('prev', prev); // <li id="first">1番目</li>
var next = target.nextElementSibling;
console.log('next', next); // <li id="third">3番目</li>

親・兄弟要素を取得するデモページ
　

id=”parent”を基準にして、子要素を取得してみます。

JavaScript

// 基準になる要素
var target = document.getElementById('parent');

// 子要素
var children = target.children;
console.log('childrenの1番目', children[0]); // <li id="first">1番目</li>
console.log('childrenの2番目', children[1]); // <li id="second">2番目</li>
console.log('childrenの3番目', children[2]); // <li id="third">3番目</li>

// 子要素(先頭)
var firstchild = target.firstElementChild;
console.log('firstchild', firstchild); // <li id="first">1番目</li>

// 子要素(最後)
var lastchild = target.lastElementChild;
console.log('lastchild', lastchild); // <li id="third">3番目</li>

子要素を取得するデモページ
　

【参考サイト】

• Node.parentNode – Web API インターフェイス | MDN
• NonDocumentTypeChildNode.previousElementSibling – Web API インターフェイス | MDN
• NonDocumentTypeChildNode.nextElementSibling – Web API インターフェイス | MDN
• ParentNode.children – Web API インターフェイス | MDN
• ParentNode.firstElementChild – Web API インターフェイス | MDN
• ParentNode.lastElementChild – Web API インターフェイス | MDN