document自带的强大的选择器querySelector/querySelectorAll

我们用原生document的时候往往使用 document.getElementById 这种依靠class ,Id ,标签名 ,来获得想找到的节点。

这在逻辑结构比较简单的时候还是不错的选择,可是当结构层级复杂事,就不是那么好用了。

这个时候 我们就可以使用 document提供的另外一个强大的方法,querySelector/querySelectorAll ,这个方法支持css的样式写法

eg:

document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];
现在应该对于 querySelector、querySelectorAll 方法中的参数已经非常明白了,是的,它接收的参数和 CSS 选择器完全一致。querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素,而querySelectorAll 可以获取多个元素。querySelector 将返回匹配到的第一个元素,如果没有匹配的元素则返回 Null。querySelectorAll 返回一个包含匹配到的元素的数组,如果没有匹配的元素则返回的数组为空。
再举个例子:我们使用 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。
var emphasisText = document.querySelectorAll(".emphasis");
forvar i = 0 , j = emphasisText.length ; i < j ; i++ ){
 emphasisText[i].style.fontWeight = "bold";
}
后附一些刚才发现的css写法

     (1)通配符:

      id属性以code开始的所有input标签  :  document.querySelectorAll("input[id^='code']");

       id属性以code结束的所有input标签 : document.querySelectorAll("input[id$='code']");

       id属性包含code的所有input标签 :document.querySelectorAll("input[id*='code']");

   (2)根据索引选择

       选择索引为偶数的所有tr标签: document.querySelectorAll("tbody tr:even");

       选择索引为奇数的所有tr标签: document.querySelectorAll("tbody tr:odd");


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值