摘要： //根據(jù)name標(biāo)簽名和name屬性選擇元素的快捷方式:僅適用于極少的幾個(gè),這是歷史原因造成的 // images: 所有的<img>元素 圖像,數(shù)組, 有三種訪問方式 document.images[0].style.width = '200px';
//根據(jù)name標(biāo)簽名和name屬性選擇元素的快捷方式:僅適用于極少的幾個(gè),這是歷史原因造成的
// images: 所有的<img>元素 圖像,數(shù)組, 有三種訪問方式
document.images[0].style.width = '200px'; // 1.標(biāo)簽索引
document.images['pic'].style.width = '200px'; // 2.name 屬性
document.images.pic.style.width = '300px'; // 3.將name視為元素對(duì)象的屬性進(jìn)行訪問
// forms: 所有的<forms>元素 表單,數(shù)組
document.forms[0].style.backgroundColor = 'lightgreen';
document.forms['register'].style.backgroundColor = 'lightblue';
document.forms.register.style.backgroundColor = 'red';
document.forms.item(0).style.backgroundColor = 'lightgreen'; // 類數(shù)組可用item()方法獲取某個(gè)元素
//a 鏈接: 所有的<a>元素,NodeList 數(shù)組
document.links[0].style.backgroundColor = 'yellow';
document.links['php'].style.backgroundColor = 'red';
document.links.php.style.backgroundColor = 'green';
// body: <body>元素,總有定義,只有一個(gè)
document.body.style.backgroundColor = 'wheat';
// head: <head>元素,總有定義,不寫會(huì)自動(dòng)添加,只有一個(gè)
let style = document.createElement('style');
document.head.appendChild(style);
// .red 獲取 class="red"的元素,其實(shí)js也支持使用css選擇器獲取元素
let lists = document.querySelectorAll('li');
console.log(lists); //返回節(jié)點(diǎn)列表數(shù)組,里面每個(gè)元素對(duì)應(yīng)一個(gè)元素
//可以使用
lists[0].style.backgroundColor = 'coral';
lists.item(1).style.backgroundColor = 'lightblue';
//該方法還可以在元素上調(diào)用,這也根據(jù)標(biāo)簽和class類名獲取元素是一樣的
let ul = document.querySelector('#ul'); // 獲取滿足條件的第一個(gè)元素
console.log(ul); // 只返回ul列表元素以及內(nèi)部子元素
let li = ul.querySelectorAll('.green');
for (let i = 0; i < li.length; i++) {
li[i].style.backgroundColor = 'green';
}
批改老師：天蓬老師批改時(shí)間：2018-12-30 13:41:12
老師總結(jié)：其實(shí), jQuery中的選擇器, 底層代碼 , 就是用這幾個(gè)方法來實(shí)現(xiàn)的, 是不是很方便呢?