DOM文档对象模型笔记
<!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>
//通过元素id值获取唯一元素
let elem=document.getElementById('elem');
elem.style.width='200px';
elem.style.height='30px';
elem.style.background='#ff6100';
//通过类名获到元素集合
let str=document.getElementsByClassName('str');
console.log(str);
//指定第一个
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";
//通过标签名
let tag=document.getElementsByTagName('li');
for(var i=0;i<tag.length;i++){
tag[i].style.background="pink";
}
//通过js CSS选择器
let que=document.querySelectorAll('li') //返回数组;
console.log(que);
//通过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';
}
//通过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";
//通过form索引方法
document.forms[0].style.background="red"
//链接links,作为对象的link属性
document.links.link.style.background="green";
</script>
</html>