>[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]**作業：**寫一個模板聊天室的頁面，點擊發送，把內容追加到聊天窗口，通過節點關系，把表格中的一行數據整行刪除。