摘要：總結(jié)：--------------------------------------------------------使用id屬性獲取元素id屬性需要在Document文檔節(jié)點(diǎn)對(duì)象中引用語(yǔ)法：document.getElementById('id名稱')可以直接獲取到id元素并設(shè)置樣式，比如：document.getElementById('id名稱').style
總結(jié)：
--------------------------------------------------------
使用id屬性獲取元素
id屬性需要在Document文檔節(jié)點(diǎn)對(duì)象中引用
語(yǔ)法：document.getElementById('id名稱')
可以直接獲取到id元素并設(shè)置樣式，比如：document.getElementById('id名稱').style.color="red"
也可以把document.getElementById('id名稱')賦值給變量，使用變量設(shè)置樣式，比如：變量名.getElementById('id名稱').style.color="red"
-----------------------------------------------------------
根據(jù)name屬性來(lái)獲取元素，
返回一個(gè)元素集合,有l(wèi)ength屬性,可以當(dāng)數(shù)組來(lái)訪問
擁有name屬性的元素并不多,最常見的就是表單,以及表單中的元素,另外還有圖像和內(nèi)聯(lián)框架,
語(yǔ)法：document.getElementsByName('name名')
返回的是數(shù)組
獲取單個(gè)name的案例：
let login3 = document.getElementsByName('login')[1]; //獲取到第2個(gè)name名為login的元素
login3.style.backgroundColor = 'green'; //并設(shè)置背景顏色
如果多個(gè)同名的name設(shè)置同一樣式使用for循環(huán)遍歷：
let login = document.getElementsByName('login'); //獲取name名為login的元素，返回的是數(shù)組
for(let i=0;i<login.length; i++){ //使用for循環(huán)遍歷整個(gè)name名為login的長(zhǎng)度值
login[i].style.backgroundColor = 'yellow'; //設(shè)置樣式
}
-------------------------------------------------------------------
根據(jù)標(biāo)簽名Tag來(lái)獲取元素
getElementsByTagName(),根據(jù)標(biāo)簽名稱獲取元素,返回一個(gè)元素集合,有l(wèi)ength屬性,可以當(dāng)數(shù)組來(lái)訪問
設(shè)置單個(gè)標(biāo)簽名案例：寫法1（使用數(shù)組下標(biāo)）
let ul = document.getElementsByTagName('ul')[0]; //獲取文檔中第一個(gè)ul標(biāo)簽
ul.style.backgroundColor = 'lightgreen';
設(shè)置單個(gè)標(biāo)簽名案例：寫法2 使用item()也可以獲取指定元素
let ul1 = document.getElementsByTagName('ul').item(0); //獲取文檔中第一個(gè)ul標(biāo)簽
ul1.style.backgroundColor = 'lightblue';
獲取所有同名元素時(shí)，使用for循環(huán)遍歷：
let lists = document.getElementsByTagName('li'); //獲取所有的標(biāo)簽名為li 的元素
for (let i = 0; i < lists.length; i++) { //遍歷li元素的長(zhǎng)度
lists[i].style.backgroundColor = 'red'; //所有的li元素設(shè)置背景色
}
-----
getElementsByTagName()不僅在document文檔節(jié)點(diǎn)對(duì)象上有定義,在Element元素節(jié)點(diǎn)對(duì)象上也有定義
但是在父元素上調(diào)用該方法，先找到父級(jí)然后在找到第幾個(gè)標(biāo)簽來(lái)設(shè)置。
案例：
let ul2 = document.getElementsByTagName('ul').item(0); // 獲取ul 文檔對(duì)象中第一個(gè)ul
item2.style.backgroundColor = 'green'; //設(shè)置樣式
-----------------------------------------------------------------------------------------
使用標(biāo)簽名和name屬性選擇的快捷方式
據(jù)name標(biāo)簽名和name屬性選擇元素的快捷方式:僅適用于極少的幾個(gè):
<img>圖片使用：images
<forms>表單使用：forms
<a>元素私用：links
他們都有三種訪問方式：
方法1、標(biāo)簽索引 document.images[0].style.width = '200px'; //使用標(biāo)簽下標(biāo)索引設(shè)置第一個(gè)圖片的大小
方法2、name 屬性 document.images['pic'].style.width = '200px'; //查找圖片的name名為pic的的img標(biāo)簽，設(shè)置大小
方法3、將name視為元素對(duì)象的屬性進(jìn)行訪問 document.images.pic.style.width = '300px'; //設(shè)置元素對(duì)象行為pic的img標(biāo)準(zhǔn)
方法4、數(shù)組可用item()方法獲取某個(gè)元素document.images.item(0).style.width = '300px'; //設(shè)置第一個(gè)img圖片
<forms>表單使用：forms 都可以使用上面4種寫法
<a>元素私用：links 都可以使用上面4種寫法
-----------
body元素、 head元素、html元素、doctype標(biāo)簽，同一個(gè)界面有一個(gè)，也可以使用name快捷屬性獲?。?/p>
// body: <body>元素,總有定義,只有一個(gè)
document.body.style.backgroundColor = 'wheat'; //設(shè)置網(wǎng)頁(yè)的背景色
-----
// head: <head>元素,總有定義,不寫會(huì)自動(dòng)添加,只有一個(gè)
let style = document.createElement('style'); //在head中添加style元素
document.head.appendChild(style);
-----
// documentElement: <html>元素,總有定義,同樣一個(gè)頁(yè)面只有一個(gè)
console.log(document.documentElement); //在控制臺(tái)中輸出html元素內(nèi)容
-----
// doctype: 文檔類型,同樣也只有一個(gè)
console.log(document.doctype); //在控制臺(tái)中輸出Doctype文檔類型
------------------------------------------------------------------------------------------------------
通過(guò)class屬性選取元素
返回一個(gè)html元素集合,與根據(jù)標(biāo)簽名獲取的返回?cái)?shù)據(jù)類型完全一樣，,有l(wèi)ength屬性,可以當(dāng)數(shù)組來(lái)訪問。
getElementsByClassName('class名')
根據(jù)元素的class屬性值獲取元素語(yǔ)法：
let red = document.getElementsByClassName('class名'') //獲取class屬性
red[0].style.backgroundColor = 'red'; //設(shè)置第一個(gè)class
也可以直接寫多個(gè)class屬性
let large = document.getElementsByClassName('class名'')[0] //獲取第一個(gè)class名為coral large的屬性
large.style.backgroundColor = 'coral'; //設(shè)置多個(gè)樣式
large.style.fontSize = '1.5rem';
獲取同名class可使用for循環(huán)遍歷：
let lists = document.getElementsByClassName('class名'); //獲取class名
for (let i = 0; i < lists.length; i++) { //遍歷整個(gè)class
lists[i].style.backgroundColor = 'red'; //設(shè)置整個(gè)class名
同時(shí)class屬性選中元素，也支持在父元素上調(diào)用
document.getElementsByClassName('父級(jí)class名').item(0)
.getElementsByClassName('子class名').item(0)
.style.backgroundColor = 'green'; //設(shè)置子元素的背景色
--------------------------------------------------------------------------------
使用css選擇器來(lái)獲取元素
返回一個(gè)html元素集合,,有l(wèi)ength屬性,可以當(dāng)數(shù)組來(lái)訪問。
JS支持CSS選擇器
document.querySelectorAll('標(biāo)簽名')
document.querySelectorAll('.class名')
document.querySelectorAll('#id名')
訪問方法1：
當(dāng)數(shù)組索引訪問：document.querySelectorAll('標(biāo)簽名')[0].style.backgroundColor="red"; //索引標(biāo)簽名第一個(gè)元素設(shè)置背景色
document.querySelectorAll('標(biāo)簽名').item(0).style.backgroundColor="red"; //同上
該方法還可以在元素上調(diào)用,這也根據(jù)標(biāo)簽和class類名獲取元素是一樣的
querySelector('CSS選擇器') 獲取滿足條件的第一個(gè)元素 等同于querySelectorAll('CSS選擇器')[0]
案例：
let ul = document.querySelector('#ul'); // 獲取滿足條件的第一個(gè)元素
let li = ul.querySelectorAll('.green'); //獲取滿足條件的第一個(gè)元素（父元素）下的所有class名為.green的元素
for (let i = 0; i < li.length; i++) { //選好遍歷class名為.green的元素的長(zhǎng)度
li[i].style.backgroundColor = 'green'; //使用數(shù)組索引下標(biāo)方法設(shè)置背景色
}
--------------------------------------------------------------
除了使用id屬性獲取元素以外，其他的根據(jù)name屬性來(lái)獲取元素、根據(jù)標(biāo)簽名Tag來(lái)獲取元素、使用標(biāo)簽名和name屬性選擇的快捷方式、
通過(guò)class屬性選取元素、使用css選擇器來(lái)獲取元素 都是返回一個(gè)html元素集合,,有l(wèi)ength屬性,可以當(dāng)數(shù)組來(lái)訪問。
訪問方法：可以根據(jù)索引下標(biāo)[0]來(lái)查找位置，或者使用.item(0)來(lái)獲取位置，使用for循環(huán)遍歷通條件的元素。
批改老師：韋小寶批改時(shí)間：2019-03-09 13:32:20
老師總結(jié)：寫的非常不錯(cuò) 很詳細(xì) 每個(gè)方法歸納的都很到位