如何获取页面元素：id，标签名，class，指定选择器querySelector，querySelectorAll，html，body
第一种通过ID获取；
代码和注释如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id获取页面元素</title>
</head>
<body>
<div id = "getid" align="center";>用id来获取页面元素</div>
<!--1 因为我们文档页面时从上往下加载，所以先得有标签 所以我先写div再写script；
2 get获得element元素by通过 （驼峰命名法：从第二个单词首字母大写）
3 参数id是大小写敏感的字符串；
4 返回的是一个元素对象；-->
<script>
var value = document.getElementById("getid");
console.log(value);
console.log(value.innerHTML);
console.log(typeof value);
// 5 console.log()可以取代alert()或document.write()，在网页脚本中使用console.log()时，会在浏览器控制台打印出信息。
// console.dir()可以显示一个对象所有的属性和方法。
console.dir(value);
// 6 document.getElementById("getid");语法：里面必须是一个字符串
alert(typeof value);
</script>
</body>
</html>
图片解释：
第二种通过标签名获取；
代码和注释如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签名获取页面元素</title>
</head>
<body>
<ul>
<li>li_01</li>
<li>li_02</li>
<li>li_03</li>
<li>li_04</li>
</ul>
<ul id = "nav">
<li>li_011</li>
<li>li_022</li>
<li>li_033</li>
<li>li_044</li>
</ul>
<script type="text/javascript">
//1 返回的是 元素对象的集合,以伪数组的形式存储;
//2 get 获得 elements 一个或多个元素 by 通过 TagName 标签名 （驼峰命名法：从第二个单词首字母大写）
var lis = document.getElementsByTagName("li");
console.log(lis);
console.log(lis[0]);
console.log(lis.innerHTML);
console.log(lis[0].innerHTML);
//3 我们想要依次打印里面的元素对象,可以采取遍历的方式;
for(var i = 0; i < lis.length; i++) {
console.log(lis[i]);
console.log(lis[i].innerHTML);
}
// 4 扩展:需要获得ul中id为nav的li;
var nav = document.getElementById("nav");
var navLis = nav.getElementsByTagName("li");
console.log(navLis);
console.log(navLis[0]);
console.log(navLis.innerHTML);
console.log(navLis[0].innerHTML);
alert(typeof lis);
</script>
</body>
</html>
图片解释：
第三种通过类名获取；
代码和注释如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul class = "box">
<li>li_01</li>
<li>li_02</li>
<li>li_03</li>
<li>li_04</li>
</ul>
<script type="text/javascript">
//1 docuemnt.getElementsByClassName("String");根据类名获得元素集合;
var boxs = document.getElementsByClassName("box");
console.log(boxs);
console.log(boxs[0]);
console.log(boxs.innerHTML);
console.log(boxs[0].innerHTML);
alert(typeof boxs);
</script>
</body>
</html>
第四种通过指定选择器querySelector，querySelectorAll获取；
代码和注释如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul class="box">
<li>li_01</li>
<li>li_02</li>
<li>li_03</li>
<li>li_04</li>
</ul>
<ul id="nav">
<li>li_011</li>
<li>li_022</li>
<li>li_033</li>
<li>li_044</li>
</ul>
<script type="text/javascript">
//1 document.querySelector(". #String")返回指定选择器的第一个元素对象
//切记 里面的选择器需要添加符号 . #;
var firstBox = document.querySelector(".box");
console.log(firstBox);
console.log(firstBox[0]);
console.log(firstBox.innerHTML);
var nav = document.querySelector("#nav");
console.log(nav);
console.log(nav[0]);
console.log(nav.innerHTML);
var li = document.querySelector("li");
console.log(li);
console.log(li[0]);
console.log(li.innerHTML);
//2document.querySelectorAll()返回指定选择器的所有元素对象集合
var lis = document.querySelectorAll("li");
console.log(lis);
console.log(lis[0]);
console.log(lis.innerHTML);
console.log(lis[0].innerHTML);
for(var i = 0; i < lis.length; i++) {
console.log(lis);
console.log(lis[i]);
console.log(lis.innerHTML);
console.log(lis[i].innerHTML);
//alert.log(lis[i].innerHTML);
}
alert(typeof firstBox);
alert(typeof nav);
alert(typeof li);
alert(typeof lis);
</script>
</body>
</html>
类名和制定选择器图片解释：
第五种通过html，body获取；
代码和注释如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 1 获取body元素
var bodyEle = document.body;
console.log(bodyEle);
console.log(bodyEle.innerHTML);
console.log(typeof bodyEle);
console.dir(bodyEle);
// 2 获取html元素
var htmlEle = document.documentElement;
console.log(htmlEle);
console.log(htmlEle.innerHTML);
console.log(typeof htmlEle);
console.dir(htmlEle);
alert(typeof bodyEle);
alert(typeof htmlEle);
</script>
</body>
</html>
图片解释：
知识衍生：
document.getElementById(“getid”);
document.getElementsByTagName(“li”);
document.getElementsByClassName(“box”);
document.body;
document.querySelector()
document.querySelectorAll()
document.documentElement;
返回的都是一个对象；
console.log(get object);
：是在控制台显示获取对象的所有内容包括自己标签
console.log(get object.innerHTML);
：是在控制台显示获取对象的所有内容不包括自己标签；
所以一般获取标签内的文本就运用console.log(get object.innerHTML);
如有不懂可以加我并练习哦；
个人也有免费大学生毕业网站和答辩项目总集；
并提供免费软件和教学视频；
QQ+2545062785
