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

本文链接：https://blog.csdn.net/LuShanGuoQiLin/article/details/126448492

(day03)一、节点操作

1.1 DOM节点

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

DOM节点

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

节点类型

元素节点

• 所有的标签比如 body、 div

• html 是根节点

属性节点

• 所有的属性比如 href

文本节点

• 所有的文本

其他

1.2 查找节点

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

关闭二维码案例：

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

思考：

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

父子关系

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

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

父节点

子节点

兄弟节点
父节点查找：

parentNode 属性

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

子元素.parentNode

子节点查找：

childNodes

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

children （重点）

仅获得所有元素节点

返回的还是一个伪数组

父元素.children

兄弟关系查找：

下一个兄弟节点

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元素)

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