abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>DOM操作</title></head><body><ul id=&q
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM操作</title>
</head>
<body>
<ul id="poetry" class="poetry">
<li id="display1">山有木兮木有枝，心悅君兮君不知?！对饺烁琛?lt;/li>
<li id="display2">人生若只如初見，何事秋風(fēng)悲畫扇?！{蘭性德《木蘭詞·擬古決絕詞柬友》</li>
<li class="display1">曾經(jīng)滄海難為水，除卻巫山不是云?！ 峨x思五首·其四》</li>
<li class="display2">玲瓏骰子安紅豆，入骨相思知不知?！獪赝ン蕖赌细枳釉~二首 / 新添聲楊柳枝詞》</li>
<li class="display3">入我相思門，知我相思苦?！畎住度迤哐?/ 秋風(fēng)詞》</li>
<li>平生不會相思，才會相思，便害相思?！煸偎肌墩酃鹆睢ご呵椤?lt;/li>
</ul>
<form action="" name="login">
<label for="username">用戶名:</label>
<input id="username" type="text" name="username" placeholder="用戶名">
<label for="password">密碼:</label>
<input id="password" type="password" name="password" placeholder="******">
<input type="button" value="登錄">
</form>
<img src="img/1.jpg" alt="" name="pic">
<form action="" name="register">
<label for="username1">用戶名:</label>
<input id="username1" type="text" name="username1" placeholder="用戶名">
<label for="mobile">手機(jī)號:</label>
<input id="mobile" type="number" name="mobile" placeholder="手機(jī)號">
<label for="password1">密碼:</label>
<input id="password1" type="password" name="password1" placeholder="******">
<input type="button" value="登錄">
</form>
<a href="#" name="c">ccccccc</a>
<script>
//============================== 根據(jù)ID獲取元素 =======================================
//獲取id='poetry'的元素，修改它的樣式
let poetry = document.getElementById('poetry');
poetry.style.margin = '100px auto';
//通過函數(shù)獲取ID屬性元素
function getId() {
//保存獲取到的ID屬性元素
let elements = {};
for (let i = 0; i < arguments.length; i++){
let id = arguments[i]; //獲取參數(shù)
let elt = document.getElementById(id);//根據(jù)ID名稱獲取元素，賦值給給elt
if (elt === null){
//如果沒有這個ID屬性將拋出異常
throw new Error('沒有這個元素'+id);
}
//將獲取到的元素放入element集合里面
elements[id] = elt;
}
return elements;
}
let elements = getId('display1','display2');
for (let key in elements){
elements[key].style.backgroundColor = '#a7bcff'
}
//====================================根據(jù)name獲取元素==================================
//getElementsByName() 返回的是一個節(jié)點(diǎn)列表數(shù)組
let login = document.getElementsByName('login')[0];
login.style.border = '2px solid #FF938D';
//可以把name屬性當(dāng)document對象屬性使用
let login1 = document.login;
login1.style.padding = '20px 10px';
//====================================根據(jù)標(biāo)簽名稱獲取元素==================================
//getElementsByTagName() 返回的是一個節(jié)點(diǎn)列表數(shù)組
let ul = document.getElementsByTagName('ul')[0];
ul.style.border = '2px solid #479FFF';
//元素的集合是一個對象，有一個訪問方法：item()
let ul1 = document.getElementsByTagName('ul').item(0);
ul1.style.padding = '50px 100px';
//獲取所有l(wèi)i元素
let lis = document.getElementsByTagName('li');
lis[1].style.border = '1px solid #FFCB24';
//====================================獲取元素的快捷方式==================================
// document.images 獲取所有img標(biāo)簽的元素,返回的是一個節(jié)點(diǎn)列表數(shù)組
document.images[0].style.width = '600px';
document.images['pic'].style.height = '650px';
//將image看成對象 name可以看成屬性
document.images.pic.style.border = '2px solid #479FFF';
//forms 獲取頁面所有form標(biāo)簽
document.forms[1].style.backgroundColor = '#727272';
document.forms.item(0).style.backgroundColor = '#aaaaaa';
document.forms['register'].style.backgroundColor = '#969696';
document.forms.register.style.backgroundColor = '#beed92';
//links 獲取頁面所有的 a 標(biāo)簽
document.links[0].style.backgroundColor = 'yellow';
document.links.item(0).style.backgroundColor = 'yellow';
document.links['c'].style.backgroundColor = 'yellow';
document.links.c.style.backgroundColor = 'yellow';
//body: <body>
document.body.style.backgroundColor = 'snow';
// head: <head>元素,總有定義,不寫會自動添加,只有一個
let style = document.createElement('style');
document.head.appendChild(style);
//====================================根據(jù)class獲取元素==================================
let li3 = document.getElementsByClassName('display1');
li3[0].style.backgroundColor = '#a4ffdf';
//該方法也支持在父元素上調(diào)用
document.getElementsByClassName('poetry').item(0)
.getElementsByClassName('display2').item(0)
.style.backgroundColor = 'green';
//支持多個class 屬性值
let large = document.getElementsByClassName('display2')[0];
large.style.backgroundColor = '#ff82da';
large.style.fontSize = '18px';
//====================================根據(jù)css選擇器獲取元素==================================
// document.querySelectorAll() 返回的是一個節(jié)點(diǎn)列表數(shù)組
let lists = document.querySelectorAll('li');
lists[0].style.backgroundColor = 'coral';
lists.item(1).style.backgroundColor = 'lightblue';
//該方法還可以在元素上調(diào)用,這也根據(jù)標(biāo)簽和class類名獲取元素是一樣的
let uls = document.querySelector('#ul'); // 獲取滿足條件的第一個元素
console.log(uls); // 只返回ul列表元素以及內(nèi)部子元素
let li = ul.querySelectorAll('.display3');
li[0].style.backgroundColor = 'green';
</script>
</body>
</html>
演示地址 -> http://47.107.64.136/DOM/1/index1.html
Correcting teacher：查無此人Correction time：2019-05-07 09:49:47
Teacher's summary：完成的不錯。相信你現(xiàn)在對js有一定的了解了，繼續(xù)加油。