abstract：<!DOCTYPE html><html> <head> <title>DOM</title> </head> <body> <div id="elem"></div> <div class ="str"></d
<!DOCTYPE html>
<html>
<head>
<title>DOM</title>
</head>
<body>
<div id="elem"></div>
<div class ="str"></div>
<div class ="str"></div>
<ul id="ul">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
<img name="pic" src="">
<form>
<input type="text" name="input">
</form>
<a name="link" href="">link</a>
</body>
<script>
//通過(guò)元素id值獲取唯一元素
let elem=document.getElementById('elem');
elem.style.width='200px';
elem.style.height='30px';
elem.style.background='#ff6100';
//通過(guò)類(lèi)名獲到元素集合
let str=document.getElementsByClassName('str');
console.log(str);
//指定第一個(gè)
str.item(0).style.width='300px';
str.item(0).style.height='300px';
str.item(0).style.background="green";
str.item(1).style.width='300px';
str.item(1).style.height='300px';
str.item(1).style.background="red";
//通過(guò)標(biāo)簽名
let tag=document.getElementsByTagName('li');
for(var i=0;i<tag.length;i++){
tag[i].style.background="pink";
}
//通過(guò)js CSS選擇器
let que=document.querySelectorAll('li') //返回?cái)?shù)組;
console.log(que);
//通過(guò)id獲取唯一值
let ul=document.querySelector('#ul');
ul.style.background='green';
let li=ul.querySelectorAll('li')
for(var i=0;i<li.length;i++){
li[i].style.background='blue';
}
//通過(guò)images name屬性
document.images['pic'].style.width="100px";
document.images['pic'].style.height="100px";
document.images['pic'].style.background="#e0e0e0";
document.images['pic'].style.border="none";
//通過(guò)form索引方法
document.forms[0].style.background="red"
//鏈接links,作為對(duì)象的link屬性
document.links.link.style.background="green";
</script>
</html>
Correcting teacher：查無(wú)此人Correction time：2019-06-10 09:49:58
Teacher's summary：完成的不錯(cuò)，下次把代碼縮進(jìn)對(duì)齊，繼續(xù)加油