`querySelectorAll()`和`getElementsByTagName()`的区别

querySelectorAll()方法获取到NodeList对象，是静态的集合，getElementsByTagName()方法获取到HTMLCollection对象，是动态的集合。

	querySelectorAll()	getElementsByTagName()
返回值类型	NodeList集合	HTMLCollection集合
返回值状态	静态	动态

querySelectorAll()查询的是执行时的DOM结构。如果后续DOM结构后续的结构发生改变，他所查询的结构仍然不会变。

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>var myul = document.querySelector("ul");var myli = document.querySelectorAll("li");console.log(myli.length); //5var newli = document.createElement("li");myul.appendChild(newli);console.log(myli.length); //5，页面DOM结构虽然发生了改变，但是长度并没有发生改变，是静态的</script>
</body>

getElementsByTagName()获取页面的DOM结构，如果后续DOM结构后续的结构发生改变，他获取的结构也随之改变。

<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul><script>var myul = document.querySelector("ul");var myli = document.getElementsByTagName("li");console.log(myli.length); //5var newli = document.createElement("li");myul.appendChild(newli);console.log(myli.length); //6，页面DOM结构然发生了改变,长度也随之变化</script>
</body>

querySelectorAll()和getElementsByTagName()的区别相关推荐

JavaScript querySelectorAll()和getElementsByTagName的区别
querySelectorAll()和getElementsByTagName()两者的主要区别就是返回值.前者返回的是NodeList集合,后者返回的是HTMLCollection集合.. Node ...
querySelectorAll 和 getElementsByTagName区别
在<DOM的操作>一节中知道querySelectorAll()和getElementsByTagName()两个方法都是用来查找DOM元素的.通过上一节的学习,知道querySelect ...
querySelectorAll( )和getElementsByTagName( )
一. 区别 querySelectorAll()和getElementsByTagName()两者的主要区别就是返回值. 前者返回的是NodeList集合,是一个静态集合后者返回的是HTMLColl ...
getElementByID() getElementsByName() getElementsByTagName()的区别 .
getElementByID() getElementsByName() getElementsByTagName()的区别 Web标准下可以通过getElementById(), getElemen ...
javascript getElementByID,getElementsByName,getElementsByTagName的区别
getElementByID,getElementsByName,getElementsByTagName区别注意:方法区分大小写! 以人来举例说明,人有能标识身份的身份证,有姓名,有类别(大人.小 ...
HTMLCollection 和 NodeList 的区别
HTMLCollection HTMLCollection 表示一个包含了元素(元素顺序为文档流中的接口)的集合(通用集合),还提供了从该集合中选择元素的属性和方法. 例如使用 getElements ...
querySelector querySelectorAll
querySelector & querySelectorAll --->像CSS一样选择DOM 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问 ...
原生的强大DOM选择器querySelector - querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
DOM系列：DOM树和遍历DOM
上一节,咱们整理了DOM系列中的第一篇,主要介绍浏览器与DOM相关的知识.从标题中我们可以看出来,今天所要学的东西包含两个部分,第一部分是DOM树,第二部分是遍历DOM.如果你和我一样对于DOM树和遍 ...

querySelectorAll()和getElementsByTagName()的区别

`querySelectorAll()`和`getElementsByTagName()`的区别

querySelectorAll()和getElementsByTagName()的区别相关推荐

最新文章

热门文章