DOM对象
DOM对象
DOM对象，就是HTML页面的文档对象。整个网页的显示，都由Document对象文档对象构成。文档对象又有许多的元素对象构成。文档对象就有许多的属性和方法，用来操纵整个页面的显示，以及事件的处理。所有的元素对象最终组成庞大的dom树。
查找元素对象
|
//ES5以前查找元素的方式 //通过ID查找元素对象 var d1 = document.getElementById("d1") console.log(d1) //通过class查找元素对象 var abc = document.getElementsByClassName('abc') console.log(abc) //通过标签名称查找元素对象 var div = document.getElementsByTagName("div") console.log(div)
//ES5以后的查找方式 //选择单个元素，document.querySelector,选择器的写法，直接使用css选择器的写法,选择器如果能够匹配过个元素，那么只选择第一个元素, var div1 = document.querySelector("div") console.log(div1) var id1 = document.querySelector("#d1") console.log(id1) var abc1 = document.querySelector('body .abc') console.log(abc1)
//选择多个元素,document.querySelectorAll() var abc2 = document.querySelectorAll("#d1") console.log(abc2)
for(var i =0 ;i<abc2.length;i++){ abc2[i].innerHTML +=i abc2[i].style.background="green" } |
设置DOM对象
设置dom对象里面的HTML
|
s1.innerHTML = 'h1{color: red;}'; |
设置dom对象的样式
1、设置样式
//注意：凡是用-拼接的词组，都去掉-,然后首字母改为大写进行拼接成一个单词
//h1.style.background = "skyblue";
//h1.style.background-color = "skyblue"; 错误的
//h1.style.backgroundColor = "skyblue"
2、第二种方式修改dom的样式
//创建style标签，里面写好相对应的样式
|
//创建元素 var s1 = document.createElement("style") //设置s1的innerHTML的内容 s1.innerHTML = 'h1{color: red;}'; //将style元素插入到HTML页面的body里 document.body.appendChild(s1)
|
3、第三种设置dom对象的类名
h1.className = "bgPurple"
列表切换案例：
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
<style type="text/css"> .list{ width: 400px; position: absolute; left: -400px; top: 0; transition: all 2s;
} .listOut{ width: 400px; position: absolute; left: 0px; top: 0; transition: all 2s; } .list img{ width: 400px; } .btn{ position: absolute; left: 20px; top: 20px; z-index: 1; } </style> </head> <body> <div class="main"> <div class="btn">切换</div> <div class="list"> <img src="img/timg.jfif"/> </div> </div>
<script type="text/javascript"> var btn = document.querySelector('.btn') var list = document.querySelector('.list') btn.onclick = function(){ console.log(list.className) if(list.className == "list"){ list.className = "listOut" }else{ list.className = "list" }
} </script> </body> </html> |
