DOM_html/css_WEB-ITnose での DOM ウォーキング
DOM へのアクセスは document から始まります。このオブジェクトは要素を検索および変更するための一連のメソッドを提供します。
ルート ノード: documentElement および body
DOM ルート。ノードは document.documentElement です。この特定の属性は、最上位の HTML タグにアクセスするために使用されます。
もう 1 つの開始点は、BODY タグを表す document.body です。 >どちらもエントリ ポイントとして有効ですが、document.body は null にすることもできます。
たとえば、HEAD 内のスクリプトが document.body にアクセスする場合、この属性の値は null で置き換えられます。現時点では BODY タグがないため、当然です。
以下の例では、ポップアップ ボックスは null を出力します。
コード名
これとは対照的に、document.documentElement は常に有効です。
<!DOCTYPE HTML><html> <head> <script> alert("Body from HEAD: "+document.body) // null </script> </head> <body> <div>The document</div> <script> // different browsers output different text here, // because of different implementations of toString alert("Body from inside body: " + document.body) </script> </body></html>上記のルールをより直観的に説明すると、スクリプトの実行時に、参照された要素がまだブラウザーによってレンダリングされていないということになります。
子要素
要素の子要素を取得するには、いくつかの方法があります。
childNodes
要素は、配列を返す childNodes を使用してアクセスされる子ノードを参照します。
すべてのノード (IE < 9 を除く) は参照によってアクセスされます。
SCRIPT
上記の例では、document.body.childNodes[1] は DIV 要素です (IE<9 を除くすべてのブラウザーでは)。空白のノードはありません。したがって、 document.body.childNodes [1] は UL です。
Children
<!DOCTYPE HTML><html> <body> <div>Allowed readers:</div> <ul> <li>Bob</li> <li>Alice</li> </ul> <!-- a comment node --> <script> function go() { var childNodes = document.body.childNodes for(var i=0; i<childNodes.length; i++) { alert(childNodes[i]) } } </script> <button onclick="go()" style="width:100px">Go!</button> </body></html>これにはすべての要素が含まれています。統合された例を見てみましょう。ただし、childNodes の代わりに子を使用します。
ここではすべてのタグ要素が出力されます。
コード名
子接続
または一連の子要素を渡すだけでは十分ではありません。それらへのアクセスが十分に便利ではないためです。
したがって、他にもあります。兄弟、親などの属性。
<!DOCTYPE HTML><html> <body> <div>Allowed readers:</div> <ul> <li>Bob</li> <li>Alice</li> </ul> <!-- a comment node --> <script> function go() { var children = document.body.children for(var i=0; i<children.length; i++) { alert(children[i]) } } </script> <button onclick="go()" style="width:100px">Go!</button> </body></html>firstChild 属性と lastChild 属性は、
これらは、同じ一貫性に基づいた childNodes インデックスです。
コード名
parentNode 、previousSibling および nextSibling
parentNode 属性は親ノードを参照します。 document.documentElement の親ノードは null です。
var body = document.body alert(body.firstChild === body.childNodes[0])alert(body.lastChild === body.childNodes[body.childNodes.length-1])
previousSibling と nextSibling により、左右のノードへのアクセスが許可されます。
-
例:
- コード名
次の図は (空白タグを除く) を示しています:
ブラウザは常に正しい接続関係を維持します。
<!DOCTYPE HTML><html><head> <title>My page</title></head><body> <div>The header</div> <ul><li>A list</li></ul> <div>The footer</div></body> </body></html>
概要
DOM ツリーは密接に接続されています:
親
parentNode
子
-
Children/childNodes 、 firstChild 、 lastChild
左と右の兄弟
-
previousSibling/nextSibling
要素 (子ノード、親ノード、隣接ノード) がない場合、ブラウザーはすべての接続関係が正しいことを確認します。
- プログラマーはオンラインでトレーニングを受けています
-
「フロントエンド プログラミング開発」、「バックエンド開発」、「モバイル開発」など
学習する必要がある人は、グループまたは WeChat に参加できます。メッセージを残してください。
オリジナルのコンテンツ。転載する場合は出典を示してください。
WeChat 公開アカウント: bianchengderen
QQ グループ: 186659233
どなたでも拡散、共有していただけます。
プログラマーの生活に溶け込み、彼らの思考パターンや感情を理解し、プログラミングする人々に注目してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7562
15
1384
52
84
11
28
99
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
