任务描述
本关任务:使用querySelectorAll()获取 html 里面所有的文本元素。
在你成功的获得元素后,我们将输出该元素,效果如图一:
图一
相关知识
querySelector()只能获得第一个符合要求的文档元素,显然,我们需要一个能获取所有符合要求的文档元素的方法,querySelectorAll()就是负责这项工作的。
querySelectorAll()的用法
如果一个选择器控制的元素有多个,而且我们需要取到这些元素,就需要用querySelectorAll()方法,该方法返回指定的选择器对应的多个元素。
比如对于下面一段 html 代码:
<p class="pClass">我是第一个元素</p>
<p class="pClass">我是第二个元素</p>
<p class="pClass">我是第三个元素</p>
我们分别调用querySelector()和querySelectorAll()方法:
var p1 = document.querySelector(".pClass");
var allP = document.querySelectorAll(".pClass");
console.log(p1);
console.log("=====我是巨大的分割线=====");
console.log(allP);
打开浏览器,摁下F12,查看效果,如图二:
图二
浏览器告诉我们:querySelectorAll()获得的是一个 NodeList (一个有顺序的节点列表),它有三个元素,所以,很显然,querySelectorAll()捕获了所有符合要求的元素。
编程要求
本关的编程任务是补全右侧代码片段中 Begin 至 End 中间的代码,具体要求如下:
获取 html 代码里面的所有的 p 元素,并赋值给变量 pElement ,要求使用querySelectorAll()方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>你需要获得的元素是我</p>
<p>包括我</p>
<p>还有我</p>
<script>
<!-- 请在此处编写代码 -->
<!---------Begin--------->
var pElement=document.querySelectorAll("p");
<!---------End--------->
console.log(pElement);
</script>
</body>
</html>