>[info]在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1. 整个文档是一个文档节点 2. 每个 HTML 元素是元素节点 3. HTML 元素内的文本是文本节点 4. 每个 HTML 属性是属性节点 5. 注释是注释节点 ![](https://box.kancloud.cn/2015-12-13_566d156ac641e.gif) ## 节点的关系 >[info]父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。 ![](https://box.kancloud.cn/2015-12-13_566d156ad28e5.gif) ## 节点的属性 >[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]**作业:**写一个模板聊天室的页面,点击发送,把内容追加到聊天窗口,通过节点关系,把表格中的一行数据整行删除。