本文已参与「新人创作礼」活动，一起开启掘金创作之路。

DOM节点操作

节点简介

DOM节点

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

节点类型

元素节点

所有的标签比如 body、 div

html 是根节点

属性节点

所有的属性比如 href

文本节点

所有的文本

其他

节点操作

查找父节点

parentNode ：返回上一级的父节点，找不到返回null

//语法   子元素.parentNode;
<body>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>

  <script>
    const li = document.querySelector('li');
    //parentNode 查找父节点
    console.log(li);  //li
    console.log(li.parentNode);   //ul
    console.log(li.parentNode.parentNode);   //div
    console.log(li.parentNode.parentNode.parentNode);   //body
    console.log(li.parentNode.parentNode.parentNode.parentNode); //html
    console.log(li.parentNode.parentNode.parentNode.parentNode.parentNode); //document
    console.log(li.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode); //null
  </script>
</body>

查找子节点

childNodes：返回父元素下的所有节点（包括文本节点，换行，注释节点）

children：返回父元素下的所有元素节点，返回的是伪数组

<body>
  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </div>
  <script>
    //childNodes 返回父节点下所有的子节点 包括文本，注释
    //children 返回父节点下所有子节点，不包括文本，注释
    const div = document.querySelector('div');
    console.log(div.childNodes);  //[0: text 1: ul  2: text]
    console.log(div.children[0].children[0]);  //li
  </script>

查找兄弟节点

preiousElementSibling：查找元素上一个兄弟节点

nextElementSibling：查找元素下一个兄弟节点

<body>
  <div>
    <ul>
      <li>1</li>
      <li class="two">2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
  <script>
    const two = document.querySelector('.two');
    console.log(two.previousElementSibling);  //<li>1</li>
    console.log(two.nextElementSibling);   //      <li>3</li>
  </script>
</body>

删除子节点

removeChild：只能通过父元素删除亲儿子节点

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4
      <p></p>
    </li>
  </ul>
  <button>
    点击删除
  </button>
  <script>
    const ul = document.querySelector('ul');
    ul.nextElementSibling.addEventListener('click', function () {
      this.previousElementSibling.removeChild(this.previousElementSibling.children[3].children[0]);
    })
  </script>

增加节点

appendChild：在父元素尾部增加元素

insertBerfore：在指定元素前面增加元素，传入两个参数，第一个参数传入增加的元素对象，第二个传入指定元素

克隆节点

cloneNode：被克隆的节点调用，传入boolean类型的参数

传入true表示，克隆此节点以及节点以下的所有节点

传入false表示，只克隆此节点，其他都不克隆

默认参数为false

<body>
  <div>
    <p>hhh</p>
    <p>想吃肉</p>
  </div>
  <button>克隆</button>

  <script>
    const div = document.querySelector('div');
    div.nextElementSibling.addEventListener('click', function () {
      div.appendChild(div.children[0].cloneNode(true));
    })
  </script>
</body>

手机端事件（补充）

移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。

触屏事件 touch（也称触摸事件），Android 和 IOS 都有。

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

触屏touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素上移开时触发

重绘和回流

浏览器是如何进行界面渲染的 ?

解析（Parser）HTML，生成DOM树(DOM Tree)

同时解析（Parser） CSS，生成样式规则 (Style Rules)

根据DOM树和样式规则，生成渲染树(Render Tree)

进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）

进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制

Display: 展示在页面上

回流(重排)

当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。

重绘

由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。

重绘不一定引起回流，而回流一定会引起重绘。

Js-WebApo-DOM节点操作