一、关于DOM
DOM全称为document object model（文本对象模型）， 当网页被加载时，浏览器会创建页面的文档对象模型，即dom元素。
document对象指的是所有的html对象，通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
二、DOM获取元素
在获取元素的时候需要注意获取的元素是否初始化
1.getElementsByClassName 通过类名称获取
获取出来的对象是集合类型，也可以说是数组类型 ，class可以绑定多个元素，由于获取到的是集合类型，就有相关属性，例如 length 代表长度。
eg：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button class=btn>按钮</button>
<script>
var btn=document.getElementsByClassName("btn");//获取网页中的按钮并进行初始化
console.log(btn)
</script>
</body>
</html>运行结果：
通过控制台输出的结果可以看到获取到的是数组。
2.getElementById 通过id获取
获取到的是唯一元素
eg：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">按钮</button>
<script>
var btn=document.getElementById("btn");//获取网页中的按钮并进行初始化
console.log(btn)
</script>
</body>
</html>运行结果：
通过控制台输出的结果可以看到获取到的是单个元素。
3.getElementsByName 通过元素的name名称获取
eg：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button name="btn">按钮1</button>
<button name="btn">按钮2</button>
<button name="btn">按钮3</button>
<script>
var btn=document.getElementsByName("btn");//获取网页中的按钮并进行初始化
console.log(btn)
</script>
</body>
</html>运行结果：
通过输出结果我们可以看到，网页中所有name名称相同的元素均会被获取，得到的是数组类型。
4.getElementsByTagName 通过元素的标签名称获取
eg：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button name="btn">按钮</button>
<span>abc</span>
<script>
var aa=document.getElementsByTagName("span");
console.log(aa);
</script>
</body>
</html>运行结果：
通过输出结果可以看到，getElementsByTagName是通过元素标签名称获取元素的，获取到的是数组类型。
三、DOM获取到元素之后操作元素
1.JavaScript 能够创建动态的 HTML 内容
在JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
eg：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
document.write(Date());//Data()指当前时间
</script>
</body>
</html>运行结果：
可以看到HTML body元素中没有写内容，输出内容是由document.write()直接向HTML输出流写入内容。
2.JavaScript 能够修改 HTML 内容
最简单的方法时使用 innerHTML 属性。
注意：如果需要使用innerHTML 属性，在获取元素不能使用getElementsByClassName。
eg：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="tex">HELLO WORLD</span>
<script>
document.getElementById("tex").innerHTML="HOW ARE YOU";
</script>
</body>
</html>运行结果：
根据代码可以看出，<span>输出的文本为HELLO WORLD，后面代码改变了<span>输出的内容。
3.JavaScript 能够修改 HTML 元素属性
语法：document.getElementById(id).attribute=new value
eg：改变<img>标签中的src属性，即改变图片。
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="img" src="../img/img1.jpg">
<script>
document.getElementById("img").src="../img/img2.jpg";
</script>
</body>
</html>4.JavaScript 能够修改 css样式
语法：document.getElementById(id).style.property=new style
eg：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#ss{
width: 100px;
height: 100px;
background-color: palevioletred;
}
</style>
</head>
<body>
<div id="ss"></div>
<script>
document.getElementById("ss").style.backgroundColor="red";
</script>
</body>
</html>运行结果：
