一，DOM节点

DOM节点：DOM树里面的每一个内容都叫dom节点
节点类型：
- 元素节点
  - 所有的标签，比如body，div
  - html是根节点
- 属性节点
  - 所有的属性，例如href
- 文本节点
  - 所有的文本
- 其他

二，查找节点

2.1 父节点查找

语法：
```
子元素对象.parentNode/
```
- 返回的是父元素对象，如果没有返回undefined

代码举例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div class="father">
      <div class="son"></div>
    </div>

    <script>
      const son = document.querySelector(".son");
      //获取父元素
      const father = son.parentNode;
    </script>
  </body>
</html>

2.2 子节点查找

写法 1
```
父元素对象.childNodes
```
- 获取所有子节点，包括文本节点（空格，换行）、注释节点等
写法 2
```
父元素.children
```
- 仅获得所有元素节点
- 返回的是一个伪数组
- 只返回亲儿子节点

代码举例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li>
        <p>1</p>
      </li>
      <li>2</li>
      <li>3</li>
    </ul>

    <script>
      const ul = document.querySelector("ul");
      console.log(ul.children);
    </script>
  </body>
</html>

2.3 兄弟节点查找

下一个兄弟节点

nextElementSibling属性
上一个兄弟节点

previousElementSibling属性

代码举例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li>
        <p>1</p>
      </li>
      <li>2</li>
      <li>3</li>
    </ul>

    <script>
      const li2 = document.querySelector("ul li:nth-child(2)");
      //获取下一个兄弟节点的文本内容
      console.log(li2.nextElementSibling.textContent);
      //获取上一个兄弟节点的文本内容
      console.log(li2.previousElementSibling.textContent);
    </script>
  </body>
</html>

三，增加节点

很多情况下，我们需要在页面中增加元素

比如，点击发布按钮，可以新增一条信息

一般情况下，我们新增节点，按照如下操作

创建一个新的节点
把创建的新的节点放入到指定的元素内部

创建节点
- 即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
- 创建元素节点方法:
```
document.createElement('标签名')
//举例
const div = document.createElement('div')
```
追加节点
- 要想在界面看到，还要插入到某个父元素中
- 插入到父元素的最后一个子元素
```
父元素.appendChild(要插入的元素)
```
- 插入到父元素中某个子元素的前面
```
父元素.insertBefore(要插入的元素,在哪个元素的前面)
```

代码举例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li>Item 1</li>
    </ul>

    <script>
      const ul = document.querySelector("ul");
      const li2 = document.createElement("li");
      li2.innerHTML = "Item 1的前面";
      ul.insertBefore(li2, ul.children[0]);
    </script>
  </body>
</html>

四，克隆节点

特殊情况下，我们新增节点，按照如下操作

复制一个原有的节点
把复制的节点放入到指定的元素内部

克隆节点：

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

cloneNode 会克隆出一个跟原标签一样的元素，括号内传入布尔值

若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false

代码举例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li>Item 1</li>
    </ul>

    <script>
      const ul = document.querySelector("ul");
      const li1 = ul.children[0].cloneNode(true);
      console.log(li1);
    </script>
  </body>
</html>

五，删除节点

若一个节点在页面中已不需要时，可以删除它
在 JavaScript 原生 DOM 操作中，要删除元素必须通过父元素删除

语法：

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

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

代码举例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li>Item 1</li>
    </ul>

    <script>
      const ul = document.querySelector("ul");
      ul.removeChild(ul.children[0]);
    </script>
  </body>
</html>

节点操作

一，DOM节点

二，查找节点

2.1 父节点查找

2.2 子节点查找

2.3 兄弟节点查找

三，增加节点

四，克隆节点

五，删除节点

节点操作