我想知道在JavaScript中选择元素的两种不同语法.
假设我想从当前文档中选择所有div,那么:
var divs = document.getElementsByTagName("div");
alert("There are "+divs.length+" Divs in Document !");
会工作得很好.但是还有另一种方法,比如:
var divs = document.querySelectorAll("div");
alert("There are "+divs.length+" Divs in Document !");
当它们都以相同的方式工作时.他们之间有什么区别？
提前致谢.我见过这样的问题,但他们并不满足需要.
Art*_*m G 27
大多数回答是错误的.Nicolae Olariu是唯一一位正确回答的人
哪一个更快？为什么？
不是问题.真正的问题是"它如何运作？"
主要区别在于此示例:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Yandex</title>
</head>
<body>
<a href="((http://yandex.ru))">??????</a>,
<a href="((http://yandex.com))">Yandex</a>
</body>
<script>
var elems1 = document.getElementsByTagName('a'), // return 2 lements, elems1.length = 2
elems2 = document.querySelectorAll("a"); // return 2 elements, elems2.length = 2
document.body.appendChild(document.createElement("a"));
console.log(elems1.length, elems2.length); // now elems1.length = 3!
// while elems2.length = 2
</script>
</html>
因为querySelectorAll返回一个静态(非实时)元素列表.
来自MDN:
element = document.querySelector(selectors);
返回与指定的选择器组匹配的文档中的第一个元素(使用文档节点的深度优先预先遍历遍历).
elements = element.getElementsByTagName(tagName)
返回具有给定标记名称的元素列表.搜索指定元素下面的子树,不包括元素本身.返回的列表是实时的,这意味着它会自动使用DOM树更新自己.因此,不需要使用相同的元素和参数多次调用element.getElementsByTagName.