DOMをトラバースする方法

投稿日: 2019-11-08 2022-04-20
タグ: Development, javascript

序章

このシリーズの前回のチュートリアルであるDOMの要素にアクセスする方法では、documentオブジェクトの組み込みメソッドを使用して、ID、クラス、タグ名でHTML要素にアクセスする方法について説明しました。、およびクエリセレクタ。 DOMはノードのツリーとして構造化されており、ルートにdocumentノードがあり、さまざまなブランチとして他のすべてのノード（要素、コメント、テキストノードを含む）があります。

多くの場合、事前にすべての要素を指定せずにDOM内を移動する必要があります。 JavaScriptとHTMLの操作方法を理解するには、DOMツリーを上下に移動してブランチ間を移動する方法を学ぶことが不可欠です。

このチュートリアルでは、親、子、および兄弟のプロパティを使用してDOMをトラバースする方法（DOMのウォーキングまたはナビゲートとも呼ばれます）について説明します。

設定

まず、次のコードで構成されるnodes.htmlという新しいファイルを作成します。

ノード.html

<!DOCTYPE html>
<html>

<head>
  <title>Learning About Nodes</title>

  <style>
    * { border: 2px solid #dedede; padding: 15px; margin: 15px; }
    html { margin: 0; padding: 0; }
    body { max-width: 600px; font-family: sans-serif; color: #333; }
  </style>
</head>

<body>
  <h1>Shark World</h1>
  <p>The world's leading source on <strong>shark</strong> related information.</p>
  <h2>Types of Sharks</h2>
  <ul>
    <li>Hammerhead</li>
    <li>Tiger</li>
    <li>Great White</li>
  </ul>
</body>

<script>
  const h1 = document.getElementsByTagName('h1')[0];
  const p = document.getElementsByTagName('p')[0];
  const ul = document.getElementsByTagName('ul')[0];
</script>

</html>

ファイルをWebブラウザーにロードすると、次のスクリーンショットのようなレンダリングが表示されます。

nodes.html page

このサンプルWebサイトには、いくつかの要素を含むHTMLドキュメントがあります。 styleタグにいくつかの基本的なCSSが追加され、各要素がはっきりと見えるようになりました。また、いくつかの要素に簡単にアクセスできるように、scriptにいくつかの変数が作成されました。 h1、p、およびulはそれぞれ1つしかないため、それぞれのgetElementsByTagNameプロパティの最初のインデックスにアクセスできます。

ルートノード

documentオブジェクトは、DOM内のすべてのノードのルートです。このオブジェクトは、実際にはwindowオブジェクトのプロパティです。これは、ブラウザのタブを表すグローバルな最上位オブジェクトです。 window オブジェクトは、ツールバー、ウィンドウの高さと幅、プロンプト、アラートなどの情報にアクセスできます。 documentは、内側のwindowの内側にあるもので構成されています。

以下は、すべてのドキュメントに含まれるルート要素で構成されるチャートです。空白のHTMLファイルがブラウザーにロードされた場合でも、これらの3つのノードが追加されてDOMに解析されます。

財産	ノード	ノードタイプ
`document`	`#document`	`DOCUMENT_NODE`
`document.documentElement`	`html`	`ELEMENT_NODE`
`document.head`	`head`	`ELEMENT_NODE`
`document.body`	`body`	`ELEMENT_NODE`

html、head、およびbody要素は非常に一般的であるため、documentに独自のプロパティがあります。

DevToolsでConsoleを開き、これら4つのプロパティを送信して出力を表示することにより、これらの各プロパティをテストします。 h1、p、およびulをテストして、scriptタグに追加した変数による要素を返すこともできます。

親ノード

DOM内のノードは、他のノードとの関係に応じて、親、子、および兄弟と呼ばれます。任意のノードの親は、その1レベル上、またはDOM階層のdocumentに近いノードです。親を取得するには、parentNodeとparentElementの2つのプロパティがあります。

財産	取得
`parentNode`	親ノード
`parentElement`	親要素ノード

nodes.htmlの例では、次のようになります。

htmlは、head、body、およびscriptの親です。
bodyは、h1、h2、p、ulの親ですが、[X89X]

getdocs

13036