摘要：<body> <ul id="lists"> <li id="item1">列表01</li> <li>列表02
<body>
<ul id="lists">
<li id="item1">列表01</li>
<li>列表02</li>
<li id="item2">列表03</li>
<li>列表04</li>
<li id="item3">列表05</li>
</ul>
<script>
// let item1=document.getElementById("item1");
// let item2=document.getElementById("item2");
// let item3=document.getElementById("item3");
//
// item1.style.backgroundColor='yellow';
// item2.style.backgroundColor='lightblue';
// item3.style.backgroundColor='pink';
function getElements() {
let elements={}; //保存獲取到的dom對(duì)象元素
for(let i=0;i<arguments.length;i++){
let id = arguments[i]; //獲取參數(shù)id
let elt = document.getElementById(id); //根據(jù)id字符串
if (elt === null){
throw new Error("沒(méi)有這個(gè)元素"+id); //拋出異常
}
elements[id]=elt; //將獲取到的元素返回
}
return elements;
}
let elements = getElements('item1','item2','item3');
console.log(elements);
for(let key in elements){
elements[key].style.backgroundColor='coral';
}
</script>
<!--name屬性并不是所有元素都有，只有一些特定的元素才會(huì)有，比如表單，表單內(nèi)的元素，圖像，iframe-->
<hr>
<form action="" name="login" >
<input type="text" name="username"><br>
<input type="password" name="password">
<button name="button">提交</button>
</form>
<form action="" name="login" >
<input type="text" name="username"><br>
<input type="password" name="password">
<button name="button">提交</button>
</form>
<script>
//getElementsByName()返回是一個(gè)節(jié)點(diǎn)列表數(shù)組，Nodelist
let login = document.getElementsByName('login')[0];
//console.log(login);
login.style.backgroundColor='red';
let login1 = document.getElementsByName('login')[1];
//console.log(login1);
login1.style.backgroundColor='pink';
//我們可以吧name屬性當(dāng)成document對(duì)象的屬性來(lái)用
// let login1 = document.login;
// console.log(login1);
// login1.style.backgroundColor='green';
</script>
<hr>
<ul>
<li>列表項(xiàng)01</li>
<li>列表項(xiàng)02</li>
<li>列表項(xiàng)03</li>
<li>列表項(xiàng)04</li>
<li>列表項(xiàng)05</li>
</ul>
<script>
//返回的是一個(gè)元素的集合，就會(huì)有一個(gè)length
let ul = document.getElementsByTagName('ul')[1];
ul.style.backgroundColor='lightgreen';
//元素的集合其實(shí)是一個(gè)對(duì)象，他的上面有一個(gè)方法：item（）
let ul1= document.getElementsByTagName('ul').item(1);
ul1.style.backgroundColor='lightblue';
//獲取到所有l(wèi)i元素
let lists = document.getElementsByTagName('li');
console.log(lists.length);
console.log(lists);
for(let i=5;i<lists.length;i++){
lists[i].style.backgroundColor='lightpink';
}
//該方法不僅定義在document對(duì)象上，還在元素對(duì)象上也有定義
let ul2=document.getElementsByTagName('ul').item(1);
let item2=ul2.getElementsByTagName('li').item(1);
item2.style.backgroundColor='green';
</script>
跟著敲一遍就會(huì)發(fā)現(xiàn)這幾個(gè)小節(jié)其實(shí)不難，主要是document.getElementBy.... 的用法，怎么提取并修改元素屬性標(biāo)簽的樣式。
同樣的使用方法，將獲取到的對(duì)象保存到自己定義的一個(gè)對(duì)象變量中，然后使用對(duì)象變量進(jìn)行樣式修改。
善于console.log查看定義的變量，能夠更加清楚元素的屬性
批改老師：西門(mén)大官人批改時(shí)間：2019-04-01 09:56:41
老師總結(jié)：getElements函數(shù)少參數(shù)吧？函數(shù)中用到的arguments不知道從哪里來(lái)的