HTML DOM 节点


在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。


DOM Nodes

DOM 节点

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点

  • 每个 HTML 元素是元素节点

  • HTML 元素内的文本是文本节点

  • 每个 HTML 属性是属性节点

  • 注释是注释节点


HTML DOM 节点树

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树

HTML DOM 树实例

DOM HTML tree

pic_htmltree.gif

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

  • 在节点树中,顶端节点被称为根(root)

  • 每个节点都有父节点、除了根(它没有父节点)

  • 一个节点可拥有任意数量的子

  • 同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分,以及节点之间的关系:

7.png


请看下面的 HTML 片段:



DOM Tutorial


DOM Lesson one


Hello world!



从上面的 HTML 中:

  • 节点没有父节点;它是根节点

  • 和 的父节点是 节点

  • 文本节点 "Hello world!" 的父节点是

    节点

并且:

  • 节点拥有两个子节点: 和

  • 节点拥有一个子节点: 节点</p></li> <li><p><title> 节点也拥有一个子节点:文本节点 "DOM 教程"</p></li> <li><p><h1> 和 <p> 节点是同胞节点,同时也是 <body> 的子节点</p></li> </ul> <p>并且:</p> <ul style="list-style-type: disc;" class=" list-paddingleft-2"> <li><p><head> 元素是 <html> 元素的首个子节点</p></li> <li><p><body> 元素是 <html> 元素的最后一个子节点</p></li> <li><p><h1> 元素是 <body> 元素的首个子节点</p></li> <li><p><p> 元素是 <body> 元素的最后一个子节点</p></li> </ul> <br> <h2>警告!</h2> <p>DOM 处理中的常见错误是希望元素节点包含文本。</p> <p>在本例中:<title>DOM 教程,元素节点 ,包含值为 "DOM 教程" 的文本节点。</p> <p>可通过节点的 innerHTML 属性来访问文本节点的值。</p> <p>您将在稍后的章节中学习更多有关 innerHTML 属性的知识。</p> </div> </div> <div class="previous-next-links"> <div class="previous-design-link"> ← <a href="//m.sbmmt.com/fr/html/html-htmldom-intro.html" rel="prev">HTML DOM 简介</a> </div> <div class="next-design-link"> <a href="//m.sbmmt.com/fr/html/html-htmldom-methods.html" rel="next">HTML DOM 方法</a>→ </div> </div> </article> <div class="right-item phpcn-col-md2"> <ul> <li><h3>Navigation dans le didacticiel</h3> <dl class="navigation"> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" target="_blank" title="Gros frontal">Gros frontal</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="HTML">HTML</a> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="CSS">CSS</a> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="HTML5">HTML5</a> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="CSS3">CSS3</a> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="Javascript">Javascript</a> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="jQuery">jQuery</a> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="Voir.js">Voir.js</a> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="Réagir">Réagir</a> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="AngulaireJS">AngulaireJS</a> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="Noeud.js">Noeud.js</a> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="AJAX">AJAX</a> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="Amorcer">Amorcer</a> <a href="//m.sbmmt.com/fr/course/list/1/type/3.html" title="Fondation">Fondation</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/fr/course/list/2/type/3.html" target="_blank" title="Javascript">Javascript</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/fr/course/list/2/type/3.html" title="Graphiques élevés">Graphiques élevés</a> <a href="//m.sbmmt.com/fr/course/list/2/type/3.html" title="API Cartes">API Cartes</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" target="_blank" title="développement back-end">développement back-end</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="PHP">PHP</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="PensezPHP">PensezPHP</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="Laravel">Laravel</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="Python">Python</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="Aller">Aller</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="Java">Java</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="C">C</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="C++">C++</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="C#">C#</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="JSP">JSP</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="Django">Django</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="ASP.NET">ASP.NET</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="ASPIC">ASPIC</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="XML">XML</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="Rubis">Rubis</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="Python3">Python3</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="Perl">Perl</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="Servlet">Servlet</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="Lua">Lua</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="Échelle">Échelle</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="AppML">AppML</a> <a href="//m.sbmmt.com/fr/course/list/3/type/3.html" title="VBScript">VBScript</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/fr/course/list/4/type/3.html" target="_blank" title="base de données">base de données</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/fr/course/list/4/type/3.html" title="MySQL">MySQL</a> <a href="//m.sbmmt.com/fr/course/list/4/type/3.html" title="Rédis">Rédis</a> <a href="//m.sbmmt.com/fr/course/list/4/type/3.html" title="Oracle">Oracle</a> <a href="//m.sbmmt.com/fr/course/list/4/type/3.html" title="MongoDB">MongoDB</a> <a href="//m.sbmmt.com/fr/course/list/4/type/3.html" title="Memcaché">Memcaché</a> <a href="//m.sbmmt.com/fr/course/list/4/type/3.html" title="serveur SQL">serveur SQL</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/fr/course/list/5/type/3.html" target="_blank" title="Terminal mobile">Terminal mobile</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/fr/course/list/5/type/3.html" title="Applets">Applets</a> <a href="//m.sbmmt.com/fr/course/list/5/type/3.html" title="application uni">application uni</a> <a href="//m.sbmmt.com/fr/course/list/5/type/3.html" title="Battement">Battement</a> <a href="//m.sbmmt.com/fr/course/list/5/type/3.html" title="Android">Android</a> <a href="//m.sbmmt.com/fr/course/list/5/type/3.html" title="IOS">IOS</a> <a href="//m.sbmmt.com/fr/course/list/5/type/3.html" title="Rapide">Rapide</a> <a href="//m.sbmmt.com/fr/course/list/5/type/3.html" title="autre">autre</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/fr/course/list/9/type/3.html" target="_blank" title="Développement exploitation et maintenance">Développement exploitation et maintenance</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/fr/course/list/9/type/3.html" title="Linux">Linux</a> <a href="//m.sbmmt.com/fr/course/list/9/type/3.html" title="Docker">Docker</a> <a href="//m.sbmmt.com/fr/course/list/9/type/3.html" title="Étude Php">Étude Php</a> <a href="//m.sbmmt.com/fr/course/list/9/type/3.html" title="Git">Git</a> <a href="//m.sbmmt.com/fr/course/list/9/type/3.html" title="Autres outils">Autres outils</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/fr/course/list/7/type/3.html" target="_blank" title="Conception de l'interface utilisateur">Conception de l'interface utilisateur</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/fr/course/list/7/type/3.html" title="Ahuré">Ahuré</a> <a href="//m.sbmmt.com/fr/course/list/7/type/3.html" title="MVC">MVC</a> <a href="//m.sbmmt.com/fr/course/list/7/type/3.html" title="Formulaires Web">Formulaires Web</a> <a href="//m.sbmmt.com/fr/course/list/7/type/3.html" title="PS">PS</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/fr/course/list/10/type/3.html" target="_blank" title="Bases informatiques">Bases informatiques</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/fr/course/list/10/type/3.html" title="Modèles de conception">Modèles de conception</a> <a href="//m.sbmmt.com/fr/course/list/10/type/3.html" title="expression régulière">expression régulière</a> <a href="//m.sbmmt.com/fr/course/list/10/type/3.html" title="HTTP">HTTP</a> <a href="//m.sbmmt.com/fr/course/list/10/type/3.html" title="Guide de création de sites Web">Guide de création de sites Web</a> <a href="//m.sbmmt.com/fr/course/list/10/type/3.html" title="Informations sur le navigateur">Informations sur le navigateur</a> <a href="//m.sbmmt.com/fr/course/list/10/type/3.html" title="hébergeur de site Web">hébergeur de site Web</a> <a href="//m.sbmmt.com/fr/course/list/10/type/3.html" title="TCP/IP">TCP/IP</a> <a href="//m.sbmmt.com/fr/course/list/10/type/3.html" title="W3C">W3C</a> <a href="//m.sbmmt.com/fr/course/list/10/type/3.html" title="CodeBasique">CodeBasique</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/fr/course/list/6/type/3.html" target="_blank" title="XML">XML</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/fr/course/list/6/type/3.html" title="DTD">DTD</a> <a href="//m.sbmmt.com/fr/course/list/6/type/3.html" title="XML-DOM">XML-DOM</a> <a href="//m.sbmmt.com/fr/course/list/6/type/3.html" title="XSLT">XSLT</a> <a href="//m.sbmmt.com/fr/course/list/6/type/3.html" title="XPath">XPath</a> <a href="//m.sbmmt.com/fr/course/list/6/type/3.html" title="XQuery">XQuery</a> <a href="//m.sbmmt.com/fr/course/list/6/type/3.html" title="XLink">XLink</a> <a href="//m.sbmmt.com/fr/course/list/6/type/3.html" title="XPointeur">XPointeur</a> <a href="//m.sbmmt.com/fr/course/list/6/type/3.html" title="Schéma XML">Schéma XML</a> <a href="//m.sbmmt.com/fr/course/list/6/type/3.html" title="XSL-FO">XSL-FO</a> <a href="//m.sbmmt.com/fr/course/list/6/type/3.html" title="SVG">SVG</a> </div> </dd> <dd class="right-item-mouseover"> <a href="//m.sbmmt.com/fr/course/list/8/type/3.html" target="_blank" title="Services Web">Services Web</a> <div class="phpcn-ps-a"> <a href="//m.sbmmt.com/fr/course/list/8/type/3.html" title="Services Web">Services Web</a> <a href="//m.sbmmt.com/fr/course/list/8/type/3.html" title="WSDL">WSDL</a> <a href="//m.sbmmt.com/fr/course/list/8/type/3.html" title="SAVON">SAVON</a> <a href="//m.sbmmt.com/fr/course/list/8/type/3.html" title="RSS">RSS</a> <a href="//m.sbmmt.com/fr/course/list/8/type/3.html" title="RDF">RDF</a> </div> </dd> </dl></li> </ul> </div> </div> <div id="codeMark"></div> <div id="codeMain"> <div class="left"> <div id="codeEditor"></div> <div class="editor-btn"> <div class="editor-btn-inner"> <a href="javascript:;" class="code-btn-submit r" id="J_Commit" title="soumettre">soumettre</a> </div> </div> </div> <div class="right"> <div id="codeResult"></div> </div> <div id="close"></div> </div> </body> </html>