摘要：<!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">列表項(xiàng)01</li>
<li>列表項(xiàng)02</li>
<li id="item2">列表項(xiàng)03</li>
<li>列表項(xiàng)04</li>
<li class="coral large" id="item3">列表項(xiàng)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(),返回一個(gè)元素
let item = document.getElementById('item1');
//如果需要使用多個(gè)id來(lái)獲取元素,可以通過(guò)函數(shù)來(lái)簡(jiǎn)化操作
function getElements () { //參數(shù)是多個(gè)id字符串
let elements = {}; // 創(chuàng)建一個(gè)空的map映射對(duì)象用來(lái)保存結(jié)果
for (let i = 0; i < arguments.length; i++) {
let id = arguments[i]; // 獲取到要查詢的每個(gè)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; // 返回查詢到的元素(以對(duì)象字面量方式)
}
//獲取頁(yè)面上指定的id屬性的元素,返回一個(gè)關(guān)聯(lián)數(shù)組類型的對(duì)象,鍵名就是id的值
let elements = getElements('item1','item2','item3');
for (let key in elements) {
elements[key].style.backgroundColor = 'coral';
}
//(2). name屬性，getElementsByName()返回是一個(gè)NodeList節(jié)點(diǎn)列表,不只一個(gè)元素
//擁有name屬性的元素不多,主要有表單,及表單中的元素,另外還有圖像和內(nèi)聯(lián)框架
//form,input..., img, iframe
//name屬性主要用于表單數(shù)據(jù)提交到服務(wù)器時(shí),用來(lái)識(shí)別提交的內(nèi)容
let login = document.getElementsByName('login')[0];
//還可以將name屬性的值,當(dāng)作docuemtn對(duì)象的屬性來(lái)用,返回唯一元素
let login = document.login;
//(3). 標(biāo)簽名稱，getElementsByTagName(),返回一個(gè)元素集合
//獲取所有的li元素，返回一個(gè)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ù)組來(lái)訪問(wèn)
let ul = document.getElementsByTagName('ul')[0];
//元素集合也是一個(gè)對(duì)象,item()也可以獲取指定元素
let ul = document.getElementsByTagName('ul').item(0);
ul.style.backgroundColor = 'lightblue';
//getElementsByTagName()不僅在document對(duì)象上有定義,在Element元素對(duì)象上也有定義
let item = ul.getElementsByTagName('li').item(1); // 在父元素上調(diào)用該方法,獲取ul中的第二個(gè)列表項(xiàng)
item.style.backgroundColor = 'green';
//(4). class屬性，getElementsByClassName(),返回一個(gè)html元素集合,與根據(jù)標(biāo)簽名獲取的返回?cái)?shù)據(jù)類型完全一樣
let red = document.getElementsByClassName('red');
//該方法也支持在父元素上調(diào)用
document.getElementsByClassName('ul').item(0)
.getElementsByClassName('green').item(0)
.style.backgroundColor = 'green';
//支持多個(gè)class 屬性值
let large = document.getElementsByClassName('coral large')[0];
large.style.backgroundColor = 'coral';
large.style.fontSize = '1.5rem';
//（5）//根據(jù)name標(biāo)簽名和name屬性選擇元素的快捷方式:僅適用于極少的幾個(gè),這是歷史原因造成的
// images: 所有的<img>元素 圖像,數(shù)組, 有三種訪問(wèn)方式
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視為元素對(duì)象的屬性進(jìn)行訪問(wè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()方法獲取某個(gè)元素
//a 鏈接: 所有的<a>元素,NodeList 數(shù)組
document.links[0].style.backgroundColor = 'yellow';
document.links['php'].style.backgroundColor = 'red';
document.links.php.style.backgroundColor = 'green';
// body: <body>元素,總有定義,只有一個(gè)
document.body.style.backgroundColor = 'wheat';
// head: <head>元素,總有定義,不寫會(huì)自動(dòng)添加,只有一個(gè)
let style = document.createElement('style');
document.head.appendChild(style);
// documentElement: <html>元素,總有定義,同樣一個(gè)頁(yè)面只有一個(gè)
console.log(document.documentElement);
// doctype: 文檔類型,同樣也只有一個(gè)
console.log(document.doctype);
//(6). 根據(jù)匹配的css選擇器來(lái)選擇;
//我們選擇頁(yè)面元素的時(shí)候,大多使用css選擇器來(lái)獲取元素,例如
// .red 獲取的元素,其實(shí)js也支持使用css選擇器獲取元素
let lists = document.querySelectorAll('li');
console.log(lists); //返回節(jié)點(diǎn)列表數(shù)組,里面每個(gè)元素對(duì)應(yīng)一個(gè)元素
lists[0].style.backgroundColor = 'coral';
lists.item(1).style.backgroundColor = 'lightblue';
//該方法還可以在元素上調(diào)用,這也根據(jù)標(biāo)簽和class類名獲取元素是一樣的
let ul = document.querySelector('#ul'); // 返回滿足條件的第一個(gè)元素
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>
批改老師：滅絕師太批改時(shí)間：2019-02-15 09:27:33
老師總結(jié)：光說(shuō)不練假把式哦!這樣寫可不行,我需要你的練習(xí)代碼