abstrait：<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>根據(jù)*選擇元素</title>
</head>
<body>
<ul id="ul">
<li id="item1">列表項01</li>
<li>列表項02</li>
<li id="item2">列表項03</li>
<li>列表項04</li>
<li class="coral large" id="item3">列表項05</li>
</ul>
<img src="inc/1.jpg" alt="" name="pic">
<form action="" name="login">
<input type="text" placeholder="用戶名">
<input type="password" placeholder="密碼不少于8位">
<button>提交</button>
</form>
<p><a href="http://ipnx.cn" name="php">php中文網(wǎng)</a></p>
<script>
//(1).id屬性,getElementById(),返回一個元素
let item = document.getElementById('item1');
//如果需要使用多個id來獲取元素,可以通過函數(shù)來簡化操作
function getElements () { //參數(shù)是多個id字符串
let elements = {}; // 創(chuàng)建一個空的map映射對象用來保存結(jié)果
for (let i = 0; i < arguments.length; i++) {
let id = arguments[i]; // 獲取到要查詢的每個id
let elt = document.getElementById(id); // 根據(jù)id查找元素
if (elt === null) {
throw new Error("No element with id: " + id); //拋出異常
}
elements[id] = elt; // 將獲取到的元素存入到映射數(shù)據(jù)中
}
return elements; // 返回查詢到的元素(以對象字面量方式)
}
//獲取頁面上指定的id屬性的元素,返回一個關(guān)聯(lián)數(shù)組類型的對象,鍵名就是id的值
let elements = getElements('item1','item2','item3');
for (let key in elements) {
elements[key].style.backgroundColor = 'coral';
}
//(2). name屬性，getElementsByName()返回是一個NodeList節(jié)點(diǎn)列表,不只一個元素
//擁有name屬性的元素不多,主要有表單,及表單中的元素,另外還有圖像和內(nèi)聯(lián)框架
//form,input..., img, iframe
//name屬性主要用于表單數(shù)據(jù)提交到服務(wù)器時,用來識別提交的內(nèi)容
let login = document.getElementsByName('login')[0];
//還可以將name屬性的值,當(dāng)作docuemtn對象的屬性來用,返回唯一元素
let login = document.login;
//(3). 標(biāo)簽名稱，getElementsByTagName(),返回一個元素集合
//獲取所有的li元素，返回一個html元素集合: HTMLCollection
let lists = document.getElementsByTagName('li');
for (let i = 0; i < lists.length; i++) {
lists[i].style.backgroundColor = 'lightpink';
}
//有l(wèi)ength屬性,可以當(dāng)數(shù)組來訪問
let ul = document.getElementsByTagName('ul')[0];
//元素集合也是一個對象,item()也可以獲取指定元素
let ul = document.getElementsByTagName('ul').item(0);
ul.style.backgroundColor = 'lightblue';
//getElementsByTagName()不僅在document對象上有定義,在Element元素對象上也有定義
let item = ul.getElementsByTagName('li').item(1); // 在父元素上調(diào)用該方法,獲取ul中的第二個列表項
item.style.backgroundColor = 'green';
//(4). class屬性，getElementsByClassName(),返回一個html元素集合,與根據(jù)標(biāo)簽名獲取的返回數(shù)據(jù)類型完全一樣
let red = document.getElementsByClassName('red');
//該方法也支持在父元素上調(diào)用
document.getElementsByClassName('ul').item(0)
.getElementsByClassName('green').item(0)
.style.backgroundColor = 'green';
//支持多個class 屬性值
let large = document.getElementsByClassName('coral large')[0];
large.style.backgroundColor = 'coral';
large.style.fontSize = '1.5rem';
//（5）//根據(jù)name標(biāo)簽名和name屬性選擇元素的快捷方式:僅適用于極少的幾個,這是歷史原因造成的
// images: 所有的<img>元素 圖像,數(shù)組, 有三種訪問方式
document.images[0].style.width = '200px'; // 1.標(biāo)簽索引
document.images['pic'].style.width = '200px'; // 2.name 屬性
document.images.pic.style.width = '300px'; // 3.將name視為元素對象的屬性進(jìn)行訪問
// forms: 所有的<forms>元素 表單,數(shù)組
document.forms[0].style.backgroundColor = 'lightgreen';
document.forms['login'].style.backgroundColor = 'lightblue';
document.forms.login.style.backgroundColor = 'red';
document.forms.item(0).style.backgroundColor = 'lightgreen'; // 類數(shù)組可用item()方法獲取某個元素
//a 鏈接: 所有的<a>元素,NodeList 數(shù)組
document.links[0].style.backgroundColor = 'yellow';
document.links['php'].style.backgroundColor = 'red';
document.links.php.style.backgroundColor = 'green';
// body: <body>元素,總有定義,只有一個
document.body.style.backgroundColor = 'wheat';
// head: <head>元素,總有定義,不寫會自動添加,只有一個
let style = document.createElement('style');
document.head.appendChild(style);
// documentElement: <html>元素,總有定義,同樣一個頁面只有一個
console.log(document.documentElement);
// doctype: 文檔類型,同樣也只有一個
console.log(document.doctype);
//(6). 根據(jù)匹配的css選擇器來選擇;
//我們選擇頁面元素的時候,大多使用css選擇器來獲取元素,例如
// .red 獲取的元素,其實js也支持使用css選擇器獲取元素
let lists = document.querySelectorAll('li');
console.log(lists); //返回節(jié)點(diǎn)列表數(shù)組,里面每個元素對應(yīng)一個元素
lists[0].style.backgroundColor = 'coral';
lists.item(1).style.backgroundColor = 'lightblue';
//該方法還可以在元素上調(diào)用,這也根據(jù)標(biāo)簽和class類名獲取元素是一樣的
let ul = document.querySelector('#ul'); // 返回滿足條件的第一個元素
console.log(ul); // 只返回ul列表元素以及內(nèi)部子元素
let li = ul.querySelectorAll('.green');
for (let i = 0; i < li.length; i++) {
li[i].style.backgroundColor = 'green';
}
</script>
</body>
</html>
Professeur correcteur：滅絕師太Temps de correction：2019-02-15 09:27:33
Résumé du professeur：光說不練假把式哦!這樣寫可不行,我需要你的練習(xí)代碼