----------------------------class-------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bigger{
font-size: 34px;
}
</style>
</head>
<body>
<div class="div1 div2 bigger" id="ID">
hello
<div>hello2</div>
<p>hello p</p>
</div>
<script>
var ele=document.getElementById("ID");
// alert(ele.className)
// ele.classList.add("bigger")
ele.classList.remove("bigger");
</script>
</body>
</html>
----------------------CSS样式------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bigger{
font-size: 40px;
color: #84a42b;
}
.small{
font-size: 10px;
color: rebeccapurple;
}
</style>
</head>
<body>
<div id="div1">fhslajkdfhsdjfsdasadfhlakjsdfhkjl</div>
<input type="button" onclick="change('bigger')" value="big">
<input type="button" onclick="change('small')" value="small">
<script>
function change(a) {
var ele=document.getElementById("div1");
ele.classList.add(a);
}
</script>
</body>
</html>
------------------------DOM Tree-------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<div id="div1">
<div>hello div </div>
<p>hello p</p>
</div>
<script>
var ele=document.getElementById("div1");
var ele2=ele.firstChild;
alert(ele2.nodeName);
var ele3=ele.lastChild;
alert(ele3.nodeName);
var ele3=ele.childNodes;
alert(ele3.length);
var ele3=ele.parentNode;
alert(ele3.nodeName);
console.log(ele.nodeName);
console.log(ele.nodeType);
console.log(ele.nodeValue);
// 推荐方式
var ele=document.getElementById("div1");
var ele_son=ele.firstElementChild;
alert(ele_son.nodeName)
var ele_son=ele.lastElementChild;
alert(ele_son.nodeName);
var ele_sons=ele.children;
alert(ele_sons.length);
alert(ele_sons[0]);
for (var i=0;i<ele_sons.length;i++){
console.log(ele_sons[i])
}
var ele=document.getElementById("div1").firstElementChild;
var sib=ele.nextElementSibling;
alert(sib.nodeName);
//这些属性是为了对文档树进行导航;
</script>
</body>
</html>