How to get the page elements: id, tag name, class, designated selector querySelector, querySelectorAll, html, body
Obtaining by a first ID;
code and the comments are as follows:
<!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>
Picture explanation:
The second acquisition by the tag name;
code and comments as follows:
<!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>
Image explained:
The third class obtained by name; product
code and the comments are as follows:
<!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>
Fourth, querySelectorAll acquired by the specified selector querySelector;
code and the comments are as follows:
<!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>
Class names and pictures to explain the development of selectors:
fifth through html, body acquisition;
code and comments as follows:
<!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>
Picture explanation:
knowledge derived:
document.getElementById ( "getId");
document.getElementsByTagName ( "li");
document.getElementsByClassName ( "Box");
document.body;
document.querySelector ()
document.querySelectorAll ()
document.documentElement ;
return is an object;
console.log (GET Object);
: get the object is displayed on the console of all content, including own label
console.log (GET object.innerHTML);
: get the object is displayed in the console does not include all the contents of his own label;
it is generally get text within the label regarding the use of console.log (get object.innerHTML);
I do not know if you can add and practicing oh;
individuals also have free university graduates defense sites and total set;
and providing free software and instructional videos;
QQ + 2545062785
