JavaScript で子要素を取得する
Muhammad Muzammil Hussain
2022年3月18日
この記事では、JavaScript を使用して HTML の Web ページの本文から子ノードを取得する方法について説明します。
JavaScript を使用して HTML の Web ページの本文から子ノードを取得する
JavaScript を使用してノードの子を取得するということは、ページ全体にアクセスして配列で取得することを意味します。空白は Web ページのテキストノードと見なされることを覚えておくことが重要です。
空白の場合、古いブラウザはそれを異なる方法で処理します。それらのいくつかは childNodes と見なされ、その他はバージョン 8 よりも小さい Internet Explorer のような子と見なされます。
<!DOCTYPE html>
<html>
<body>
<!-- we are writing a comment node! -->
<p>Click GET NODES button to get child nodes.</p>
<button onclick="getMyWebPageChildNodes()">GET NODES</button>
<p id="results"></p>
<script>
function getMyWebPageChildNodes() {
var myChildsNode = document.body.childNodes;
var textMessages = "";
var i;
for (i = 0; i < myChildsNode.length; i++) {
textMessages = textMessages + myChildsNode[i].nodeName + "<br>";
}
document.getElementById("results").innerHTML = textMessages;
}
</script>
</body>
</html>
上記のコードでは、ボタンを作成し、onClick という名前のそのボタンにリスナーを設定します。
getMyWebPageChildNodes という名前の onclick にアクションを設定します。myChildsNode という名前の配列を作成し、すべての子ノードをこの関数に格納しました。
その後、コメントなしでノードを純粋に格納する変数 textMessages を作成します。myChildsNode 配列を反復するために counter 変数が作成されます。
Web ページに存在するすべてのノードの名前をフェッチして textMessages 変数に格納する for ループを作成しました。完了すると、すべてのノード名が取得され、for ループが終了します。
ここでは、これらのノードを段落タグ id=results に割り当てます。最後に、段落タグ内のすべての子ノードを取得します。