>[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); // 深度克隆，子节点也被克隆 ~~~