DOMをトラバースする方法
序章
このシリーズの前回のチュートリアルであるDOMの要素にアクセスする方法では、document
オブジェクトの組み込みメソッドを使用して、ID、クラス、タグ名でHTML要素にアクセスする方法について説明しました。 、およびクエリセレクタ。 DOMはノードのツリーとして構造化されており、ルートにdocument
ノードがあり、さまざまなブランチとして他のすべてのノード(要素、コメント、テキストノードを含む)があります。
多くの場合、事前にすべての要素を指定せずにDOM内を移動する必要があります。 JavaScriptとHTMLの操作方法を理解するには、DOMツリーを上下に移動してブランチ間を移動する方法を学ぶことが不可欠です。
このチュートリアルでは、親、子、および兄弟のプロパティを使用してDOMをトラバースする方法(DOMのウォーキングまたはナビゲートとも呼ばれます)について説明します。
設定
まず、次のコードで構成されるnodes.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ブラウザーにロードすると、次のスクリーンショットのようなレンダリングが表示されます。
このサンプル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]