html5中获取元素的方法
目录
方法一
任务描述
相关知识
css选择器
querySelector()的用法
编程要求
方法二
任务描述
相关知识
querySelectorAll()的用法
编程要求
方法一
任务描述
本关任务：使用querySelector()获取指定的文本元素。在你成功的获得元素后，我们将输出该元素，效果如图一：
图一
相关知识
html5中获取文档元素还有两种方法，querySelector()和querySelectorAll()。
css选择器
css 选择器是干什么用的？简单来说，选择你想要的元素的样式。
这一块的内容对于没有学习过 css 的同学来说比较难，我们分三步来理解：
第一步：先看一段html代码：
<body>
<p>
CSS选择器
</p>
</body>运行的效果如图二：
图二
第二步：我们想把字体改为红色，需要使用 css 来处理，假设我们已经有了一段 css 代码：
.css1
{
color:red;
}
#css2
{
color:blue;
}前四行是一个名字为 css1 的选择器，它是一种类选择器；后四行是一个名字为 css2 的选择器，它是一种id选择器。
第三步：有了 css ，我们还要把它和 html 关联起来，比如我们想在<p>上使用第一个选择器，反过来说：就是第一个选择器选择了<p>元素（将它的样式应用在<p>元素上）。那么给<p>元素新增一个 class 属性，它的值是 css1 ：
<body>
<p class="css1">
CSS选择器
</p>
</body>再来看一下图三：
图三
这样<p>元素就选择了名字为 css1 的样式（反过来说也行），如果<p>元素要选择名为 css2 的样式，因为 css2 是 id 选择器，需要设置 id 属性的值为 css2 ：
<body>
<p id="css2">
CSS选择器
</p>
</body>效果如图四：
图四
querySelector()的用法
querySelector()返回匹配指定 css 选择器的第一个元素。
以上面的 html 代码作为例子，比如我们想要获得class="css1"的元素：
css1 是一个类选择器，在 css 代码里面的完整表示为.css1，那么这个.css1直接作为querySelector()的参数，即可获得class="css1"的元素：
var myElement = document.querySelector(".css1");
console.log(myElement.innerText);//输出“CSS选择器”总结一下就是：用css选择器的完整名字作为querySelector的参数，就可以获取该选择器控制的所有元素。
需要注意的是，querySelector只返回一个元素，如果指定的选择器控制的元素有多个，返回第一个，下面是一个例子：
先看一段html代码：
<body>
<div class="myClass">文本1</div>
<div class="myClass">文本2</div>
<div class="myClass">文本3</div>
</body>显然，类名为 myClass 的 div 元素有3个，使用querySelector()在控制台输出类名为myClass的元素，看能输出几个：
var myClassElement = document.querySelector(".myClass");
console.log(myClassElement);F12查看一下浏览器的控制台，效果如图五：
很明显，querySelector方法只能获得第一个类名为myClass的元素。
编程要求
本关的编程任务是补全右侧代码片段中 Begin 至 End 中间的代码，具体要求如下：
获取html代码里面的第一个文本元素，并赋值给变量 pElement ，要求使用querySelector()。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p>你需要获得的元素是我</p>
<p>是楼上</p>
<p>是楼上的楼上</p>
<script>
<!-- 请在此处编写代码 -->
<!---------Begin--------->
var pElement=document.querySelector("p");
<!---------End--------->
console.log(pElement);
</script>
</body>
</html>方法二
任务描述
本关任务：使用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>