【Web APIs】DOM节点

目录

1.节点操作

1.1DOM节点

1.2查找节点

1.2.1父节点查找

1.2.2子节点查找

1.2.3兄弟节点查找

1.3增加节点

1.4克隆节点

1.5删除节点

2.时间对象

2.1实例化

2.2时间对象方法

2.3时间戳

3.重绘和回流

---

1.节点操作

1.1DOM节点

DOM节点：DOM树中的每一个内容都称为节点

节点类型：

1️⃣元素节点：

• 所有的标签：如body，div
• html是根节点

2️⃣属性节点：

• 所有的属性，如src，href

3️⃣文本节点：

• 所有的文本

1.2查找节点

节点关系：

1. 父节点
2. 子节点
3. 兄弟节点

1.2.1父节点查找

parentNode属性

语法：子元素.parentNode

作用：返回最近一级的父节点，找不到返回null

1.2.2子节点查找

语法：父元素.children

• childNodes：获得所有子节点，包括文本节点（空格，换行），注释节点
• children：仅获得所有元素节点，返回一个伪数组

1.2.3兄弟节点查找

下一个兄弟节点：nextElementSibling属性

上一个兄弟节点：previousElementSibling属性

1.3增加节点

增加节点步骤：

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

①创建节点

• 语法：document.createElement('标签名')

②追加节点

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

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

1.4克隆节点

语法：元素.cloneNode(布尔值)

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

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

1.5删除节点

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

语法：父元素.removeChild(要删除的元素)

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/316815