在开发以及平时练习中有时我们也会遇到需要知道选择器的返回内容,那下面我就将选择器的返回内容做一下总结。
①getElementById
当ID存在时,返回值为[object HTMLElement]或者[object HTML+[元素:比如Paragrap]+Element]。
不存在时,返回为null。
②getElementsByClassName
当class存在时,返回值为[object HTMLCollection]或者【object HTMLElement]或者[object HTML+[元素:
比如Paragrap]+Element]。
不存在时,返回值为undefined。
③getElmentsByTagName
当Tag存在时,,返回值为[object HTMLCollection]或者【object HTMLElement]或者[object HTML+[元素:
比如Paragrap]+Element]。
不存在时,返回值为undefined。
④querySelector
当ID或者class或者Tag存在时,返回值为[object HTMLElement]或者[object HTML+[元素:比如Paragrap]+Element]。
不存在时,返回值为undefined。
⑤querySelectorAll
当ID或者class或者Tag存在时,返回值为[object NodeList]或者[object HTML+[元素:Paragrap]+Element]
不存在时,返回值为undefined
说明一下Boolean(undefined) == false; Boolean(null) == false; Boolean(任何对象) == true
NodeList与HTMLCollection的区别
相同点:都是有生命的集合,DOM中NodeList和HTMLCollection是一种有生命的类数组集合,因此 DOM 结构的变化能够自动反映在 NodeList 对象中类数组对象。用于保存一组有序的节点,可以通过位置来访问这些节点。
不同点:历史上的DOM集合接口。主要不同在于HTMLCollection是元素集合而NodeList是节点集合(即可以包含元素,也可以包含文本节点)。所以node.childNodes 返回NodeList,而node.children 和node.getElementsByXXX 返回HTMLCollection 。唯一要注意的是querySelectorll 返回的虽然是NodeList,但是实际上是元素集合,并且是静态的(其他接口返回的HTMLCollection和NodeList都是ive的) 。事上,将来浏览器将增加queryAll 接口取代现在的querySelectorAll,返回Elements 是Array 的子类(因而可以使用Array上的forEach、map等方法)。
睡了睡了 ,转载请注明出处~
大家晚安~