node和 element

    xiaoxiao2022-07-15  136

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

     

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

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

    当通过childNodes我们可以查看到nodelist,这里面存放着我们的元素节点和可插入文字的text节点(就是所有的节点不只是限制于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只可以通过索引进行获取

    最新回复(0)