1、DOM简介
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找HTML元素
（1）通过id查找
getElementById()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html dom</title>
</head>
<body>
<div>
<p id="first">hello world</p>
</div>
<script>
x=document.getElementById("first");
document.write("通过id查找："+x.innerHTML);
</script>
</body>
</html>
hello world
通过id查找：hello world
（2）通过标签名查找
getElementByTagName()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html dom</title>
</head>
<body>
<div id="first">
<p>hello world</p>
<p>这是我的第一个网页</p>
</div>
<script>
var x=document.getElementById("first");
var v=x.getElementsByTagName("p");//找到所有的p标签
document.write("通过标签名查找到："+v[1].innerHTML);//所有p标签中的第二个
</script>
</body>
</html>
（3）通过类名查找
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html dom</title>
</head>
<body>
<div class="first">
<p>hello</p>
</div>
<script>
var x=document.getElementsByClassName("first");
document.write("通过类名查找："+x[0].innerHTML);
</script>
</body>
</html>
hello
通过类名查找：
hello
2、改变HTML内容
（1）改变HTML输出流
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html dom</title>
</head>
<body>
<p id="date">今天的日期是：</p>
<script>
document.write(Date())
</script>
</body>
</html>
今天的日期是：
Sat Jul 23 2022 09:54:05 GMT+0800 (中国标准时间)
（2）改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html dom</title>
</head>
<body>
<p id="first">hello world</p>
<script>
document.getElementById("first").innerHTML="hello javascript";
</script>
</body>
</html>
（3）改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=新属性值
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
3、改变CSS
（1）改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=新样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html dom</title>
</head>
<body>
<p id="p1">hello world</p>
<p id="p2">hello js</p>
<script>
document.getElementById("p2").style.color="red";
</script>
</body>
</html>
（2）使用事件
HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：
元素被点击。
页面加载完成。
输入框被修改。……
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html dom</title>
</head>
<body>
<p id="p1">hello world</p>
<button type="button" onclick="document.getElementById('p1').style.color='red'">click</button>
</body>
</html>
4、DOM事件
（1）对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
使用函数：
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html dom</title>
<script>
function change(id)
{
id.innerHTML="hello js";
id.style.color="red";
}
</script>
</head>
<body>
<p onclick="change(this)">hello world</p>
<!--可以把JS函数放在这里-->
</body>
</html>
（2）HTML 事件属性
如需向 HTML 元素分配 事件，您可以使用事件属性。
<button onclick="displayDate()">点这里</button>
（3）使用 HTML DOM 来分配事件
HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html dom</title>
</head>
<body>
<p id="p1">hello world</p>
<script>
document.getElementById("p1").onclick=function change(){changeColor(this)};
function changeColor(id)
{
id.style.color='red';
}
</script>
</body>
</html>
（4）onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
在body属性里
<body onload="checkCookies()">
（5）onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html dom</title>
</head>
<body>
<input type="text" id="fname" onchange="upperCase()">
<script>
function upperCase()
{
var x=document.getElementById('fname');
x.value=x.value.toUpperCase();//修改值
}
</script>
</body>
</html>
（6）onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html dom</title>
<style>
#d1{
background-color: antiquewhite;
width:120px;
height:20px;
padding:40px;
}
</style>
</head>
<body>
<div id="d1" onmouseover="mOver(this)" onmouseout="mOut(this)" "></div>
<script>
function mOver(id)
{
id.innerHTML="thank you";
}
function mOut(id)
{
id.innerHTML="mouse over me";
}
</script>
</body>
</html>
还有很多事件，不再举例。
