返回DOM文档对象......登陆

DOM文档对象模型笔记

肖凌2019-06-08 10:41:43122

<!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>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网