>[info]在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。 根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点： 1. 整个文档是一个文档节点 2. 每个 HTML 元素是元素节点 3. HTML 元素内的文本是文本节点 4. 每个 HTML 属性是属性节点 5. 注释是注释节点  ## 节点的关系 >[info]父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。  ## 节点的属性 >[info]通过节点的属性，能够获取到每个节点之间的关系，并且可以通过这种关系,准确快速的获取到相应节点的对象。 <table class="dataintable"> <tbody> <tr> <th>属性 / 方法</th> <th>描述</th> </tr> <tr> <td><a>parentNode</a></td> <td>返回元素的父节点。</td> </tr> <tr> <td><a>childNodes</a></td> <td>返回元素子节点的 NodeList。</td> </tr> <tr> <td><a>firstChild</a></td> <td>返回元素的首个子节点。</td> </tr> <tr> <td><a>lastChild</a></td> <td>返回元素的最后一个子元素。</td> </tr> <tr> <td><a>nextSibling</a></td> <td>返回位于相同节点树层级的下一个节点。</td> </tr> <tr> <td><a>previousSibling</a></td> <td>返回位于相同节点树层级的前一个元素。</td> </tr> </tbody> </table> ## 节点的方法 >[info]我们之前对页面元素的操作，都是在操作现有的元素， 那么我们如何动态的创建、删除、更改、复制元素，给 元素添加属性、样式呢？就就需要用到我们节点的方法。 ### createElement() >[info]创建元素节点。 ~~~ <script type="text/javascript"> var Elemment = document.createElement("元素标签名"); </script> ~~~ ### createTextNode() >[info]创建文本节点。 ~~~ <script type="text/javascript"> var textNode = document.createTextNode("文本"); </script> ~~~ ### appendChild() >[info]把新的子节点添加到指定节点。 ~~~ <script type="text/javascript"> node.appendChild(node); </script> ~~~ ### insertBefore() >[info]方法在您指定的已有子节点之前插入新的子节点。 ~~~ <script type="text/javascript"> nnode.insertBefore(newnode,existingnode) </script> ~~~ ### removeChild() >[info]方法指定元素的某个指定的子节点。 ~~~ <script type="text/javascript"> nnode.removeChild(node) </script> ~~~ ### replaceChild() >[info]方法用新节点替换某个子节点。 ~~~ <script type="text/javascript"> nnode.replaceChild(newnode,oldnode) </script> ~~~ ### cloneNode() >[info]方法创建节点的拷贝，并返回该副本。。 ~~~ <script type="text/javascript"> node.cloneNode(deep); </script> ~~~ 该方法有一个参数（true 或 false）。如果设置为true, 所有的子节点也会克隆，否则只会克隆本节点。 >[danger]**作业：**写一个模板聊天室的页面，点击发送，把内容追加到聊天窗口，通过节点关系，把表格中的一行数据整行删除。