DOM节点节点 DOM树里的每个内容都称之为节点节点类型：元素节点所有的标签：body、div html是根节点

节点

DOM树里的每个内容都称之为节点

节点类型：
- 元素节点
  - 所有的标签：body、div
  - html是根节点
- 属性节点
  - 所有的属性：href
- 文本节点
  - 所有的文本
- 其他

查找节点

节点关系：针对的找亲戚返回的都是对象

父节点
子节点
兄弟节点

父节点查找

子元素.parentNode

返回最近一级的父节点找不到返回为null

<div class="yeye">
    <div class="dad">
        <div class="baby">x</div>
    </div>
</div>

<script>
const baby = document.querySelector('.baby')
console.log(baby)  // 返回baby dom对象
console.log(baby.parentNode)  // 返回dad dom对象
console.log(baby.parentNode.parentNode)  // 返回yeye dom对象
</script>

子节点查找

childNodes
- 获得所有子节点、包括文本节点（空格、换行）、注释节点等
children 属性（重点）
- 仅获得所有元素节点
- 返回的还是一个伪数组

父元素.children

const ul = document.querySelector('ul')  // ul
console.log(ul.children)  // 得到伪数组  选择的是 亲儿子

兄弟关系查找：

下一个兄弟节点

nextElementSibling 属性

上一个兄弟节点

previousElementSibling 属性

const li2 = document.querySelector('ul li:nth-child(2)')
console.log(li2.previousElementSibling)  // 上一个兄弟
console.log(li2.nextElementSibling)  // 下一个兄弟

增加节点

很多情况下，我们需要在页面中增加元素
- 比如，点击发布按钮，可以新增一条信息
一般情况下，新增节点，按照如下操作：
- 创建一个新的节点
- 把创建的新的节点放入到指定的元素内部

创建节点

document.createElement('标签名')

创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点

追加节点

要想在界面看到，还得插入到某个父元素中

插入到父元素的最后一个子元素：父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面：父元素.insertBefore(要插入的元素, 在哪个元素前面)

举例说明：

<ul>
    <li>我是老大</li>
</ul>
<script>
const ul = document.querySelector('ul')
// 1. 创建节点
const li1 = document.createElement('li')
li1.innerHTML = '我是li1'
// 2. 追加节点  作为最后一个子元素
ul.appendChild(li1)

const li2 = document.createElement('li')
li2.innerHTML = '我是li2'
// insertBefore(插入的元素, 放到哪个元素的前面)
// 插入到li1前面
ul.insertBefore(li2, ul.children[1])
</script>

效果：

克隆节点

元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆(深克隆)
若为false，则代表克隆时不包含后代节点(浅克隆)
默认为false

删除节点

若一个节点在页面中已不需要时，可以删除它

在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

父元素.removeChild(要删除的元素)

注：

如不存在父子关系，则删除不成功删除节点和隐藏节点（display: none）有区别隐藏节点还是存在的，但删除则从html中删除节点