您的位置：首页 > 产品设计 > UI/UE

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

2016-07-05 10:38 501 查看
我们用原生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];

[/code]

现在应该对于
querySelector、querySelectorAll 方法中的参数已经非常明白了，是的，它接收的参数和 CSS 选择器完全一致。querySelector 和 querySelectorAll 的区别在于 querySelector 用来获取一个元素，而querySelectorAll 可以获取多个元素。querySelector 将返回匹配到的第一个元素，如果没有匹配的元素则返回 Null。querySelectorAll 返回一个包含匹配到的元素的数组，如果没有匹配的元素则返回的数组为空。


再举个例子:我们使用
querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。


var
 
emphasisText
= document.querySelectorAll(
".emphasis"
);
[/code]

for
( 
var
 
i
= 0 , j = emphasisText.length ; i < j ; i++ ){
[/code]

 
emphasisText[i].style.fontWeight
= 
"bold"
;
[/code]

}
[/code]

后附一些刚才发现的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"
);



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航