选择器语法: getElementById:此方法仅通过元素的id属性来选择元素。它不接受任何CSS选择器语法,而是直接使用元素的id值(作为字符串)作为参数。 querySelector:此方法使用CSS选择器语法来选择元素。它允许使用更灵活的选择器,如类名(.class)、标签名(tag)、属性选择器([attr=value])等,以及复合选择器。 返回值: ...
1. 选择方式: getElementById: 通过元素的ID来选择元素。 HTML 中的 ID 必须是唯一的,因此getElementById总是返回单个元素(或者null,如果找不到该 ID)。 这是获取特定元素最快捷的方法。 querySelector: 通过CSS 选择器来选择元素。 这意味着你可以使用各种 CSS 选择器,例如标签名、类名、属性等等,来选择元素。
以上代码中,querySelector 选择的 li 元素不会随着文档的操作而从3变为6; 在性能上,Chrome 浏览器下 getElementBy 方法的执行速度基本都高于 querySelector。
1.2 getElement(s)Byxxxx 的用法 getElementById() 方法 定义: getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。 如果没有指定 ID 的元素返回 null; 如果存在多个指定 ID 的元素则返回第一个; 如果需要查找到那些没有 ID 的元素,你可以考虑通过CSS选择器使用 querySelector(); 语法: docum...
语法: elementList=document.querySelectorAll(selectors);elementList 是一个静态的 NodeList 类型的对象; selectors 是一个由逗号连接的包含一个或多个CSS选择器的字符串; 参数值: String 必须。指定一个或多个匹配CSS选择器的元素。可以通过 id,class,类型,属性,属性值等作为选择器来获取元素。多个选择器使用逗号...
这就是JavaScript中querySelector()和getElementById()(getXXXByXX)的区别,虽然大部分时间两者可以互换,但是最好在使用的过程中先斟酌一下是否可以使用其中的某一个,避免出现死循环导致程序都关不了。
1.2 getElement(s)Byxxxx 的⽤法 getElementById() ⽅法 定义：getElementById() ⽅法可返回对拥有指定 ID 的第⼀个对象的引⽤。如果没有指定 ID 的元素返回null;如果存在多个指定 ID 的元素则返回第⼀个;如果需要查找到那些没有 ID 的元素，你可以考虑通过CSS选择器使⽤ querySelector();语法...
语法: elementList = document.querySelectorAll(selectors); elementList 是一个静态的 NodeList 类型的对象; selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串; 参数值: String 必须。指定一个或多个匹配 CSS 选择器的元素。可以通过 id, class, 类型, 属性, 属性值等作为选择器来获取元素。
所以querySelectorAll会降低性能。 在使用的时候getElement这种方法性能比较好,query选择符则比较方便. 得到的元素不是需要很麻烦的多次getElementBy..的话,尽量使用getElementBy..,因为他快些。 得到的元素需要很麻烦的多次getElementBy..组合才能得到的话使用querySelector,方便。
然后我就去查文档,发现querySelector()是用于接收一个CSS选择符,返回与该模式匹配的第一个元素;querySelectorAll()用于选择匹配到的所有元素。 完了看到这我就有点懵,所以这俩有什么用呢?不是已经有了getElementById()和getElementsByTagName()了吗,这两个新添加的选择符API意义何在?