JavaScriptで要素を巡る

JavaScriptで次の/前の要素を取得する

JavaScriptでは、DOM (Document Object Model) を操作することで、HTML要素の次のまたは前の要素を取得することができます。

nextElementSibling と previousElementSibling

これらのプロパティは、指定された要素の次のまたは前の要素を取得するために使用されます。

// HTML要素を取得
const element = document.getElementById("myElement");

// 次の要素を取得
const nextElement = element.nextElementSibling;

// 前の要素を取得
const previousElement = element.previousElementSibling;

nextSibling と previousSibling

これらのプロパティは、指定された要素の次のまたは前の要素を取得しますが、テキストノードやコメントノードも含まれます。

// HTML要素を取得
const element = document.getElementById("myElement");

// 次の要素を取得（テキストノードやコメントノードも含まれる）
const nextSibling = element.nextSibling;

// 前の要素を取得（テキストノードやコメントノードも含まれる）
const previousSibling = element.previousSibling;

注意

• 要素が存在しない場合、これらのプロパティは null を返します。
• nextSibling と previousSibling は、要素、テキストノード、コメントノードを返します。

例

<div id="container">
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</div>

const firstParagraph = document.querySelector("#container p");

// 次の要素を取得
const secondParagraph = firstParagraph.nextElementSibling;

// 前の要素を取得
console.log(secondParagraph.previousElementSibling); // null (最初の要素なので)

JavaScriptで要素を巡る

// HTML要素を取得
const container = document.getElementById("container");
let currentElement = container.firstElementChild;

// 要素を巡る
while (currentElement) {
  console.log(currentElement.textContent);
  currentElement = currentElement.nextElementSibling;
}

このコードでは、container要素の子要素の最初の要素から始めて、次の要素を繰り返し取得し、その内容をコンソールに出力します。

childNodesとnodeTypeを使用した巡回

// HTML要素を取得
const container = document.getElementById("container");

// 子要素を巡る
for (let i = 0; i < container.childNodes.length; i++) {
  const child = container.childNodes[i];
  if (child.nodeType === Node.ELEMENT_NODE) {
    console.log(child.textContent);
  }
}

このコードでは、container要素の子要素をすべて取得し、nodeTypeがNode.ELEMENT_NODEである要素のみを巡ります。

childrenを使用した巡回

// HTML要素を取得
const container = document.getElementById("container");

// 子要素を巡る
for (let i = 0; i < container.children.length; i++) {
  const child = container.children[i];
  console.log(child.textContent);
}

このコードは、childrenプロパティを使用して、container要素の子要素を直接取得し、巡ります。

• childrenは要素のみを返します。
• childNodesは要素、テキストノード、コメントノードを返します。

<div id="container">
  <p>First paragraph</p>
  <p>Second paragraph</p>
  <p>Third paragraph</p>
</div>

querySelectorとquerySelectorAll

これらのメソッドは、CSSセレクタを使用して要素を取得します。

// CSSセレクタを使用して要素を取得
const elements = document.querySelectorAll(".myClass");

// 要素を巡る
elements.forEach(element => {
  console.log(element.textContent);
});

closest

このメソッドは、指定された要素またはその祖先要素のうち、最初にマッチする要素を取得します。

// 要素を取得
const element = document.getElementById("myElement");

// 祖先要素のうち、最初にマッチする要素を取得
const closestParent = element.closest(".parentClass");

matches

このメソッドは、指定された要素が指定されたセレクタにマッチするかどうかを判定します。

// 要素を取得
const element = document.getElementById("myElement");

// 要素が指定されたセレクタにマッチするかどうかを判定
if (element.matches(".myClass")) {
  console.log("要素は.myClassにマッチします");
}

getElementByIdとgetElementsByTagName

// IDを使用して要素を取得
const elementById = document.getElementById("myElement");

// タグ名を使用して要素の配列を取得
const elementsByTagName = document.getElementsByTagName("p");

• getElementByIdとgetElementsByTagNameはIDまたはタグ名を使用して要素を取得する基本的な方法です。
• matchesは要素が特定のセレクタにマッチするかどうかを判定する際に役立ちます。
• closestは祖先要素を検索する際に便利です。
• querySelectorとquerySelectorAllはCSSセレクタを使用するため、柔軟な要素の取得が可能です。