（黑马程序员）JavaScript DOM和BOM第三天学习笔记之节点操作

(day03)一、节点操作

1.1 DOM节点

目标：能说出DOM节点的类型

• DOM节点

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

•  节点类型

  元素节点

• 所有的标签 比如 body、 div

• html 是根节点

属性节点

• 所有的属性 比如 href

文本节点

• 所有的文本

其他

1.2 查找节点

目标：能够具备根据节点关系查找目标节点的能力

• 关闭二维码案例：

点击关闭按钮， 关闭的是二维码的盒子， 还要获取erweima盒子

• 思考：

  关闭按钮 和 erweima 是什么关系呢？

  父子关系

  所以，我们完全可以这样做：

  点击关闭按钮， 直接关闭它的爸爸，就无需获取erweima元素了

• 节点关系：

  父节点

  子节点

  兄弟节点

• 父节点查找：

  parentNode 属性

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

子元素.parentNode

• 子节点查找：

  childNodes

  获得所有子节点、包括文本节点（空格、换行）、注释节点等

children （重点）

仅获得所有元素节点

返回的还是一个伪数组

父元素.children

• 兄弟关系查找：

1. 下一个兄弟节点

          nextElementSibling 属性

     2.上一个兄弟节点

          previousElementSibling 属性

1.3追加节点

目标：能够具备根据需求新增节点的能力

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

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

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

  创建一个新的节点

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

• 学习路线：

  • 创建节点

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

    创建节点方法：

    //创造一个新的元素节点
    ​
    document.createElement('标签名');

  • 追加节点

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

    插入到元素的最后一个子元素：

    // 插入到这个父元素的最后
    父元素.appendChild(要插入的元素)

    插入到父元素中某个子元素的前面

    // 插入到某个子元素的前面
    父元素.insertBefore(要插入的元素，在那个元素前面);

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

    复制一个原有的节点

    把复制的节点返给到指定的元素内部

    • 克隆节点

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

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

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

      若为false，则代表克隆时不包含后代节点

      默认为false

1.3删除节点

目标：能够具备根据需求删除节点的能力

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

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

• 语法

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

注：

如不存在父子关系则删除不成功

删除节点和隐藏节点(display:none)有区别的：隐藏节点还是存在的，但是删除，则从HTML中删除节点

二、事件对象

目标：掌握事件对象，可以让网页显示时间

• 事件对象：用来表示时间的对象

• 作用：可以得到当前系统时间

学习路径：

1.实例化

目标：能够实例化对象

• 在代码中发现了new关键字，一般将这个操作称为实例化

• 创建一个事件对象并获取时间

  获得当前时间

  let date = new Date();

  获得指定时间

  let date = new Date(‘1949-10-01’);

2.事件对象方法

• 因为事件对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

3.时间戳

• 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

• 三种方式获取时间戳

  1.使用getTime()方法
  
  //1.实例化
  let date = new Date();
  //2.获取时间戳
  console.log(date.getTime());
  2.简写+new Date()
  
  console.log(+new Date());
  3.使用Date.now()
  
  console.log(Date.now());

  无需实例化

  但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳

4.重绘和回流

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

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

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

• 会导致回流（重排）的操作: 页面的首次刷新

  浏览器的窗口大小发生改变

  元素的大小或位置发生改变

  改变字体的大小 内容的变化(如: input框的输入，图片的大小)

  激活css伪类（如: :hover) 脚本操作DOM（添加或者删除可见的DOM元素)

  简单理解影响到布局了，就会有回流