ID、タグ名、クラス、セレクターquerySelector、querySelectorAll、htmlの指定、ボディ:ページ要素を取得する方法
最初の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>
ピクチャ説明:
タグ名によって第2の取得、
コードとコメントとして次の
<!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>
第四に、querySelectorAllは、指定されたセレクタquerySelectorにより取得された、
コードとコメントは次の通りであります:
<!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による第五、身体の取得、
コードとコメント次のように:
<!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( "李");
document.getElementsByClassName( "ボックス");
document.body;
document.querySelector()
document.querySelectorAllを()
はdocument.firstChild ;
リターンオブジェクトです。
console.log(GETオブジェクト);
:オブジェクトは独自のラベルを含め、すべてのコンテンツのコンソールに表示されます
はconsole.log(GET object.innerHTML);
:オブジェクトがコンソールに表示されます自身のレーベルのすべての内容が含まれていませんが、
それは一般的ですconsole.log(GET object.innerHTML)の使用に関するラベル内のテキストを取得します。
;私はあなたがああ追加して練習できるかどうかわからない
人も自由大学は防衛拠点と全体集合を卒業している、
フリーソフトウェアや教育ビデオを提供することと、
QQ + 2545062785