摘要：總結(jié)：進(jìn)度太慢了，感覺動(dòng)力不足。。代碼：一。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><ul id="
總結(jié)：
進(jìn)度太慢了，感覺動(dòng)力不足。。
代碼：
一。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="lists">
<li id="item1">列表項(xiàng)01</li>
<li>列表項(xiàng)02</li>
<li id="item2">列表項(xiàng)03</li>
<li>列表項(xiàng)04</li>
<li id="item3">列表項(xiàng)05</li>
</ul>
<script>
//使用id屬性獲取元素
let item1 = document.getElementById('item1');
let item2 = document.getElementById('item2');
let imte3 = document.getElementById('item3');
item1.style.backgroundColor = 'yellow';
item2.style.backgroundColor = "yellow";
item3.style.backgroundColor = "yellow";
function getElements(){
let elements = {}; //創(chuàng)建一個(gè)空的map 映射
for(let i=0; i<arguments.length; i++){
let id=arguments[i];
let element = document.getElementById(id);
if(element == null){
throw new Error("No element with id: " + id);
}
elements[id] = element;
}
return elements;
}
let elements = getElements('item1', 'item2', 'item3');
for(let key in elements){
elements[key].style.backgroundColor = "green";
}
</script>
</body>
</html>
二。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>根據(jù)name屬性獲取元素</title>
</head>
<body>
<!-- 擁有name屬性的元素 常見的有： 表單，以及表單中的元素， 圖像以及內(nèi)聯(lián)框架 -->
<!-- form, input, img, iframe -->
<form action="" name="login">
<input type="text" name="username">
<input type="password" name="password">
<button name="button">提交</button>
</form>
<script>
// getElementsByName() 返回的是一個(gè) NodelList 節(jié)點(diǎn)列表， 不只是一個(gè)元素
let login = document.getElementsByName('username')[0];
console.log(document.getElementsByName('username'));
//輸出結(jié)果：NodeList(1)
login.style.backgroundColor = "coral";
document.login.style.backgroundColor = "red";
console.log(document.login);
//輸出結(jié)果：整個(gè)form元素
</script>
</body>
</html>
三。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用標(biāo)簽名和name屬性選擇的快捷方式</title>
</head>
<body>
<img src="inc/1.jpg" alt="" name=pic>
<form action="" name="register">
<input type="text" placeholder="用戶名">
<input type="password" placeholder="密碼不少于8位">
<button>提交</button>
</form>
<p><a href="ipnx.cn" name="php">php中文網(wǎng)</a></p>
<script>
//根據(jù)name標(biāo)簽名和name 屬性選擇元素的快捷方式： 僅適用于極少的幾個(gè)，這是歷史原因造成的
//images： 所有的 <img> 元素
document.images[0].style.width = "400px";
document.images['pic'].style.width = "200px";
document.images.pic.style.width = "300px";
document.images.item(0).style.width = "100px";
//forms：所有的 <forms> 元素、表單、數(shù)組
document.forms[0].style.backgroundColor = "yellow"; //標(biāo)簽索引
document.forms.item(0).style.backgroundColor = "red";
document.forms['register'].style.backgroundColor = "green"; //name 屬性
document.forms.register.style.backgroundColor = "lightgreen"; //將name視為元素對(duì)象的屬性進(jìn)行訪問
document.links[0].style.color = "red";
document.links.item(0).style.backgroundColor = "yellow";
document.links['php'].style.color = "black";
document.links.php.style.backgroundColor = "red";
document.body.style.backgroundColor = "#ff6700";
let style = document.createElement('style');
document.head.appendChild(style);
//documentElement: <html> 元素,總有定義，同樣一個(gè)頁面只有一個(gè)
console.log(document.documentElement);
//doctype: 文檔類型，同樣也只有一個(gè)
console.log(document.doctype);
</script>
</body>
</html>
四。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>通過class屬性選擇元素</title>
</head>
<body>
<ul>
<li>列表項(xiàng)01</li>
<li>列表項(xiàng)02</li>
<li>列表項(xiàng)03</li>
<li>列表項(xiàng)04</li>
<li class="yellow large">列表項(xiàng)05</li>
</ul>
<script>
//CSS屬性選擇元素
// let red = document.getElementsByClassName('red')[0];
// red.style.backgroundColor = "red";
// //該方法可以在父元素上調(diào)用
// document.getElementsByClassName('ul')[0]
// .getElementsByClassName('blue')[0]
// .style.backgroundColor = "blue";
// //支持多個(gè)class 屬性值
// let large = document.getElementsByClassName('yellow large')[0];
// large.style.backgroundColor = "coral";
// large.style.fontSize = '1.5rem';
//CSS選擇器獲取元素
let lists = document.querySelectorAll('li');
console.log(lists); //返回節(jié)點(diǎn)列表元素
lists[0].style.backgroundColor = "coral";
lists[1].style.backgroundColor = "red";
//還可以獲取class 或 id 名
let ul = document.querySelector('.ul'); //獲取滿足條件的第一個(gè)元素
ul.style.color = "yellow";
let li = ul.querySelectorAll('.blue');
for(let i=0; i<li.length; i++){
li[i].style.backgroundColor = "lightblue";
}
</script>
</body>
</html>
批改老師：查無此人批改時(shí)間：2019-03-16 09:35:16
老師總結(jié)：完成的不錯(cuò)。就是看著有點(diǎn)亂。 js獲取標(biāo)簽，是最基礎(chǔ)的知識(shí)。繼續(xù)加油