JavaScript - 親子要素・前後要素を取得する

ParentNode.children

ParentNode.children プロパティは、子要素ノードの HTMLCollection を返します。ParentNode.children の構文は以下のとおりです。

var elementList = node.children;
ParentNode.children プロパティ
elementList
HTMLCollection です。子要素が無い場合、elementList は要素を含まず length0 になります。
// p_element は p 要素を参照しています
var elementChildren = p_element.children;
for (var i = 0; i < elementChildren.length; i++) {
    console.log(elementChildren[i].tagName);
}
ParentNode.children プロパティ
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
93.51410
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

ParentNode.firstElementChild

ParentNode.firstElementChild プロパティは、最初の子要素ノードの Element を返します。存在しない場合は、null を返します。ParentNode.firstElementChild の構文は以下のとおりです。

var element = node.firstElementChild;
ParentNode.firstElementChild プロパティ
element
HTMLCollection です。子要素が無い場合、element は要素を含まず length0 になります。
/* HTML 側 */
<ul id="foo">
  <li>First  (1)</li>
  <li>Second (2)</li>
  <li>Third  (3)</li>
</ul>

/* JavaScript 側 */
var foo = document.getElementById('foo');
console.log(foo.firstElementChild.textContent); // First  (1)
ParentNode.firstElementChild プロパティ
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
93.51410
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

ParentNode.lastElementChild

ParentNode.lastElementChild プロパティは、最後の子要素ノードの Element を返します。存在しない場合は、null を返します。ParentNode.lastElementChild の構文は以下のとおりです。

var element = node.lastElementChild;
ParentNode.lastElementChild プロパティ
element
HTMLCollection です。子要素が無い場合、element は要素を含まず length0 になります。
/* HTML 側 */
<ul id="foo">
  <li>First  (1)</li>
  <li>Second (2)</li>
  <li>Third  (3)</li>
</ul>

/* JavaScript 側 */
var foo = document.getElementById('foo');
console.log(foo.lastElementChild.textContent); // Third  (3)
ParentNode.lastElementChild プロパティ
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
93.51410
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

ParentNode.nextSibling

ParentNode.nextSibling プロパティは、指定したノードのすぐ次にあるノードを返し、指定したノードがリストで最後の場合は null を返します。ParentNode.nextSibling の構文は以下のとおりです。

var nextNode = node.nextSibling;
ParentNode.nextSibling プロパティ
/* HTML 側 */
<ul id="foo">
  <li>First  (1)</li>
  <li>Second (2)</li>
  <li>Third  (3)</li>
</ul>

/* JavaScript 側 */
var foo = document.getElementById('foo');
console.log(foo.firstElementChild.nextSibling.textContent); // Second (2)
ParentNode.nextSibling プロパティ
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
812
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

ParentNode.previousElementSibling

ParentNode.previousElementSibling プロパティは、指定したノードのすぐ前の要素を返し、指定したノードがリストで最後の場合は null を返します。ParentNode.previousElementSibling の構文は以下のとおりです。

var prevNode = node.previousElementSibling;
ParentNode.previousElementSibling プロパティ
/* HTML 側 */
<ul id="foo">
  <li>First  (1)</li>
  <li>Second (2)</li>
  <li>Third  (3)</li>
</ul>

/* JavaScript 側 */
var foo = document.getElementById('foo');
console.log(foo.lastElementChild.previousElementSibling.textContent); // Second (2)
ParentNode.previousElementSibling プロパティ
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
93.54410
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

Node.parentNode

Node.parentNode プロパティは、指定されたノードの DOM ツリー内の親ノードを返します。Node.parentNode の構文は以下のとおりです。

parentNode = node.parentNode;
Node.parentNode プロパティ
/* HTML 側 */
<ul id="foo">
  <li>First  (1)</li>
  <li>Second (2)</li>
  <li>Third  (3)</li>
</ul>

/* JavaScript 側 */
var foo = document.getElementById('foo');
console.log(foo.firstElementChild.parentNode); // #foo
Node.parentNode プロパティ
サポートブラウザ
ie
IE
edge
Edge
firefox
Firefox
chrome
Chrome
safari
Safari
opera
Opera
safari
iOS Safari
android
Android
11
◯:Support ✕:Not Support ?:未定義 n:以降の Version で Support

関連記事