1 DOM简介
1.1 定义
DOM就是文档对象模型，是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容样式和结构。
1.2 DOM树
- 文档(document)：一个页面就是一个文档
- 元素(element): 页面中所有的标签都是元素
- 节点(node)：网页中所有的内容都是节点(标签节点、属性节点、文本节点、注释节点等)
- DOM把以上内容看作是对象
2. 获取元素
2.1 获取元素的方法：
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
（ps:访问https://developer.mozilla.org/zh-CN/，输入对应的方法名进行查找,可以获得该方法的使用方法）
2.2 根据ID获取
getElementById()
使用getElementById()方法可以获取带有ID的元素对象
- 说明：Document的方法 getElementById()返回一个匹配特定 ID的元素. 由于元素的 ID 在大部分情况下要求是独一无二的，这个方法自然而然地成为了一个高效查找特定元素的方法。
- 语法：
var element = document.getElementById(id);参数：id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.
返回值：返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。
- 举例：
<body>
<div id="time">2019-9-9</div>
<script>
//1. 因为文档是从上往下加载，所以先得有标签 所以script写道下面来了
//后面有解决方案可以将script提上去，这个后面再说
//2. get获取 element 元素 by 通过
//3. 参数id是大小写敏感的字符串
//4. 返回值的一个element(元素)对象
var timer = document.getElementById("time");
console.log(timer); //<div id="time">2019-9-9</div>
console.log(typeof timer); //object
//5. console.dir 打印返回的元素对象 更好地查看里面的属性和方法
console.dir(timer); //div#time里面含有很多方法
</script>
</body>2.3 根据标签名获取某些元素
getElementsByTagName()
使用getElementsByTagName()方法可以返回带有指定标签的对象的集合。
- 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
- 得到元素对象是动态的：返回的列表是动态的，这意味着它会随着DOM树的变化自动更新自身。所以，使用相同元素和相同参数时，没有必要多次的调用Element.getElementsByTagName()。
<body>
<ul>
<li>知否知否，应是等你好久1</li>
<li>知否知否，应是等你好久2</li>
<li>知否知否，应是等你好久3</li>
<li>知否知否，应是等你好久4</li>
<li>知否知否，应是等你好久5</li>
</ul>
<ul id="nav">
<li>生僻字1</li>
<li>生僻字2</li>
<li>生僻字3</li>
<li>生僻字4</li>
<li>生僻字5</li>
</ul>
<script>
//得到所有的li
//1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis); //HTMLCollection(5) [li, li, li, li, li]
console.log(lis[0]); //<li>知否知否，应是等你好久1</li>
//2. 依次打印里面的元素对象可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
//得到生僻字所有的li
//3. element.getElementsByTagName()可以得到这个元素里面的某些标签。搜索从element开始。请注意只有element的后代元素会被搜索，不包括元素自己。
//不一定非要写document.xxx。document开头是只从文档里开始向下查找子标签
var nav = document.getElementById('nav'); //获得Nav元素
var navLis = nav.getElementsByTagName('li');
console.log(navLis); //TMLCollection(5) [li, li, li, li, li]
</script>
</body>