摘要：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></ti
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
form.login{padding: 30px;}
form.login input{background: #eee;width: 200px; border: none; height:40px; line-height: 40px; padding: 0 10px; margin-bottom: 15px;}
form.login button{background: #ff6700;width: 200px; text-align: center; color: #fff; border: none; height:40px; line-height: 40px; padding: 0 10px; margin-bottom: 15px;}
</style>
</head>
<body>
<ul id="ul">
<li id="list1">列表項(xiàng)目 1</li>
<li class="Clist1 large">列表項(xiàng)目 2</li>
<li id="list2">列表項(xiàng)目 3</li>
<li class="Clist2">列表項(xiàng)目 4</li>
<li id="list3">列表項(xiàng)目 5</li>
<li class="Clist2">列表項(xiàng)目 6</li>
</ul>
<form action="" name="login" class="login">
<input type="text" name="username" placeholder="點(diǎn)擊輸入您的姓名">
<input type="text" name="password" placeholder="點(diǎn)擊輸入您的密碼">
<button name="button">提交</button>
</form>
<img src="" name="pic" style="border:1px solid #ddd; display: block; background: #eee;" width="300px" height="200px" alt="">
<a name="link" href="http://www.baidu.com">百度</a>
<script type="text/javascript">
//使用id來選擇元素
//使用id來選擇元素
//document是Document對(duì)象的一個(gè)引用,是一個(gè)全局變量
//let與var類似,但不相同
let list1 = document.getElementById('list1');
let list2 = document.getElementById('list2');
let list3 = document.getElementById('list3');
list1.style.backgroundColor='red';
list2.style.backgroundColor='yellow';
list3.style.backgroundColor='blue';
//通過函數(shù)來寫
function getElements(){//參數(shù)是多個(gè)id字符串
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("沒有這個(gè)元素"+id);//拋出異常
}
elements[id]=elt;//將獲取到的元素保存到結(jié)果集合中
}
return elements;//將獲取到的元素返回
}
//根據(jù)id獲取頁面上的指定元素,返回一個(gè)關(guān)聯(lián)數(shù)組對(duì)象,鍵名就是id
let elements=getElements('list1','list2','list3');
console.log(elements);
//根據(jù)name屬性獲取元素
//根據(jù)name屬性獲取元素
let login = document.getElementsByName('login')[0];
login.style.border='1px solid #ddd'
//我們可以把name當(dāng)成document對(duì)象的屬性來用
let login1 = document.login;
login1.style.backgroundColor='#fafafa';
//根據(jù)標(biāo)簽名獲取元素
//根據(jù)標(biāo)簽名獲取元素
//返回的是一個(gè)元素的集合,就會(huì)有一個(gè)length
let ul = document.getElementsByTagName('ul')[0];
ul.style.backgroundColor='#f1f1f1';
//元素的集合其實(shí)是一個(gè)對(duì)象,它的上面有一個(gè)方法:item()
let ul1 = document.getElementsByTagName('ul').item(0);
ul1.style.padding='30px';
//獲取所有l(wèi)i元素
let lists = document.getElementsByTagName('li');
for(let i=0;i<lists.length;i++){
lists[i].style.color='green';
}
/* //該方法不僅定義在document對(duì)象上,還在元素對(duì)象上也有定義
let ul2 = document.getElementsByTagName('ul').item(0);
let list2 = ul2.getElementsByTagName('li').item(1);//這個(gè)寫法總是提示有問題
ul2.style.color='#000' */
//name屬性和標(biāo)簽名獲取元素的快捷方式
//name屬性和標(biāo)簽名獲取元素的快捷方式
//以文檔對(duì)象的方式來訪問這些特定的元素集合
//document.images:獲取所有的<img>元素,返回是一個(gè)數(shù)組
document.images[0].style.backgroundColor='#ffa200';//標(biāo)簽的數(shù)字索引
document.images['pic'].style.borderColor='red';//name屬性索引
//如果將images看成對(duì)象,name就可以看成屬性
document.images.pic.style.width='400px'//name做為images對(duì)象的屬性
//forms 屬性:獲取到頁面中所有的form標(biāo)簽
document.forms[0].style.border='1px solid #999';
document.forms['login'].style.backgroundColor='#fff';
document.forms.login.style.backgroundColor='#fafafa';
document.forms.item(0).style.border='none';//使用元素集合的item()方法
//link鏈接獲取所有的<a>
document.links[0].style.border='1px solid #999';
document.links['link'].style.backgroundColor='#ffa200';
document.links.link.style.color='#fff';
//body:<body>
document.body.style.backgroundColor='#fafafa';
//head:<head>
let sytle=document.createElement('style');
//document.head.appendChild(style);//創(chuàng)建新的style標(biāo)簽
//documentElement<html>
console.log(document.documentElement);
//根據(jù)class來獲取元素
let classList = document.getElementsByClassName('Clist2');
classList[0].style.backgroundColor='red';
classList.item(1).style.backgroundColor='#666'
//該方法不僅可以在document對(duì)象上調(diào)用，也可以在元素上調(diào)用，一般是在父元素上調(diào)用
document.getElementsByClassName('ul').item(0)
document.getElementsByClassName('Clist2').item(0)
.style.backgroundColor='#fff';
//多class值寫法
let large= document.getElementsByClassName('Clist1 large')[0];
large.style.fontSize='30px';
//選擇頁面元素最簡(jiǎn)單的方式就是用css選擇器:.Clist1---->class='Clist1'
let Clist = document.querySelectorAll('li');
Clist[0].style.fontSize='50px';
Clist.item(2).style.fontSize='24px';
</script>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-05-17 17:36:44
老師總結(jié)：當(dāng)你有多種方法用來選擇一個(gè)元素的時(shí)候, 一定要選擇最簡(jiǎn)單的那個(gè), 代碼的可讀性永遠(yuǎn)是排到第一位的