什么是DOM对象？DOM对象其实就是一棵由元素对象组成的大树。另外要特别强调一点，浏览器解析网页的顺序是从上到下的。所以有时要注意js代码与被控制元素对象的前后关系。处理DOM对象时，要确保网页完全加载后再执行，这一点至关重要，因为网页没有加载完的话，那么DOM对象就不会存在，因为它是一棵大树，树还没长成自然就不会有DOM对象啦。拥有DOM对象你可以做以下几件事：
1.获取内容（文件或HTML）
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First JavaScript</title>
</head>
<body>
<p id="pid">Hello world! I am your master!</p>
<script>
var dom = document.getElementById("pid");
//获取内容
alert(dom.innerHTML);
</script>
</body>
</html>
2.修改内容
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First JavaScript</title>
</head>
<body>
<p id="pid">Hello world! I am your master!</p>
<script>
var dom = document.getElementById("pid");
//修改元素内容
dom.innerHTML = "<h1>Green world!</h1>";
//获取内容
alert(dom.innerHTML);
</script>
</body>
</html>
3.添加特性
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First JavaScript</title>
</head>
<style>
.redText{
color:red;
}
</style>
<body>
<p id="pid">Hello world! I am your master!</p>
<script>
var dom = document.getElementById("pid");
//修改元素内容
dom.innerHTML = "<h1>Green world!</h1>";
//给p元素添加一个样式redText
dom.setAttribute("class","redText");
//获取内容
alert(dom.innerHTML);
</script>
</body>
</html>
4.获取特性
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First JavaScript</title>
</head>
<style>
.redText{
color:red;
}
</style>
<body>
<p id="pid">Hello world! I am your master!</p>
<script>
var dom = document.getElementById("pid");
//修改元素内容
dom.innerHTML = "<h1>Green world!</h1>";
//给p元素添加一个样式redText
dom.setAttribute("class","redText");
//获取特性
alert(dom.getAttribute("class" ));
</script>
</body>
</html>
5.修改特性
修改特性其实就是重新设定。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First JavaScript</title>
</head>
<style>
.redText{
color:red;
}
.blueText{
color:blue;
}
</style>
<body>
<p id="pid" onclick="changeColor()">Hello world! I am your master!</p>
<script>
var dom = document.getElementById("pid");
dom.setAttribute("class","redText");
//修改元素内容
dom.innerHTML = "<h1>Green world!</h1>";
//获取内容
alert(dom.innerHTML);
//获取特性
alert(dom.getAttribute("class"));
function changeColor(){
//修改特性
this.dom.setAttribute("class","blueText");
}
</script>
</body>
</html>
6.删除特性
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First JavaScript</title>
</head>
<style>
.redText{
color:red;
}
.blueText{
color:blue;
}
</style>
<body>
<p id="pid" ondblclick="removeAttr()" onclick="changeColor()">Hello world! I am your master!</p>
<script>
var dom = document.getElementById("pid");
dom.setAttribute("class","redText");
//修改元素内容
dom.innerHTML = "<h1>Green world!</h1>";
//获取内容
alert(dom.innerHTML);
//获取特性
alert(dom.getAttribute("class"));
function changeColor(){
//修改特性
this.dom.setAttribute("class","blueText");
}
function removeAttr(){
//删除特性
this.dom.removeAttribute("class");
}
</script>
</body>
</html>
谢谢阅读。