摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>選擇元素獲取</title></head><body><ul><li id="item1">ONE</li><
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇元素獲取</title>
</head>
<body>
<ul>
<li id="item1">ONE</li>
<li>TWO</li>
<li>THREE</li>
</ul>
<img src="http://imgsrc.baidu.com/forum/pic/item/ec3ec65c1038534322e31ac69a13b07eca80883a.jpg" alt="" name="pic">
<form action="" name="login">
<input type="text" placeholder="用戶名">
<input type="password" placeholder="密碼" name="" id="">
<button>登錄</button>
</form>
<p><a href="ipnx.cn">php中文網(wǎng)</a></p>
<script>
//使用ID來(lái)選擇元素
//document是Document對(duì)象的一個(gè)引用，是一個(gè)全局變量
//let 當(dāng)前代碼塊有效
let item1 = document.getElementById('item1');
//設(shè)置ID元素樣式
item1.style.backgroundColor = 'orange';
//使用class選擇元素
let item2 = document.getElementsByClassName('item2');
// console.log(item2);
// 設(shè)置class元素樣式
item2[0].style.backgroundColor = 'blue';
//使用document對(duì)象調(diào)用,在元素上調(diào)用，一般在父級(jí)上調(diào)用
document.getElementsByClassName('ul').item(0)//返回UL
.getElementsByClassName('item3').item(0)//返回li
.style.backgroundColor='green';
//使用TAG標(biāo)簽選擇元素
let list_t = document.getElementsByTagName('ul').item(0);
list_t.style.backgroundColor = 'lightgreen';
//獲取所有l(wèi)i元素
let list_li = document.getElementsByTagName('li');
console.log(list_li.length)
console.log(list_li)
for (let i = 0;i <list_li.length; i++){
list_li[1].style.backgroundColor='lightpink';
}
//以文檔對(duì)象的方式來(lái)訪問(wèn)這些特定的元素集合
//document.images 獲取所有img元素 返回?cái)?shù)組
document.images[0].style.width='350px';//標(biāo)簽數(shù)字索引
//推薦此用法?。?！
document.images['pic'].style.width='180px';//name屬性
//如果將images看成對(duì)象 name就可以看屬性
document.images.pic.style.width='250px';//name做為images對(duì)象的屬性
//form屬性 獲取頁(yè)面中所有的form
document.form.login.style.backgroundColor='purple';//個(gè)人比較喜歡用此方法!!!!!!!!!!!!!!!!!!!
//通過(guò)CSS選擇器獲取元素
let list_01 = document.querySelectorAll('li');//根據(jù)標(biāo)簽選擇器 li來(lái)獲取
console.log(list_01);
list_01[0].style.backgroundColor='red';
list_01.item(1).style.backgroundColor='gray';
</script>
</body>
</html>
批改老師：滅絕師太批改時(shí)間：2019-01-31 09:21:44
老師總結(jié)：標(biāo)簽和class獲取的都是元素的集合所以需要用數(shù)字下標(biāo)索引