JavaScript,DOM之 querySelect() 和 querySelectAll()

Posted 还能做好什么

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript,DOM之 querySelect() 和 querySelectAll()相关的知识,希望对你有一定的参考价值。

querySelect() 

这个比较简单和直接,给几个例子即可了解

获取文档中 class="example" 的第一个元素:

document.querySelector(".example");
获取文档中第一个 <p> 元素:

document.querySelector("p");
假定你选择了两个选择器: <h2><h3> 元素。

以下代码将为文档的第一个 <h2> 元素添加背景颜色,因为我们只能从上到下筛选出第一个 存在于筛选器中的标签:

<h2>A h2 element</h2>
<h3>A h3 element</h3>

document.querySelector("h2, h3").style.backgroundColor = "red";
获取文档中 class="example" 的第一个 <p> 元素:

document.querySelector("p.example");

querySelectAll() 

这个顾名思义,是筛选出所有符合条件的标签。生成一个    NodeList (节点列表) , 我们可以懒惰的通过下标进行访问。

 

// 获取文档中所有的 <p> 元素
var x = document.querySelectorAll("p"); 
 
// 设置第一个 <p> 元素的背景颜色
x[0].style.backgroundColor = "red";
// 获取文档中所有 class="example" 的 <p> 元素
var x = document.querySelectorAll("p.example"); 
 
// 设置 class="example" 的第一个 <p> 元素的背景颜色
x[0].style.backgroundColor = "red";
获取文档中有 "target" 属性的第一个 <a> 元素:

document.querySelector("a[target]");
计算文档中 class="example" 的 <p> 元素的数量(使用 NodeList 对象的 length 属性):

var len = document.querySelectorAll(".example").length;
var x = document.querySelectorAll(".example");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}

  经过了上面的阅读,我们发现,实际上 selector  最重要的就是括号内那部分,即 我们怎样编写选择器决定了我们筛选出来的内容是什么。

所以这里有一个   CSS选择器网站,可供参考


以上是关于JavaScript,DOM之 querySelect() 和 querySelectAll()的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript之DOM对象的获取

第十五篇:JavaScript 之 Dom操作

javaScript之DOM,BOM

前端之JavaScript:JS之DOM对象一

JavaScript之DOM-1 DHTML概述 DOM概述

JavaScript之DOM(上)