简介
Document Object Model，简称DOM，是W3C组织推荐的处理可扩展标记语言的标准接口，通过DOM接口可以改变网页的内容、结构和样式
DOM树
文档：一个页面就是一个文档，使用document表示元素：标签就是元素，使用element表示
节点：内容就是节点，包括标签、属性、文本、注释，使用node表示
获取元素
获取方式：
- 根据ID获取
- 根据标签名获取
- 通过h5新增的方式获取
- 特殊元素获取
根据ID获取
使用getElementById()方法可以获取带ID的元素
<body>
<div id="div1">abcd</div>
<script>
var a = document.getElementById("div1");
console.log(a);
</script>
</body>
<!--js输出-->
>> <div id="div1">abcd</div>
<!--用console.dir()可以打印返回元素对象，更清楚的看到属性和方法-->根据标签名获取
使用getElementsByTagName()方法可以返回带指定标签的对象的集合
<body>
<div id="div1">abcd</div>
<div id="div1">abcd</div>
<div id="div1">abcd</div>
<div id="div1">abcd</div>
<script>
var a = document.getElementsByTagName('div');
console.log(a);
//以伪数组的形式存储
</script>
</body>
H5新增的方式获取
getElementsByClassName('类名') 根据类名返回元素对象合集
<body>
<div class="box">abcd</div>
<div class="box">abcd</div>
<div class="box">abcd</div>
<div class="box">abcd</div>
<script>
var a = document.getElementsByClassName('box')
console.log(a);
</script>
</body>
querySelector('选择器') 返回指定选择器的第一个元素
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<script>
// var a = document.getElementsByClassName('box')
// console.log(a);
var a = document.querySelector('.box') //选择器需要加符号，类就需要加. id就需要加#
// querySelectorAll可以打印全部
console.log(a);
</script>
</body>
获取特殊标签
例如body和html就属于特殊标签
获取body
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<script>
var a = document.body;
console.log(a);
</script>
</body>
获取html
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<script>
var a = document.documentElement;
console.log(a);
</script>
</body>