abstract：使用DOM方法獲取元素<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM</title> </head>
使用DOM方法獲取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<ul id="lists">
<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 id="item3">列表項(xiàng)05</li>
</ul>
<form action="" name="login">
<input type="text" name="username">用戶名<br>
<input type="password" name="password">密碼
</form>
<ul class="ul">
<li class="red">列表項(xiàng)01</li>
<li >列表項(xiàng)02</li>
<li class="green">列表項(xiàng)03</li>
<li class="green">列表項(xiàng)04</li>
<li class="aaa sss">列表項(xiàng)05</li>
</ul>
<img src="static/images/mn.jpg" alt="小姐姐" name="pic">
<form action="" name="login1">
<input type="text" name="username" placeholder="用戶名">
<input type="password" name="password" placeholder="請(qǐng)輸入密碼">
<input type="button" name="btn" value="提交">
</form>
<p><a href="https://www.baidu.com" name="sss">百度一下</a></p>
<script>
//使用css選擇器來獲取元素
let llss = document.querySelectorAll('li');//根據(jù)li標(biāo)簽獲取全部的li元素
console.log(llss);
llss[0].style.backgroundColor = 'coral';
llss.item(1).style.backgroundColor = 'green';
//該方法也可以在元素上調(diào)用；
let llssul = document.querySelector('#lists');
console.log(llssul);
llssul.querySelectorAll('#item1').item(0).style.backgroundColor= 'red';
//通過class屬性獲取元素
let red = document.getElementsByClassName('red');
red[0].style.backgroundColor = 'red';
//該方法不僅可以在document上調(diào)用，也可以在元素上掉，一般是父元素
document.getElementsByClassName('ul').item(0)
.getElementsByClassName('green').item(0)
.style.color = 'green';
//支持多值
console.log(document.getElementsByClassName('aaa sss').item(0));
//name屬性和標(biāo)簽名獲取元素的快捷方式
//以文檔對(duì)象的方式來訪問這些特定的元素集合
//document.images:獲取所有的<img>元素，返回一個(gè)數(shù)組；
document.images[0].style.width = '300px';//1、標(biāo)簽的數(shù)字索引
document.images['pic'].style.width = '350px';//2、name屬性
//如果images看成對(duì)象，name就可以看成屬性
document.images.pic.style.width = '250px';
//forms屬性，獲取到頁面中所有的<form>
document.forms[1].style.backgroundColor = 'lightblue';//索引
document.forms['login1'].style.backgroundColor = 'coral';//name屬性
document.forms.login1.style.backgroundColor = 'pink';//name作為對(duì)象屬性
document.forms.item(1).style.backgroundColor = 'red';//item方法
//links屬性 <a>標(biāo)簽
document.links[0].style.backgroundColor = 'red';
document.links['sss'].style.backgroundColor = 'yellow';
document.links.sss.style.backgroundColor = 'pink';
document.links.item(0).style.color = 'red';
//body屬性，<body>標(biāo)簽
document.body.style.backgroundColor = '#cccccc';
//head屬性，<head>
//生成元素
let style = document.createElement('style');
//附加子元素
document.head.appendChild(style);
//documentElement:<html>
console.log(document.documentElement);
//doctype:文檔類型
console.log(document.doctype);
//通過標(biāo)簽名來獲取元素：getElementsByTagName()
//返回的是多個(gè)元素的集合，就會(huì)有l(wèi)ength
let ul = document.getElementsByTagName('ul');
console.log(ul.length);
ul[1].style.backgroundColor = 'pink';
//元素的集合就是一個(gè)對(duì)象，他的上面就有一個(gè)方法：item（）
let ul1 = document.getElementsByTagName('ul').item(1);
console.log(ul1);
//獲得所有的li元素
let lists = document.getElementsByTagName('li');
for(let i = 0; i<lists.length;i++){
if(i>4){
lists[i].style.backgroundColor = 'blue';
lists[i].style.color = 'white';
}
}
//該方法不僅定義在document上，在元素上也有定義；
let ul2 = document.getElementsByTagName('ul').item(1);
let lists2 = ul2.getElementsByTagName('li').item(1);
lists2.style.backgroundColor = 'red';
//根據(jù)name屬性獲取元素
//name 屬性并不是所有元素都有，只有一些特定的元素才會(huì)有，例如表單，表單內(nèi)的元素，圖像，框架（iframe）
//getElementsByName 返回是一個(gè)節(jié)點(diǎn)列表數(shù)組，NodeList
let login = document.getElementsByName('login')[0];
console.log(login);
login.style.backgroundColor = 'red';
//把name屬性當(dāng)成document對(duì)象的屬性來用也可以；
let login2 = document.login;//這種方式也可以拿到
login2.style.backgroundColor = 'yellow';
//根據(jù)id屬性選擇元素
let item1 = document.getElementById('item1');
let item2 = document.getElementById('item2');
let item3 = document.getElementById('item3');
item1.style.backgroundColor = 'yellow';
item2.style.backgroundColor = 'yellow';
item3.style.backgroundColor = 'yellow';
//通過函數(shù)簡(jiǎn)化以上的操作，也就是封裝；
function getElements() { //參數(shù)是多個(gè)id字符串
let elements = {}; //創(chuàng)建一個(gè)儲(chǔ)存元素的對(duì)象
for (var i=0;i<arguments.length;i++){
let id = arguments[i]; //獲取參數(shù)的值，也就是id名
let elt = document.getElementById(id); //通過id獲取元素
if(elt === null){
throw new Error('沒有這個(gè)id' + id);//拋出異常
}
elements[id] = elt;//把拿到的元素加入到對(duì)象中
}
return elements;//返回元素集合的對(duì)象。
}
let a = getElements('item1','item2','item3');
console.log(a);
for (let key in a){
a[key].style.backgroundColor = 'red';
}
</script>
</body>
</html>運(yùn)行截圖：
總結(jié)：
把課上的知識(shí)全部手敲了一遍，對(duì)于DOM獲取元素，對(duì)元素進(jìn)行操作有一定把握。
還需要加強(qiáng)練習(xí)的是部分單詞記不太牢，需要回看視頻才能記住。
Correcting teacher：天蓬老師Correction time：2019-07-01 17:39:39
Teacher's summary：獲取元素的方式很多的, 平時(shí)工作中, 只要掌握一到二個(gè)就可以了, 了解更多的方式, 是為了看懂同行寫的代碼, 這也很重要