DOM をトラバースする方法-jsチュートリアル-php.cn

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 値の上のタグ。 <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;"><a id="nav" href="index.html">Home</a></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>

タグは、getElementById() メソッドを通じて取得できます。コンソールに次のように入力します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">let navLink = document.getElementById(&#39;nav&#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;"><a id="nav" href="index.html">Home</a></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 = &#39;https://github.com/qq449245884/xiaozhi&#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 = &#39;跳转取前端小智 Github&#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;"><a id="nav" href="https://github.com/qq449245884/xiaozhi">跳转取前端小智 Github</a></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

説明
要素ノード (	や	など) #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 更多编程相关知识，请访问：编程视频！！以上がDOM をトラバースする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。関連ラベル： dom javascript フロントエンドソース：segmentfault.com 前の記事：ReactはWindowsでも使えますか？次の記事：IEはjQueryをサポートしていますか? このウェブサイトの声明この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。著者別の最新記事 Redis のセンチネルを詳しく理解する 2023-04-26 17:59:18 【整理と共有】人気のReact状態管理ツール7選 2023-04-26 17:47:48 Vue2 のキーと Vue3 のキーの違いについて説明した記事 2023-04-26 17:41:42 Nodeのメモリ制御に関する記事 2023-04-26 17:37:05 Excelの実践スキルをシェア：重複値を削除する4つのヒント！ 2023-04-26 17:31:25 Wordの実践スキルを共有：簡体字→繁体字変換機能はこんな使い方もできる！ 2023-04-26 17:27:32 クロスドメインの問題を解決するにはどうすればよいですか?一般的なソリューションの簡単な分析 2023-04-25 19:57:58 JavaScript のシングルトンパターンを理解するための 1 つの記事 2023-04-25 19:53:11 ノードのバッファーについて詳しく見る 2023-04-25 19:49:11 Vue3 で単体テストを作成する方法を調べる 2023-04-25 19:41:54 最新の問題 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 関連トピック詳細> 配列の長さを取得するjsメソッド jsで現在のページを更新する jsの丸め Python はフロントエンドですか、それともバックエンドですか? ノードを削除するjsメソッド JavaScript エスケープ文字 jsで乱数を生成する方法 JavaScriptを有効にする方法人気のおすすめ jsはどういう意味ですか jsで文字列を配列に変換するにはどうすればよいですか? JavaScriptを使用してページを更新する方法 sqrt関数の使い方 js配列内の項目を削除する方法人気のチュートリアル詳細> 関連するチュートリアル人気のおすすめ最新のコース HTML DOM 中国語リファレンスマニュアル 37814 DOM探索の基本を詳しく解説 30244 Chuanzhi Podcast JavaScript&DOM ビデオチュートリアル 88855 最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース) 1422706 回の学習 JAVA 初心者向けビデオチュートリアル 2531351 回の学習 Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル 507113 回の学習 Web フロントエンド開発の簡単な紹介 215764 回の学習 PSビデオチュートリアルをゼロからマスターする 889186 回の学習 [Web フロントエンド] Node.js クイックスタート 7400 回の学習海外のWeb開発フルスタックコースの完全なコレクション 5788 回の学習 Go言語実践GraphQL 4887 回の学習 550W ファンマスターが JavaScript をゼロから段階的に学習します 690 回の学習 Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる 24448 回の学習最新のダウンロード詳細> ウェブエフェクト公式サイトサイト素材フロントエンドテンプレート [フォームボタン] jQuery エンタープライズメッセージフォームの連絡先コード [プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果 [メニューナビゲーション] HTML5 クールなパーティクルアニメーションナビゲーションメニューの特殊効果 [フォームボタン] jQuery ビジュアルフォームのドラッグアンドドロップ編集コード [プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤーコード [html5特殊効果] 古典的な HTML5 プッシュボックスゲーム [画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール [フォトアルバム効果] CSS3 個人アルバムカバーホバーズーム効果 [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート [フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート [PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG) [PNG素材] 4 つの赤い 2023 卒業バッジベクター素材 (AI+EPS+PNG) [バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS） [PNG素材] 金色の卒業帽ベクター素材（EPS+PNG） [PNG素材] 黒と白のスタイルの山アイコンベクター素材 (EPS+PNG) [PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG） [バナー画像] フラットスタイルの植樹祭バナーベクター素材 (AI+EPS) [PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG） [フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート [フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート [フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート [フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート [フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート [フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート [フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します [フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！私たちについて免責事項 Sitemap © php.cn All rights reserved

#<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 をトラバースする方法