DOM API常用属性和方法对比整理,以防混淆

  • 内容
  • 评论
  • 相关

过多的概念不做多解释,以下属性和方法需要对比着来看才能记得牢固,我写的用法也是对比着来写的,之前总是混淆或者记不住的同学可以参考下。

属性
nextSibling:属性返回紧跟在当前节点后面的第一个同级节点。如果当前节点后面有空格,该属性会返回一个文本节点,内容为空格。注意处理兼容性。

previousSibling:属性返回当前节点前面的、距离最近的一个同级节点。

parentNode:属性返回当前节点的父节点。对于一个节点来说,它的父节点只可能是三种类型:element节点、document节点和documentfragment节点。

parentElement:属性返回当前节点的父Element节点。parentElement获取的是parentNode的其中一种类型节点,即element节点。

childNodes:属性返回一个当前节点的所有子节点集合。

children:属性返回一个当前节点的所有Element子节点集合。

firstChild:属性返回当前节点的第一个子节点。

firstElementChild:属性返回当前节点的第一个Element子节点。

lastChild:属性返回当前节点的最后一个子节点。

lastElementChild:属性返回当前节点的最后一个Element子节点。

childElementCount:属性返回当前节点的所有Element子节点的数目。

offsetHeight:属性返回元素的高度包括边框和填充,但不是边距。

offsetWidth:属性返回元素的宽度,包括边框和填充,但不是边距。

offsetLeft:属性返回当前元素的相对水平偏移位置的偏移容器。

offsetTop:属性返回当前元素的相对垂直偏移位置的偏移容器。

scrollHeight:属性返回整个元素的高度(包括带滚动条的隐蔽的地方)。

scrollWidth:属性返回元素的整个宽度(包括带滚动条的隐蔽的地方)。

scrollLeft:属性返回当前视图中的实际元素的左边缘和左边缘之间的距离。

scrollTop:属性返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离。

方法
document.createElement():创建节点。

insertAdjacentHTML(position, html):方法在指定的地方插入html内容。它接受两个参数,第一个参数是要插入的位置,包含四个参数(beforeBegin、beforeEnd、afterBegin、afterEnd),参数请按字面意思理解,这儿不过多解释,第二个参数是要插入的html内容。

insertAdjacentText(position, text):方法在指定的地方插入text内容。它接受两个参数,第一个参数是要插入的位置,包含四个参数(beforeBegin、beforeEnd、afterBegin、afterEnd),参数请按字面意思理解,这儿不过多解释,第二个参数是要插入的text内容。

以上两个方法比innerHTML()和innerText()方法性能要更好些。

appendChild():方法接受一个节点对象作为参数,将其作为最后一个子节点,插入当前节点。

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

before():方法用于在当前节点的前面,插入一个同级节点。如果参数是节点对象,插入DOM的就是该节点对象;如果参数是文本,插入DOM的就是参数对应的文本节点。

after():方法用于在当前节点的后面,插入一个同级节点。如果参数是节点对象,插入DOM的就是该节点对象;如果参数是文本,插入DOM的就是参数对应的文本节点。

removeChild():方法接受一个子节点作为参数,用于从当前节点移除该子节点。它返回被移除的子节点。

remove():方法用于移除当前节点。

replaceChild():方法用于将一个新的节点,替换当前节点的某一个子节点。它接受两个参数,第一个参数是用来替换的新节点,第二个参数将要被替换走的子节点。它返回被替换走的那个节点。

setAttribute():方法添加指定的属性,并为其赋指定的值。

getAttribute():方法通过名称获取属性的值。

removeAttribute():方法删除指定的属性。

hasChildNodes():方法返回一个布尔值,表示当前节点是否有子节点。

cloneNode():方法用于克隆一个节点。它接受一个布尔值作为参数,表示是否同时克隆子节点,默认是false,即不克隆子节点。

contains():方法接受一个节点作为参数,返回一个布尔值,表示参数节点是否为当前节点的后代节点。

isEqualNode():方法返回一个布尔值,用于检查两个节点是否相等。所谓相等的节点,指的是两个节点的类型相同、属性相同、子节点相同。

normalize():方法用于清理当前节点内部的所有Text节点。它会去除空的文本节点,并且将毗邻的文本节点合并成一个。

replaceWith():方法使用参数指定的节点,替换当前节点。如果参数是节点对象,替换当前节点的就是该节点对象;如果参数是文本,替换当前节点的就是参数对应的文本节点。

dom.js库:https://github.com/dkraczkowski/dom.js

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注