零、文章目录

文章地址

• 个人博客-CSDN地址：https://blog.csdn.net/liyou123456789
• 个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn

代码仓库地址

• Gitee：https://gitee.com/bluecusliyou/TechLearn
• Github：https://github.com/bluecusliyou/TechLearn

Web APIs四、DOM节点操作

1、节点操作

（1）DOM 节点

• DOM节点：DOM树里每一个内容都称之为节点
• 节点类型：
  • 元素节点：所有的标签 比如 body、 div、html 是根节点
  • 属性节点：所有的属性 比如 href
  • 文本节点：所有的文本
  • 其他

（2）查找节点

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

  • 父节点
  • 子节点
  • 兄弟节点

• 父节点查找：子元素.parentNode，返回最近一级的父节点 找不到返回为null

• 子节点查找：

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

• 兄弟关系查找：

  • 元素.nextElementSibling： 下一个兄弟节点
  • 元素.previousElementSibling：上一个兄弟节点

案例如下：

我是广告
X
我是广告
X
我是广告
X

子节点兄弟节点：

1
2
3
4
5

（3）增加节点

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

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

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

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

• 创建节点

  • 即创造出一个新的网页元素，再添加到网页
  • 创建元素节点方法：document.createElement('标签名')

• 追加节点

  • 要想在界面看到，还得插入到某个父元素中
  • 插入到父元素的最后一个子元素：父元素.appendChild(要插入的元素)
  • 插入到父元素中某个子元素的前面：父元素.insertBefore(要插入的元素，在哪个元素前面)

• 克隆节点：元素.cloneNode(布尔值)

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

增加节点：

我是老大

学成在线首页：

精品推荐
查看全部

克隆节点：

1
2
3

（4）删除节点

• 若一个节点在页面中已不需要时，可以删除它
• 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
• 语法：父元素.removeChild(要删除的元素)
• 注意：如不存在父子关系则删除不成功，删除节点和隐藏节点（display:none） 是有区别的，隐藏节点还是存在的，但是删除，则从html中删除节点

案例如下：

没用了

2、M端事件

• 移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
• touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
• 常见的触屏事件如下：

案例如下：

3、JS插件

• 插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
• 学习插件的基本过程
  • 熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/
  • 看在线演示，找到需求的demo https://www.swiper.com.cn/demo/index.html
  • 查看基本使用流程 https://www.swiper.com.cn/usage/index.html
  • 查看APi文档，去配置自己的插件 https://www.swiper.com.cn/api/index.html
  • 注意: 多个swiper同时使用的时候, 类名需要注意区分

案例如下：

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Slide 8
Slide 9

4、综合案例

（1）游乐园轮播图

乐园活动
进行中
疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
200人报名本周六开始
进行中
疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
200人报名本周六开始
进行中
疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
200人报名本周六开始
进行中
疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动
200人报名本周六开始

（2）学生信息表案例

新增学员
姓名：年龄：性别:男女薪资：就业城市：北京上海广州深圳曹县录入
就业榜
学号
姓名
年龄
性别
薪资
就业城市
操作

5、浏览器界面渲染

（1）浏览器是如何进行界面渲染的

• 解析（Parser）HTML，生成DOM树(DOM Tree)
• 同时解析（Parser） CSS，生成样式规则 (Style Rules)
• 根据DOM树和样式规则，生成渲染树(Render Tree)
• 进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小）
• 进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制
• Display: 展示在页面上

（2）重绘和回流

• 回流(重排)：当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。
• **重绘：**节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时(比如：color、background-color、outline等), 称为重绘。
• 重绘不一定引起回流，而回流一定会引起重绘。
• 会导致回流（重排）的操作：简单理解影响到布局了，就会有回流
  • 页面的首次刷新
  • 浏览器的窗口大小发生改变
  • 元素的大小或位置发生改变
  • 改变字体的大小
  • 内容的变化（如：input框的输入，图片的大小）
  • 激活css伪类 （如：:hover）
  • 脚本操作DOM（添加或者删除可见的DOM元素）