由:checkbox选择器展开的事情

最新推荐文章于 2025-08-08 11:18:20 发布

转载最新推荐文章于 2025-08-08 11:18:20 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuhaiqing/archive/2012/12/12/2814764.html

文章标签：

#javascript #ViewUI

本文详细解析了querySelector和querySelectorAll在JavaScript DOM操作中的使用方法及性能对比，帮助开发者掌握这两种方法在查找和选择文档中元素时的优缺点，提升网页开发效率。

 :checkbox的迷惑

        1 之前选择checkbox喜欢使用jQuery(':checkbox')，为啥就是因为写起来方便。伪类选择器。
    
2 一直很想知道与jQuery('input[type="checkbox"]')的区别。觉得前者方便许多。于是到官网上查看

1 由上面截图看到，第一官方是推荐$('input:chebox')这种写法的。这样更好一些，因为如果不这么写的话
2 
3 其实$(':checkbox') 就是 $('*:checkbox')。
4 
5 另外最重要的下面的说明:checkbox是jQuery的扩展并且不是css的规范，所以:checkbox不能
6 

        7 使用DOM原生的方法querySelectorAll()。所以为了更好的性能，官方推荐使用[type="checkbox"]
    
          这里的话大概能明白之前的疑惑了。但是又突然冒出querySelectorAll。
    
        querySelector 和 querySelectorAll

1 querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS
2 选择器规范，便捷定位文档中指定元素。
3
4 目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。

6 querySelector 和 querySelectorAll 在规范中定义了如下接口：
7 从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。
8 querySelector和querySelectorAll的参数须是符合 css selector 的字符串。

9 不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。

使用的方法

document.querySelector("body");//放回body节点
document.querySelector("#k");//返回id为k的节点
document.querySelector("#k span");//返回id为k的节点下的第一个span节点
document.querySelector("#k").querySelector("span");//返回id为k的节点下的第一个span节点
                                                
document.querySelectorAll("li");//返回所用tagName为li的节点集合（NodeList）
document.querySelectorAll("div .li");//返回class为li的div

必须注意的是querySelector按css规范实现，即css标识符也不能以数字开头。不能出现document.querySelector("#123");

querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身
jQuery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括Element本身

querySelector和getElementById性能分析

我这边测试看来是getElementById的性能更好。

javascript DOM获取元素的方法

javascript DOM 中有3种获取元素的方法：getElementById,getElementsByName,getElementsByTagName。
为什么没有根据样式类名(getElementsByClassName)取元素的方法? DOM1/2 没有提供该的方法，
不过在DOM3中提供了getElementsByClassName的支持。
在firefox、opera、chrome等现代浏览器都已经支持该方法，但是IE还是不支持。

转载于:https://www.cnblogs.com/xuhaiqing/archive/2012/12/12/2814764.html