ノードとノードツリー

ノードとノードツリーの概念

HTML タグ、タグ属性、テキストコンテンツ、コメント、スペース、タブなどを含む、HTML ドキュメント内のすべてのコンテンツはノードです。

HTML ドキュメント内のすべてのノードは、ノードツリー (またはドキュメントツリー) を形成します。 HTML ドキュメント内の各要素、属性、テキストなどは、ツリー内のノードを表します。ツリーはドキュメントノードから始まり、そこからツリーの最下位レベルにあるすべてのテキストノードに分岐し続けます。

ノード間の関係

DOM ノード間には、親ノード、子ノード、兄弟ノード (ピアノード)、子孫、親などを含む階層関係があります。

DOM节点之间的关系

这是标题

这是内容

上記のコードからわかるように:

ドキュメントノード (ルートノード) を除くすべてのノードには親ノードがあります。
たとえば、との親ノードはノード、「This is content」の親ノードは

ノードです。

ほとんどの要素ノードには子ノードがあります。
たとえば、ノードには、ノードがあり、<title> ノードには、「This is the title」という子ノードもあります。<br></p> <p><strong>ノードが共通の親ノードを持つ場合、それらは兄弟 (兄弟ノード) になります。</strong><br>たとえば、<h1> と <p> は兄弟ノードであり、その親ノードは両方とも <body> です。<br></p> <p><strong>ノードには、ノードのすべての子ノード、またはこれらの子ノードの子ノードなどを参照する子孫を持つこともできます。</strong><br>たとえば、すべてのテキストノードは <html> ノードの子孫であり、最初のテキストノードは <head> ノードの子孫です。<br></p> <p><strong>ノードには先祖を持つこともできます。祖先は、ノードの親ノード、または親ノードの親ノードなどです。</strong><br>たとえば、すべてのテキストノードは、<html> ノードを祖先ノードとして使用できます。</p> <p><br></p> </div> </div> <a class="course-btn course_code_header_next" href="//m.sbmmt.com/ja">学び続ける</a> </div> <div class="layui-col-md6 editor-box"> <div id="code_spread_shrink"> <div id="code_spread_shrink_show" unselectable="on"> <span>||</span> </div> </div> <div class="editor-tab js-editor-tab"> <div class="editor-left icon-left editor-op"></div> <div class="editor-view"> <ul class="clearfix" id="J_TabType" style="width: 120px; margin-left: 0px;"> <li class="ui-tabs-active"><a href="javascript:;">新しいファイル</a></li> </ul> </div> <div class="editor-right icon-right editor-op"></div> </div> <div id="editor-tabs-html" data-filename="index.html" data-lang="php" style="font-size: 16px;height:600px"> <html> <head> <title>DOM节点之间的关系