Comment obtenir les éléments de la page: id, nom de la balise, la classe, le sélecteur désigné querySelector, querySelectorAll, html, body
L' obtention d'un premier ID,
le code et les commentaires sont les suivants:
<!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>
explication Photo:
La deuxième acquisition par le nom de l' étiquette,
le code et les commentaires comme suit:
<!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 expliqué:
La troisième classe obtenue par nom, produit
code et les commentaires sont les suivants:
<!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>
Quatrièmement, querySelectorAll acquis par le sélecteur spécifié querySelector,
le code et les commentaires sont les suivants:
<!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>
Les noms de classe et des images pour expliquer le développement des sélecteurs:
cinquième par html, l' acquisition du corps,
le code et les commentaires comme suit:
<!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>
explication Photo: Les
connaissances acquises:
document.getElementById ( "getId");
document.getElementsByTagName ( "li");
document.getElementsByClassName ( "Box");
document.body;
document.querySelector ()
document.querySelectorAll ()
document.documentElement ;
retour est un objet;
console.log (GET Object);
: obtenir l'objet est affiché sur la console de tous les contenus, y compris propre label
console.log (GET object.innerHTML)
: obtenir l'objet est affiché dans la console ne comprend pas tout le contenu de son propre label,
il est généralement obtenir du texte dans l'étiquette concernant l'utilisation de console.log (get object.innerHTML);
Je ne sais pas si vous pouvez ajouter et pratiquer oh, les
individus ont aussi l' université libre diplômés des sites de défense et ensemble total,
et offre des logiciels libres et des vidéos pédagogiques,
QQ + 2545062785
