為什么要獲取頁面元素？
例如：我們想要操作頁面上的某部分(顯示/隱藏，動畫)，需要先獲取到該部分對應的元素，再對其進行操作。
1.3.1. 根據ID獲取
語法：document.getElementById(id)
作用：根據ID獲取元素對象
參數：id值，區分大小寫的字符串
返回值：元素對象 或 null
案例代碼
<body>
<div id="time">2019-9-9</div>
<script>
// 因為我們文檔頁面從上往下加載，所以先得有標簽 所以我們script寫到標簽的下面
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// console.dir 打印我們返回的元素對象 更好的查看里面的屬性和方法
console.dir(timer);
</script>
</body>
1.3.2. 根據標簽名獲取元素
語法：document.getElementsByTagName('標簽名') 或者 element.getElementsByTagName('標簽名')
作用：根據標簽名獲取元素對象
參數：標簽名
返回值：元素對象集合（偽數組，數組元素是元素對象）
案例代碼
<body>
<ul>
<li>知否知否，應是等你好久11</li>
<li>知否知否，應是等你好久22</li>
<li>知否知否，應是等你好久33</li>
<li>知否知否，應是等你好久44</li>
<li>知否知否，應是等你好久55</li>
</ul>
<ul id="nav">
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
<li>生僻字</li>
</ul>
<script>
// 1.返回的是 獲取過來元素對象的集合 以偽數組的形式存儲的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我們想要依次打印里面的元素對象我們可以采取遍歷的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. element.getElementsByTagName() 可以得到這個元素里面的某些標簽
var nav = document.getElementById('nav'); // 這個獲得nav 元素
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>
注意：getElementsByTagName()獲取到是動態集合，即：當頁面增加了標簽，這個集合中也就增加了元素。
1.3.3. H5新增獲取元素方式
1. document.getElementsByClassName(‘類名’)；// 根據類名返回元素對象集合
2. document.querySelector('選擇器'); // 根據指定選擇器返回第一個元素對象
3. document.querySelectorAll('選擇器'); // 根據指定選擇器返回
案例代碼
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首頁</li>
<li>產品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根據類名獲得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定選擇器的第一個元素對象 切記 里面的選擇器需要加符號 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定選擇器的所有元素對象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
</body>
1.3.4 獲取特殊元素（body，html）
// 1.獲取body 元素
var bodyEle = document.body;
console.log(bodyEle);
console.dir(bodyEle);
// 2.獲取html 元素
// var htmlEle = document.html;
var htmlEle = document.documentElement;
console.log(htmlEle);