Document对象
Document 对象表示浏览器加载的 HTML 页面，并作为查找 HTML 页面内容的入口。它提供了全局函数，例如如何从 HTML 页面中查找指定标签或者在 HTML 页面中如何创建标签等。
document对象代码：
#document <html lang = "en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> console.log(document); </script> </body> <html>
DOM查询（获取元素节点）
通过标签的id属性值获取
语法结构：
document.getElementById( id属性值 )
例：
<div id="box"></div> let box = document.getElementById("box"); console.log( box ); // <div id="box"></div>
通过标签的class属性值获取
语法结构：
document.getElementsByClassName( class属性值 )
例：
<div class="box"></div> let box = document.getElementsByClassName("box"); console.log( box ); // [div.box] console.log( box[0] ); // <div class="box"></div>
通过标签名获取
语法结构：
document.getElementsByTagName( 标签名 )
例：
<div></div> let divEle = document.getElementsByTagName("div"); console.log( divEle ); // [div] console.log( divEle[0] ); // <div></div>
通过标签的 name 属性值获取
语法结构：
1 document.getElementsByName( name属性值 )
例：
1 <input type="text" name="username"> 2 let divEle = document.getElementsByName("username"); 3 console.log( divEle ); // [input] 4 console.log( divEle[0] ); // <input type="text" name="username">
通过 CSS 选择器⽅式获取
在 HTML5 新特性中提供了两个可以通过 CSS 选择器方式来获取 HTML 页面标签的方法： querySelector()
返回第一个选择器匹配的 HTML 页面元素。
1 <div class="box"></div> 2 <div class="box"></div>
1 var boxEle = document.querySelector(".box"); 2 console.log( boxEle ); // <div class="box"></div>
1 querySelectorAll()
返回全部选择器匹配的 HTML 页面元素。
1 <div class="box"></div> 2 <div class="box"></div> 1 var boxEle = document.querySelectorAll(".box"); 2 console.log( boxEle ); // [div.box, div.box]
注意：这两个方法只能在 IE8 之后的版本才执行
总结
DOM 查询方法我们大致可以分为以下两类：
传统方 式： getElementById 、 getElementsByClassName 、 getElementsByTagName 、 getElementsByName
优点：性能好、查询速度快
缺点：使⽤麻烦
HTML5 新增： querySelector 、 querySelectorAll
优点：使用便捷
缺点：性能差、查询速度慢
