ホームページ > 記事 > ウェブフロントエンド > DOM をトラバースする方法

DOM をトラバースする方法

青灯夜游転載: 2021-01-19 10:06:321462ブラウズ

DOM をトラバースする方法

ドキュメント#の組み込みメソッドを使用できることはわかっています。 ID を渡す ## オブジェクト、HTML 要素にアクセスするためのクラス、タグ名、クエリセレクター。 DOM は、ルートに document ノードがあり、その他の各ノード (要素、コメント、テキストノードを含む) が各ブランチのノードとなるノードツリーで構成されます。このチュートリアルでは、JS と DOM を操作する際に重要な HTML 用語をいくつか確認し、DOM ツリー、ノード、および最も一般的なノードタイプを識別する方法を紹介します。最後に、DOM を対話的に変更するための JS プログラムを作成します。

HTML 用語

まず、この HTML 要素を見てみましょう。

<a href="index.html">Home</a>

ここには、

index.html

へのリンクであるアンカー要素があります。

はタグです
は属性
です属性値
はテキスト

<!DOCTYPE html>
<html>
  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>
</html>

JS を使用して要素にアクセスする最も簡単な方法は、

属性を使用し、a の に id を追加することです。 nav 値の上のタグ。 <pre class="brush:js;toolbar:false;"><a id="nav" href="index.html">Home</a></pre>

タグは、getElementById() メソッドを通じて取得できます。コンソールに次のように入力します: <pre class="brush:js;toolbar:false;">let navLink = document.getElementById(&#39;nav&#39;);</pre> 出力:

href

属性を変更することで、リンクのアドレスを変更できます: <pre class="brush:js;toolbar:false;">navLink.href = &#39;https://github.com/qq449245884/xiaozhi&#39;;</pre>また、テキストコンテンツを変更するには、

textContent

プロパティも渡します: <pre class="brush:js;toolbar:false;">navLink.textContent = &#39;跳转取前端小智 Github&#39;;</pre>次に、コンソールに

navLink

と直接入力して、a の更新されたコンテンツを確認します。 tag :<pre class="brush:js;toolbar:false;"><a id="nav" href="https://github.com/qq449245884/xiaozhi">跳转取前端小智 Github</a></pre>この時点で、

document

メソッドを使用して要素にアクセスする方法、要素を変数に割り当てる方法、要素内の属性と値を変更する方法を理解する必要があります。 DOM ツリーとノード

DOM 内のすべての要素はノードとして定義されます。ノードには多くの種類がありますが、最も一般的に使用されるのは次の 3 つです。

#要素ノード

テキストノード
コメントノード
#HTML 要素が DOM 内の項目である場合、その要素は

と呼ばれます。要素の外側にある個々のテキストは

Text ノード であり、HTML コメントは Comment Section ポイントです。これら 3 つのノードタイプに加えて、document 自体も document ノードであり、他のすべてのノードのルートになります。 DOM は、ネストされたノードのツリー構造で構成されており、DOM ツリー

とも呼ばれます。私たちは両親、子供、兄弟からなる先祖の家系図を知っています。 DOM 内のノードは、他のノードとの関係に応じて、親、子、兄弟とも呼ばれます。

デモのために、nodes.html

ファイルを作成し、テキスト、コメント、要素ノードを追加します。

<!DOCTYPE html>
<html>
  <head>
    <title>Learning About Nodes</title>
  </head>

  <body>
    <h1>An element node</h1>
    <!-- a comment node -->
    A text node.
  </body>
</html>

html

要素ノードは親ノードです。

head と body は兄弟ノードであり、html の子ノードです。 body には 3 つの子ノードが含まれており、これらはすべて兄弟ノードです。ノードのタイプによってネストレベルは変更されません。 注: HTML で生成された DOM を使用する場合、HTML ソースコードのインデントにより、DevTools Elements

タブには表示されない空のテキストノードが多数作成されます。 DOM の空白の詳細については、https://developer.mozilla.org を参照してください...

ノードタイプの識別

ドキュメント内の各ノードにはノードタイプがあり、このタイプは

nodeType

属性を通じてアクセスできます。MDN でさらに多くのノードタイプを表示できます。以下は、より一般的なノードタイプです。

#ノードタイプ値ELEMENT_NODE 1

3ElementAttr8コメントノード (例:

説明

要素ノード ( やなど) #TEXT_NODE

または # 内の実際の テキスト##COMMENT_NODE

説明
要素ノード (	や	など) #TEXT_NODE
	または	# 内の実際の `テキスト##COMMENT_NODE`
		`#<p>在 Developer Tools 的<code>Elements`选项卡中，你可能会注意到，每当单击并突出显示DOM中的任何一行时，它旁边就会出现`== $0`的值。通过输入`$0`，这是访问开发人员工具中当选中元素的一种非常方便的方法。通过 F12 选中一个元素，如我们选中 `h1` 标签：在控制台中，使用`nodeType`属性获取当前选定节点的节点类型。 $0.nodeType; // 1 选择`h1`元素后，可以看到控制台输出 `1`，它与`ELEMENT_NODE`相关。对文本和注释执行相同的操作，分别输出`3`和`8`。除了`nodeType`之外，还可以使用`nodeValue`属性获取文本或注释节点的值，并使用`nodeName`获取元素的标签名。使用事件修改DOM 到目前为止，我们只看到了如何在控制台中修改DOM，接着我们通过事件的方式来跟 Dom 玩玩。回到`index.html`文件，添加一个带有id的`button`元素，并新建 `script.js` 引入其中。 JS 中的事件是用户所做的动作。当用户将鼠标悬停在一个元素上，或单击一个元素，或按下键盘上的一个特定键时，这些都是事件类型。在这个特殊的例子中，我们希望我们的按钮侦听并准备在用户单击它时执行操作。我们可以通过向按钮添加一个事件监听器来做到这一点。在 `scripts.js`中首先找到 `button` 元素，并监听一个 `click` 事件，在点击事件里面我们去更网页的背景颜色： let button = document.getElementById('changeBackground') button.addEventListener('click', () => { document.body.style.backgroundColor = 'fuchsia' }) 存该文件后，在浏览器中刷新`index.html`。单击按钮，事件将触发。总结在本文中，我们了解了DOM 是如何构造成节点树的，节点树通常是HTML元素、文本或注释，我们创建了一个脚本，允许用户修改网站，而不必手动在开发人员控制台中输入代码。原文地址：https://www.taniascia.com/how-to-traverse-the-dom/ 作者： Tania Rascia 译文地址：https://segmentfault.com/a/1190000038466474 更多编程相关知识，请访问：编程视频！！

#<p>在 Developer Tools 的<code>Elements选项卡中，你可能会注意到，每当单击并突出显示DOM中的任何一行时，它旁边就会出现== $0的值。通过输入$0，这是访问开发人员工具中当选中元素的一种非常方便的方法。

通过 F12 选中一个元素，如我们选中 h1 标签：

DOM をトラバースする方法

在控制台中，使用nodeType属性获取当前选定节点的节点类型。

$0.nodeType;
// 1

选择h1元素后，可以看到控制台输出 1，它与ELEMENT_NODE相关。对文本和注释执行相同的操作，分别输出3和8。

除了nodeType之外，还可以使用nodeValue属性获取文本或注释节点的值，并使用nodeName获取元素的标签名。

使用事件修改DOM

到目前为止，我们只看到了如何在控制台中修改DOM，接着我们通过事件的方式来跟 Dom 玩玩。

回到index.html文件，添加一个带有id的button元素，并新建 script.js 引入其中。

JS 中的事件是用户所做的动作。当用户将鼠标悬停在一个元素上，或单击一个元素，或按下键盘上的一个特定键时，这些都是事件类型。在这个特殊的例子中，我们希望我们的按钮侦听并准备在用户单击它时执行操作。我们可以通过向按钮添加一个事件监听器来做到这一点。

在 scripts.js中首先找到 button 元素，并监听一个 click 事件，在点击事件里面我们去更网页的背景颜色：

let button = document.getElementById(&#39;changeBackground&#39;)

button.addEventListener(&#39;click&#39;, () => {
  document.body.style.backgroundColor = &#39;fuchsia&#39;
})

存该文件后，在浏览器中刷新index.html。单击按钮，事件将触发。

DOM をトラバースする方法

总结

在本文中，我们了解了DOM 是如何构造成节点树的，节点树通常是HTML元素、文本或注释，我们创建了一个脚本，允许用户修改网站，而不必手动在开发人员控制台中输入代码。

原文地址：https://www.taniascia.com/how-to-traverse-the-dom/

作者： Tania Rascia

译文地址：https://segmentfault.com/a/1190000038466474

更多编程相关知识，请访问：编程视频！！

以上がDOM をトラバースする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：ReactはWindowsでも使えますか？次の記事：ReactはWindowsでも使えますか？

続きを見る