コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

DOM をトラバースする方法

青灯夜游
リリース： 2021-01-19 10:06:32
転載
1527 人が閲覧しました

DOM をトラバースする方法

関連する推奨事項: 「JavaScript ビデオ チュートリアル 」

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

HTML 用語

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

<a href="index.html">Home</a>
ログイン後にコピー

ここには、

index.html

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

    a
  • はタグです
    • href
  • は属性
    • index.html
  • です属性値
    • Home
  • はテキスト
    • です。開始タグと終了タグの間のすべてを組み合わせて、HTML 要素全体を構成します。 
<!DOCTYPE html>
<html>
  <head>
    <title>Learning the DOM</title>
  </head>

  <body>
    <h1>Document Object Model</h1>
  </body>
</html>
ログイン後にコピー

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

id

属性を使用し、a の に id を追加することです。 nav 値の上のタグ。 <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;a id=&quot;nav&quot; href=&quot;index.html&quot;&gt;Home&lt;/a&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

a

タグは、getElementById() メソッドを通じて取得できます。コンソールに次のように入力します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">let navLink = document.getElementById(&amp;#39;nav&amp;#39;);</pre><div class="contentsignin">ログイン後にコピー</div></div> 出力:

<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;a id=&quot;nav&quot; href=&quot;index.html&quot;&gt;Home&lt;/a&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

href

属性を変更することで、リンクのアドレスを変更できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">navLink.href = &amp;#39;https://github.com/qq449245884/xiaozhi&amp;#39;;</pre><div class="contentsignin">ログイン後にコピー</div></div>また、テキスト コンテンツを変更するには、

textContent

プロパティも渡します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">navLink.textContent = &amp;#39;跳转取前端小智 Github&amp;#39;;</pre><div class="contentsignin">ログイン後にコピー</div></div>次に、コンソールに

navLink

と直接入力して、a の更新されたコンテンツを確認します。 tag :<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;a id=&quot;nav&quot; href=&quot;https://github.com/qq449245884/xiaozhi&quot;&gt;跳转取前端小智 Github&lt;/a&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>この時点で、

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
#<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 サイトの他の関連記事を参照してください。

関連ラベル：
dom javascript フロントエンド
ソース：segmentfault.com
前の記事：ReactはWindowsでも使えますか？ 次の記事：IEはjQueryをサポートしていますか?
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート