学习总结之初识DOM篇（1）—— 获取节点元素

本节内容

• 简单的认识一下DOM是什么
• JavaScript中非常重要的三种对象类型
• 获取DOM元素的方法及存在的兼容性问题
• 娱乐封装获取元素方法的集成函数

一、初识DOM

DOM：Document Object Model 文档对象模型

 DOM是一个对象，同时是一个宿主对象，是由浏览器提供的一个能够操作文档结构的对象。

DOM存在的目的

1. DOM是浏览器提供的一系列操作HTML和XML方法的对象，使得JavaScript可以对页面的文档结构进行操作修改。
2. DOM本身是无法直接操作CSS样式表的，但是添加内联样式修改元素样式

二、JavaScript中的三种对象（重要）

由ECMAScript提供的对象

本地对象『Native Object』

Object Boolean Number Array Function
Error TypeError SyntaxError RangeError ReferenecError TypeError URIError
Date RegExp

内置对象 『Build-In Object』

由ECMAScript提供的对象

Global 全局对象的全称
全局方法 -> isNaN parseInt parseFloat ...
全局属性 -> undefined NaN Infinity
数学对象 -> Math

宿主对象 『Host object』

由浏览器提供的对象

执行JS脚本的环境提供的对象/浏览器对象 -> 存在兼容性问题
不同浏览器提供的相同方法的实现方式可能不一样，因此会存在方法、属性的兼容性问题

浏览器对象 -> BOM和DOM对象
DOM对象其实是BOM对象中的一部分，但DOM对象是在W3C规范中具有定义的

三、获取元素的方法

根据元素标签获取元素：getElementsByTagName

  getElementsByTagName这个方法存在于两个原型对象上：① Document.prototype文档对象的原型对象上 ② HTMLElement.prototypeHTML元素对象的原型对象上。
 元素对象（如HTMLDivElement）的原型对象继承于HTMLElement对象，因此元素对象可以使用到HTMLElement.prototype上的方法，同理document的原型对象为HTMLDocument对象，继承于Document.prototype对象。
 getElementsByTagName返回的结果是一个元素集合HTMLCollection，查找到是调用此方法的元素下所有匹配标签的元素。

根据元素类名获取元素：getElementsByClassName

 与getElementsByTagName类似，不再重复，我们直接来说用法：getElementsByClassName是获取到调用该方法元素下的所有匹配类名的元素集合。注意：在IE8及以下版本是没有getElementsByClassName这个方法的，因此getElementsByClassName方法是存在兼容性问题的。

根据name属性与id属性获取元素：getElementById与getElementsByName

 两者与上述提到的类名、标签选择元素不同的是：这两个方式是只属于文档对象的方法，元素是无法使用这两个方法的。同时本节的getElementById元素获取方法返回的是单独的一个元素，而非元素集合。当页面上出现相同id的元素时，获取到的是其中的第一个元素。而getElementsByName返回的元素不再是元素集合，而是节点集合NodeList，不过此方法非常不实用，了解即可。
 注意：getElementById也是有兼容性问题的：在IE8及以下的浏览器不区分id的大小写、在IE8以下的浏览器中使用getElementById可以获取到name属性等于匹配值的元素。

query系列之：querySelector与querySelectorAll

 这两种方法大家想必使用的也比较多，因为写起来比较短一些，且拼写难度也比上述的方法简单。query系列方法实际上比getElementsByClassName更早出现，也就是说这两个方法的兼容性比getElementsByClassName更好，但是他是在HTML5才引入的WebApi，两个方法使用的方式很类似，传入类似CSS选择器的参数来获取元素，querySelector是获取第一个匹配到的元素，querySelectorAll获取的是所有匹配的元素。
 注意：query系列存在两个缺陷：①性能差于其他选择元素的方法 ②不实时，存在缓存。性能弱于其他方法这个缺点在现在高性能计算机面前已经可以忽略了。真正意义上的缺陷是第二个不实时的问题。

四、简单封装获取元素的通用函数

 如果觉得document.getElementsByClassName或是document.getElementsByTagName写起来繁琐，也可以封装一个集成的获取元素的函数方法。可以模仿jQuery和querySelector的形式，传入一个类似css选择器的参数名，根据第一个字符来判断所要获取的元素信息。
 不过讲实话，这个封装的集成函数并不实用，仅供参考。

五、总结

 我认为DOM属于JavaScript中非常重要也比较难学的部分，也不是说难掌握，主要是知识点太多了，比如页面的各种尺寸属性以及其兼容性问题、兼容性写法，事件类型、事件绑定的兼容性等等，高级的内容如用户鼠标行为预测、高效的元素替换方法模板替换等。因此我认为有必要将DOM学到的知识内容进行一次复习，且通过文章的方式进行记录，也通过自己举例子、讲解给读者或笔者自己听来提高对DOM这一块知识的掌握度。
 感谢您阅读到这，我是Donp1，下次见🐻‍❄️。