サマリー：經(jīng)過本章節(jié)學(xué)習(xí)了DOM方法獲取元素分別為：1、根據(jù)id屬性獲取元素， 1.1 document根據(jù)id獲取元素用.getElementById('ID')方法；返回獲取到對應(yīng)ID的元素數(shù)組對象?！咀⒁狻浚哼\用ID選擇器中不可像使用類名那樣重復(fù)別名，CSS樣式?jīng)]問題。但DOM中 .getElementById('
經(jīng)過本章節(jié)學(xué)習(xí)了DOM方法獲取元素分別為：
1、根據(jù)id屬性獲取元素，
1.1 document根據(jù)id獲取元素用.getElementById('ID')方法；返回獲取到對應(yīng)ID的元素數(shù)組對象。
【注意】：運用ID選擇器中不可像使用類名那樣重復(fù)別名，CSS樣式?jīng)]問題。但DOM中 .getElementById('ID')方法只能找到一個。
1.2 對所獲取的數(shù)組對象操作方法：
document.getElementById('ID').style.……
2、根據(jù)name屬性獲取元素；
2.1：使多name為表單中元素和圖片，內(nèi)聯(lián)框架。
2.2：name屬性更多的用于表單數(shù)據(jù)提交到服務(wù)器時,用來識別提交的內(nèi)容，可以在客戶端先對name作基礎(chǔ)驗證再提交。
2.3:document.getElementsByName('username')方法返回所有name為 username的元素對象數(shù)組；
2.4：對所獲取的對象后面加上 [下標]對應(yīng)的元素進行操作。
document.getElementsByName('login')[下標].style......
3、根據(jù)標簽名稱獲取元素；
3.1：頁面中根據(jù)標簽名稱獲取用:document.getElementsByTagName('div') ，此方法返回所有div標簽集合。
3.2 對所獲取到的標簽集合使用方法：
document.getElementsByTagName('div') [下標].style......
document.getElementsByTagName('div') .item(0).style......
4、根據(jù)class屬性來獲取元素，
4.1 document.getElementsByClassName（'classname'）對頁面中獲取到所有classname類的html標簽元素，返回元素集合對象數(shù)組。
4.2 還可以對父類集合數(shù)組中再獲取子級類
document.getElementsByClassName（'父類名'）[下標].getElementsByClassName('子類名').item(下標);
4.3 getElementsByClassName使用方法：
document.getElementsByTagName('div')[下標].style................
document.getElementsByTagName('div').item(下標).style................
5、getElement其它方法：
5.1
根據(jù) css選擇器來獲取元素，
document.querySelectorAll（'ul')//獲取所有ul，將返回數(shù)象數(shù)組。用下標訪問對應(yīng)的元素
document.querySelector('.classname')//獲取所有classname,將返回對象數(shù)組。用下標訪問對應(yīng)的元素
document.querySelector('#idName')//收于id別名要求要不能一致，就算有id別名重復(fù)也只返第一個id，
//需要使用時后面加下標[0]即可。
5.2根據(jù)類名和name屬性快捷獲取元素
圖片
document.images[下標]，document.images['name屬性']，document.images.name屬性；
表單
document.forms[下標]，document.forms.item[下標],document.forms['name值']，document.forms.name值.
鏈接
document.links[下標], document.links[name值], document.links.name值；
body
document.dody.style.......因為body只有一個不需要下標操作;
head
document.head.appendChild.....
document.documentElement整個html窗口。
document.doctype 文檔類型。
更多未提到的后續(xù)把手冊都看一遍或者會去查。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clear{ clear:both}
ul{width: 200px;height: 150px;border:1px solid #ccc;float: left;margin-left: 20px;}
.ulroot span{margin-left: 100px;}
.ulroot{float: left;margin-left:10px;}
.formDiv{margin-top: 10px;border:1px solid #ccc;}
</style>
</head>
<body>
<ul id="styleUl0">
<li id="style1_1">我的ID是style1_1</li>
<li id="style1_2">我的ID是style1_2</li>
<li id="style1_3">我的ID是style1_3</li>
<li id="style1_4">我的ID是style1_4</li>
<li id="style1_5">我的ID是style1_5</li>
</ul>
<ul id = "stylesetClassUl">
<li id="style2_1">我的ID是style2_1</li>
<li id="style2_2">我的ID是style2_2</li>
<li id="style2_3">我的ID是style2_3</li>
<li id="style2_4">我的ID是style2_4</li>
<li id="style2_5">我的ID是style2_5</li>
</ul>
<ul id="styleUl2">
<li id="style3_1">我的ID是style3_1</li>
<li id="style3_2">我的ID是style3_2</li>
<li id="style3_3">我的ID是style3_3</li>
<li id="style3_4">我的ID是style3_4</li>
<li id="style3_5">我的ID是style3_5</li>
</ul>
<div style="width:100%;height:200px;border:1px solid #ccc;float:left;">
<h3>對元素id操作</h3>
<div>
<span>用id改變ul背景</span><button onclick="resetUl(0)">確定</button><br><br>
<span>用id改變li背景</span><button onclick="resetli(0)">確定</button>
</div>
<div>
<span>用id改變ul背景</span><button onclick="resetUl(1)">確定</button><br><br>
<span>用id改變ul背景</span><button onclick="resetli(1)">確定</button>
</div>
<div>
<span>用id改變li背景</span><button onclick="resetUl(2)">確定</button><br><br>
<span>用id改變li背景</span><button onclick="resetli(2)">確定</button>
</div>
</div>
<div></div>
<!-- 根據(jù)name操作元素 -->
<div>
<h3>對元素name操作</h3>
<form action="" style="width:600px;float:left">
<input type="text" name="username"> 我的name是username<br>
<input type="password" name="password"> 我的name是password<br>
<button name="button">提交</button>我的name是button <br>
<input type="text" name="username">我的name跟前面哥們一樣username <br>
<input type="text" name="username">我的name跟前面哥們一樣username <br>
<input type="text" name="username">我的name跟前面哥們一樣username <br>
</form>
<div style="width:400px;border:1px soid #ccc;margin-top:10px; float:left; margin-left:100px;">
對name為password變色<br>
<button onclick="passSet()">一個name操作</button><br>
對name為username 變色操作<br>
<button onclick="userNameSet()">多個name操作</button>
</div>
<div></div>
</div>
<div>
<h3>DOM對標簽名操作</h3>
<form action="" style="width:600px;float:left">
<input type="text" name="username"> 我的name是username<br>
<input type="password" name="password"> 我的name是password<br>
<button name="button">提交</button>我的name是button <br>
<input type="text" name="username">我的name跟前面哥們一樣username <br>
<input type="text" name="username">我的name跟前面哥們一樣username <br>
<input type="text" name="username">我的name跟前面哥們一樣username <br>
</form>
<div style="width:400px;border:1px soid #ccc;margin-top:10px; float:left; margin-left:100px;">
對標簽為form變色
<button onclick="tagSet('form')">form操作</button><br>
對標簽為input變色
<button onclick="tagSet('input')">input操作</button><br>
對標簽為button變色
<button onclick="tagSet('button')">button操作</button><br>
對標簽為span變色
<button onclick="tagSet('span')">span操作</button><br>
對標簽為body變色
<button onclick="tagSet('body')">body操作</button><br>
</div>
<div></div>
</div>
<ul>
<li>我的class是style1_1</li>
<li id="style1_2">我的ID是style1_2</li>
<li>我的class是style1_1</li>
<li id="style1_4">我的ID是style1_4</li>
<li>我的class是style1_1</li>
</ul>
<ul>
<li id="style2_1">我的ID是style2_1</li>
<li>我的class是style2_1</li>
<li id="style2_3">我的ID是style2_3</li>
<li>我的class是style2_1</li>
<li id="style2_5">我的ID是style2_5</li>
</ul>
<ul>
<li>我的class是style3_1</li>
<li>我的class是style3_1</li>
<li>我的class是style3_1</li>
<li>我的class是style3_1</li>
<li>我的class是style3_1</li>
</ul>
<div style="width:100%;height:200px;border:1px solid #ccc;float:left;">
<h3>對標簽Class操作</h3>
<div>
<span>用class改變setClassUl背景</span><button onclick="setUlClass(0)">確定</button><br><br>
<span>用class改變li背景</span><button onclick="setLiClass(0)">確定</button>
</div>
<div>
<span>用class改變ul2背景</span><button onclick="setUlClass(1)">確定</button><br><br>
<span>用class改變li背景</span><button onclick="setLiClass(1)">確定</button>
</div>
<div>
<span>用class改變所有ul背景</span><button onclick="setUlClass(2)">確定</button><br><br>
<span>用class改變li背景</span><button onclick="setLiClass(2)">確定</button>
</div>
</div>
<div></div>
<script type="text/javascript">
// 改變ul背景
function resetUl(pId) {
//使用id獲取ul元素
let styleUl0 = document.getElementById('styleUl0');
let stylesetClassUl = document.getElementById('stylesetClassUl');
let styleUl2 = document.getElementById('styleUl2');
switch(pId)
{
case 0:
styleUl0.style.backgroundColor = 'coral';
break;
case 1:
stylesetClassUl.style.backgroundColor = 'red';
break;
case 2:
styleUl2.style.backgroundColor = 'yellow';
break;
}
}
// 改變li背景
function resetli(pId) {
//使用id獲取li元素
let style1_1 = document.getElementById('style1_1');
let style1_2 = document.getElementById('style1_2');
let style1_3 = document.getElementById('style1_3');
let style1_4 = document.getElementById('style1_4');
let style1_5 = document.getElementById('style1_5');
let style2_1 = document.getElementById('style2_1');
let style2_2 = document.getElementById('style2_2');
let style2_3 = document.getElementById('style2_3');
let style2_4 = document.getElementById('style2_4');
let style2_5 = document.getElementById('style2_5');
let style3_1 = document.getElementById('style3_1');
let style3_2 = document.getElementById('style3_2');
let style3_3 = document.getElementById('style3_3');
let style3_4 = document.getElementById('style3_4');
let style3_5 = document.getElementById('style3_5');
switch(pId)
{
case 0:
getElements('style1_1','style1_3','style1_4');
break;
case 1:
getElements('style2_1','style2_2','style2_5');
break;
case 2:
getElements('style3_3','style3_1','style3_2');
break;
}
}
//用止函數(shù)可以對多個id獲取元素
function getElements(){
//創(chuàng)建一個空的對象來保存結(jié)果
let elements = {};
//arguments.length表示函數(shù)參數(shù)個數(shù)
for(let i=0;i<arguments.length;i++){
let id = arguments[i];
let elt = document.getElementById(id);
if(elt ===null){
throw new Error("No element with id:"+id);
}
elements[id]=elt;
}
for(let key in elements){
elements[key].style.backgroundColor ='#ccc'
}
}
// **************************對name操作部分**************************************************
// 對name為password的操作
function passSet(){
let pass = document.getElementsByName('password')[0];
pass.style.backgroundColor = 'yellow';
}
//對name為username的元素操作
function userNameSet(){
let username = document.getElementsByName('username');
for (var i = username.length - 1; i >= 0; i--) {
username[i].style.backgroundColor = 'yellow';
}
}
// ****************************對標簽操作部分**************************************************
function tagSet(tagname){
let tag=document.getElementsByTagName(tagname)
let tagLeng=tag.length;
for (var i = tagLeng - 1; i >= 0; i--) {
switch(tagname){
case 'form':
tag[i].style.backgroundColor = '#B452CD'
break;
case 'input':
tag[i].style.backgroundColor = '#A6A6A6'
break;
case 'button':
tag.item(i).style.backgroundColor = '#9932CC'
break;
case 'span':
tag[i].style.backgroundColor = '#76EE00'
break;
case 'body':
tag[i].style.backgroundColor = '#0000EE'
break;
}
}
}
// *******************************對類名操作部分************************************************
let setClassUl = document.getElementsByClassName('ulClass');
function setUlClass(classid){
switch(classid){
case 0:
setClassUl[0].style.backgroundColor = 'red';
break;
case 1:
setClassUl.item(1).style.backgroundColor = 'blue';
break;
case 2:
for (var i = setClassUl.length - 1; i >= 0; i--) {
setClassUl[i].style.backgroundColor = '#ff6700'
}
break;
}
}
function setLiClass(classid){
let list1=setClassUl[0].getElementsByClassName('style1_1');
let list2=setClassUl[1].getElementsByClassName('style2_1');
let list3 = document.getElementsByClassName('style3_1');
switch(classid){
case 0:
for (var i = list1.length - 1; i >= 0; i--) {
list1[i].style.backgroundColor = '#ccc'
}break;
case 1:
for (var i = list2.length - 1; i >= 0; i--) {
list2[i].style.backgroundColor ='#668B8B';
}break;
case 2:
for (var i = list3.length - 1; i >= 0; i--) {
list3[i].style.backgroundColor = '#7FFF00';
}
break;
}
}
</script>
</body>
</html>
添削の先生：天蓬老師添削時間：2019-01-04 16:03:50
先生のまとめ：作業(yè)完成的相當?shù)木? 對于選擇器的總結(jié)也非常的到位, 看來是用心了, js中的幾個重要的dom元素, 例如 document對象,它上面的常用屬性和方法, 非常多,更多內(nèi)容,可以參考mdn網(wǎng)站