如何获取页面元素: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