首先我们知道网页中的所有内容都是节点(标签、属性、文本、注释等) ，之前我们已经说过了一些元素的获取方法
比如element.getElementById()，element.querySelector()等等一些元素的获取方法 ，通过这些方法我们会发现我们在获取元素的时候特别麻烦 ，尤其在有非常多的元素需要一一获取的时候 ，我们必须先获取到父盒子再通过父盒子才能获取到子盒子 ，这时你会发现 ，用起来特别繁琐 ，而且逻辑性也不强
元素获取
那我们能不能直接通过节点层级关系来获取元素呢？答案是当然可以 ，而且通过节点获取元素 ，会更加简单方便 ，更富有逻辑性 ，但是还是要配合之前说的元素的获取方法来使用 ，首先获取到元素 ，才能获取他的子节点和父节点.
在HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素(节点)均可被修改，也可以创建或删除。
DOMshu
一般地，节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。节点的类型有 ，元素节点(HTML) ，属性节点(src属性等)和文本节点(内容 ，文字 ，空格) 三种 ，利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系 ，在DOM 中，节点使用 node 来表示。
下面我们来看看怎么通过节点来获取DOM元素
1.父级节点获取
语法 ：node.parentNode(parent父node)
2.子节点获取
语法 ：parentNode.childNodes 和 parentNode .children
区别：
parentNode.childNodes 返回的是包含指定节点的所有子节点的集合(包括元素节点和文本节点等) ，必须专门处理才能拿到想要的子节点
parentNode .children返回所有子节点，但是只返回元素节点 ，不会返回文本内容节点所以一般使用parentNode .children
一组元素看看ul的父子节点怎么获取
对比两种获取子节点方法的区别
对比区别拿到的元素节点
在开发中 ，我们拿到对应的元素节点才能对该节点去进行下一步的操作 ，所以想要改变网页 ，必须能够获取到对应节点
百度贴吧的下拉框
下面让我们通过节点操作来做一个下拉框
元素结构
节点操作
百度贴吧下拉框
3.获取兄弟节点
语法1 ：node .nextSibling(获取当前元素的下面的兄弟)和node .previousSibling这两种方法获取的都是兄弟节点的集合 ，也就是说获取的元素既包括元素节点 ，也包括文本节点 ，使用时必须特殊处理
语法2:node nextElementSibling和node previousElementSibling ，这两种方法获取到的只有对应元素兄弟元素节点 ，常用这种
对比两种方法
区别
获取节点的常用方式就是获取元素的父子兄关系的节点 ，除了节点获取外通常 ，我们也能创建和删除节点
下面让我们来看看 ，怎么来创建节点
创建和添加节点
语法1:创建节点document.createElement(指定要创建的元素)
语法2：添加节点用node 父级 child 是子级
node.appendChild(child) 后面追加元素 类似于数组中的push
node.insertBefore(child, 指定在谁前面添加元素)在前面添加元素
用法：
评论时创建和添加<li></li>
创建和添加评论
先创建元素再添加元素
我们每评论一条就会创建和添加一个li元素 ，那么怎么来删除评论呢? 下面就来看看如何删除节点
删除节点
语法：node.removeChild() 方法从 node节点中删除一个子节点，返回删除的节点。
右边可以看到创建li在增加删除li减
点击删除按钮a删除他的父节点li
复制(克隆)节点
语法:node.cloneNode();
注意:
node.cloneNode(false)括号为空或者里面是false浅拷贝 只复制标签元素不复制里面的内容
node.cloneNode(true); 括号为true深拷贝 复制标签复制里面的内容
复制元素节点并添加到页面s
克隆后添加到页面
举报/反馈
