3月19日 笔记

Node.hasChildNodes()

返回一个布尔值，判断当前节点是否有子节点。

Node.insertBefore()

方法用于将某个节点插入当前节点的指定位置。接收两个参数，第一个参数是所要插入的节点，第二个参数是当前节点的一个子节点。新的节点将插在这个节点的前面。该方法返回被插入的新节点。

Node.removeChild()

方法接收一个子节点作为参数，用于从当前节点移除该子节点。返回被移除的子节点。

Node.replaceChild()

方法用于将一个新的节点替换当前节点的某一个子节点。接收两个参数，第一个参数是用来替换的新节点，第二个参数是将要被替换的节点。

Element对象

1. 特征相关的属性

Element.id，Element.tagName，Element.innerHTML，Element.outerHTML（包含标签定义本身）
Element.className
Element.classList:add/remove/contains/toggle/item/toString

2.盒子模型相关属性

Element.clientHeight/clientWidth
返回元素可见部分的高度和宽度：注意包含了 padding 的值
Element.clientLeft/Top
获取元素左边框、顶部边框的宽度

3.相关节点的属性

Element.children
返回当前元素节点的所有子元素。
Element.childElementCount
返回当前元素节点所有子元素的个数。

4.查找相关属性

Element.querySelector()

该方法接收 CSS 选择器作为参数，返回父元素第一个匹配的子元素。

Element.querySelectorAll()
方法接收 CSS 选择器作为参数，返回一个 NodeList 对象，包含所有匹配的子元素。
Element.getElementsByTagName()
注意是标签的参数大小写不敏感
Element.getElementsByClassName()
方法接收类名，返回当前节点所有匹配类名的元素
Element.closest()

扫描二维码关注公众号，回复： 129177 查看本文章

方法接收 CSS 选择器作为参数，返回当前元素节点最接近的父元素（从当前节点开始向上遍历）

5.其他方法

Element.remove()

将当前节点从 DOM 树上删除。

Attribute 对象

HTML 元素中包含标签名和若干个键值对，这个键值对我们称为“属性”（Attribute）
在 DOM 中，我们很少直接对属性进行操作，一般都是元素节点对象（Element对象）来操作属性。

1.Element.attributes属性

返回一个类似数组的动态对象

2. 元素节点对象的属性

HTML元素节点的标准属性，会自动成为元素节点对象的属性。

3.属性操作的标准方法

getAttribute()
setAttribute()
上述两个方法对所有的属性都适用（包含用户自定义的方法）