>[danger]**1. 節點的捕獲** 推薦方法： ~~~ document.getElementById(#id選擇器); document.getElementsByTagName(html標簽); ~~~ H5新增方法： ~~~ document.querySelector(CSS選擇器); //捕獲一個DOM節點對象 document.querySelectorAll(CSS選擇器); //捕獲相同CSS選擇器的所有節點對象，為一個對象數組 ~~~ 其他（不推薦）： ~~~ document.getElementsByClassName(class選擇器); documen.getElementsByName(form表單的name); ~~~ >[danger]**2. 節點關系捕獲** | 節點函數 | 說明 | | ------------ | ------------ | | `firstNode `| 第一個子節點 | | `lastNode`| 最后一個子節點 | | `childNodes` | 子節點 | | `parentNode` | 父節點 | | `nextSibling`| 下一個兄弟節點 | | `previousSibling` | 上一個兄弟節點 | >[danger]**3. 創建/添加節點** *①父節點.appendChild(子節點);* ~~~ var li = document.createElement('li'); //創建 li標簽節點 var text = document.createElement('Jack'); //創建文件節點，內容為 Jack li.appendChild(text); //將文本節點添加到li標簽節點里面 var ul = document.querySelector('ul'); //捕獲父節點 ul.appendChild(li); //將li節點加入父節點ul中 ~~~ *②父節點.insertbefore(新節點，參照節點)* ~~~ var li = document.createElement('li'); //創建 li標簽節點 var text = document.createElement('Jack'); //創建文件節點，內容為 Jack li.appendChild(text); //將文本節點添加到li標簽節點里面 var ul = document.querySelector('ul'); //捕獲父節點 var li3 = document.getElementsByTagName('li')[2]; //捕獲下標為2的第3個li標簽節點 ul.insertbefore(li,li3); //將li節點加入父節點ul中第3個li標簽節點之前 ~~~ >[danger]**4. 刪除節點** ~~~ var ul = document.querySelector('ul'); //捕獲父節點 var li = document.getElementsByTagName('li')[2]; //捕獲下標為2的第3個li標簽節點 ul.removeChild(li); //將ul節點下的li節點刪除 ~~~ >[danger]**5. 克隆節點** ~~~ 節點對象.cloneNode(); // 只克隆當前節點 ~~~ ~~~ 節點對象.cloneNode(true); // 深度克隆，子節點也被克隆 ~~~