html5中获取元素的方法-方法二

任务描述


本关任务:使用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>

上一篇:Cursor: 融合VSCode与AI的新一代Java开发工具


下一篇:【Ambari编译报错】phantomjs从github上下载失败导致无法编译的问题