一.DOM编程与BOM编程
简介
DOM：Document Object Model(文档对象模型，对网页中的文档对象进行增删改查)，HTML文档被当做一颗DOM树来看待。
BOM：Browser Object Model(浏览器对象模型，打开新的浏览器窗口，前进，后退，浏览器上的地址栏等)
联系与区别
DOM的顶级对象是document
BOM的顶级对象是window
BOM包含DOM
二.DOM
通过DOM,可以做下面的事情：
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找HTML：
- 通过 id 找到 HTML 元素(getElementById)
- 通过标签名找到 HTML 元素(getElementsByTagName)
- 通过类名找到 HTML 元素(getElementsByClassName)
三.DOM HTML
改变HTML内容
方法一：`document.getElementById(id).innerHTML=新的 HTML`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
#div1{
background-color:bisque;
width:500px;
height:500px;
}
</style>
</head>
<body>
<script type = "text/javascript">
window.onload = function(){
var divElt = document.getElementById("button1");
divElt.onclick = function(){
document.getElementById("div1").innerHTML = "<font color = 'blue'>Hello World</font>";
}
}
</script>
<input type = "button" id = "button1" value = "点击我"/><br/><br/>
<div id = "div1"></div>
</body>
</html>
点击后变成了
方法二：document.getElementById(id).innerText=新的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
#div1{
background-color:bisque;
width:150px;
height:150px;
}
</style>
</head>
<body>
<script type = "text/javascript">
window.onload = function(){
var divElt = document.getElementById("button1");
divElt.onclick = function(){
//document.getElementById("div1").innerHTML = "<font color = 'blue'>Hello World</font>";
document.getElementById("div1").innerText = "<font color = 'blue'>Hello World</font>";
}
}
</script>
<input type = "button" id = "button1" value = "点击我"/><br/><br/>
<div id = "div1"></div>
</body>
</html>
可以看到两种方法都可以改变网页内容，但是innerText只能完全按照文本格式显示，不会解析HTML代码。但是innerHTML会解析HTML代码。
改变HTML属性
语法：document.getElementById(id).attribute=新属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
#div1{
background-color:bisque;
width:500px;
height:500px;
}
</style>
</head>
<body>
<script type = "text/javascript">
window.onload = function(){
var divElt = document.getElementById("button1");
divElt.onclick = function(){
document.getElementById("div1").value = "aaaaaaaaaaa";
}
}
</script>
<input type = "button" value = "设置文本框" id = "button1"/>
<br/><br/>
<input type = "button" id = "div1">
</body>
</html>
可以看到属性值value改变了。
四.DOM CSS
语法：
document.getElementById(id).style.property=新样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
#div1{
background-color:bisque;
width:150px;
height:150px;
}
</style>
</head>
<body>
<script type = "text/javascript">
window.onload = function(){
var divElt = document.getElementById("button1");
divElt.onclick = function(){
document.getElementById("div1").value = "aaaaaaaaaaa";
}
var divElt2 = document.getElementById("button2");
divElt2.onclick = function(){
document.getElementById("div1").style.backgroundColor = "blue";
}
}
</script>
<input type = "button" value = "设置文本框" id = "button1"/>
<input type = "button" value = "设置颜色" id = "button2">
<br/><br/>
<input type = "button" id = "div1">
</body>
</html>
我们在之前的例子中加入一个按钮，通过点击按钮可以改变样式
点击过后，颜色变成如下的样式
