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>

.list{

400px;

position: absolute;

left: -400px;

top: 0;

transition: all 2s;

}

.listOut{

400px;

position: absolute;

left: 0px;

top: 0;

transition: all 2s;

}

.list img{

400px;

}

.btn{

position: absolute;

left: 20px;

top: 20px;

z-index: 1;

}

</style>

</head>

<body>

</div>

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>