页面可以说是一个dom树,我们通过操作dom节点来完成我们想要做的,而Dom树又是由多个节点组成,最常见的是element,我们经常通过document.getElementByXXX来获取dom节点,但是除了element还有text(文本),comment(注释),这些都是继承于node

 

Node是一个基类,DOM中的Element(元素),Text(文本)和Comment(注释)都继承于它。不仅仅有这三种还有其他的很多种node类型,常用的是这三个

所以我们平时使用的html上的元素,即Element,是类型为ELEMENT_NODE的Node。

node和 element

node和 element

当通过childNodes我们可以查看到nodelist,这里面存放着我们的元素节点和可插入文字的text节点(就是所有的节点不只是限制于element)

随便打开一个,看一下详细的内容

 

node和 element

 

 

可以看到里面有我们经常使用的节点操作,比如clientHeight,innerHTML,等等

再看看children,其中可以看到__proto__指向的是HTMLCollection,

          childNodes的__proto__指向的是NodeList,这里就可以看出这两个的不同

 

HTMLCollection 对象:

                 元素节点(element)

                 是带有方法的 HTML 元素的集合,用它可以通过元素在文档中的位置或它们的 id 属性、name 属性获取元素。

                 HTMLCollection 是一个接口,表示 HTML 元素的集合,它提供了可以遍历列表的方法和属性。就是因为这个我们才可以获取到节点进行操作

 

NodeList:

                是一个节点的集合,包括各种node,比如说text,element,comment等等(包含的多)

 

 

所以说,我们可以通过操作NodeList和HTMLCollection来对页面节点进行操作,不同的是HTMLCollection可以通过id,class等名字进行获取,或者索引,而NodeList只可以通过索引进行获取

相关文章:

  • 2022-12-23
  • 2021-11-08
  • 2022-12-23
  • 2021-09-09
  • 2021-08-02
  • 2021-06-14
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-01-03
  • 2021-11-03
  • 2022-12-23
  • 2021-12-14
  • 2021-07-27
相关资源
相似解决方案