【EASYDOMシリーズチュートリアル】のDOM要素ツリー
DOMツリー構造
次の図を覚えていますか.
上図のHTMLページのソースコードは次のとおりです.
これはサンプルページです
.
DOMがHTMLページの内容、構造、スタイルにアクセスして更新できるのは、DOMがHTMLページをツリー構造に解析するためです.
DOM要素ツリー
上記のHTMLページサンプルコードを、ノード方式でDOMノードツリー構造として解析すると、以下のようになります.
要素方式でDOM要素ツリー構造として解析すると、以下のようになります.
上図に示すように,DOM要素ツリー構造はDOMノードツリー構造と類似しており,同様に要素間に一定の関係があることが分かった.
要素間の関係
DOM要素ツリー構造では主に以下の3層関係を有する.
親と子
HTMLページの要素を親とすると、その要素に含まれる最初のレイヤのすべての要素をその要素の子と呼ぶことができます.
たとえば、次のDOM要素ツリー構造を見てみましょう.
上のDOMノードツリー構造では、
， 。
と
HTML ， （ ） 。
， DOM :
DOM ， ，</code>、<code><h2/></code> <code></code> 。</p>
<h3> </h3>
<p> 。 ， DOM :</p>
<p><span class="img-wrap"/></p>
<p> DOM ，<code><meta/></code> <code><title/></code> 。 <code/>。</p>
<h2> </h2>
<p> DOM ， 、 。</p>
<p> ， 。 ， 。</p>
<p> ， 。 ， 。</p>
<p> DOM ， 、 。 ? 。</p>
<p> ， ， 。</p>
<p> ， :</p>
<pre><code>//
var btn = document.getElementById('btn');
var attrNode = btn.getAttributeNode('class');
var attrValue = attrNode.nodeValue;
//
var btn = document.getElementById('btn');
var attrValue = btn.getAttribute('class');</code></pre>
<hr/>
<p> ， 、 ， 。 ， 。</p>
<p> - - 4.0 。</p>
<p><span class="img-wrap"/></p>
</div>
</div>
</div>