页面可以说是一个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只可以通过索引进行获取
