DOM_html/css_WEB-ITnose での DOM ウォーキング-htmlチュートリアル-php.cn

DOM_html/css_WEB-ITnose での DOM ウォーキング

WBOY

リリース： 2016-06-21 08:51:39

オリジナル

1440 人が閲覧しました

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>

ログイン後にコピー

DOM の世界では、要素が見つからない場合、または要素が存在しない場合、document.body を未定義にすることもできません。

上記のルールをより直観的に説明すると、スクリプトの実行時に、参照された要素がまだブラウザーによってレンダリングされていないということになります。

子要素

要素の子要素を取得するには、いくつかの方法があります。

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>

ログイン後にコピー

場合によっては、要素ノードを参照するだけで済み、テキストノードをスキップする必要があります。このときは、children 属性を使用する必要があります。

これにはすべての要素が含まれています。統合された例を見てみましょう。ただし、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

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 の変更や要素の追加/削除が必要になる場合がありますが、手動で変更する必要はありません。これはブラウザが行います。

概要

DOM ツリーは密接に接続されています: