virtual DOM和真实DOM的区别_前端系列——DOM树以及DOM常用方法

1、什么是DOM树？

当浏览器加载HTML 页面的时候，首先就是DOM结构的计算，计算出来的DOM 结构就是DOM 树(把页面中的HTML标签像树的结构一样，分析出之间的层级结构关系)

DOM树描述了标签与标签之间的关系(节点间的关系)，我们只要知道任何一个标签，都可以依据DOM中提供的属性和方法，获取到页面中任意另一个标签或者节点。

2、在JS中获取DOM元素的方法

1)getElementById

a、通过元素的ID获取指定的元素对象，使用的时候都是document.getElementById('')，此处的document是限定了获取元素的范围，我们把它称之为“上下文[context]”；

b、getElementById的上下文只能是document

因为严格意义上每一个页面上的ID是不能重复的，浏览器规定在整个文档中可以获取这个唯一的Id。

如果页面中的Id重复了，我们基于这个方法只能获取到第一个元素，后面相同的ID元素无法获取。

c、在Ie6-7浏览器中，会把表单元素input的name属性值当做id来使用(建议：以后使用表单元素时，不要让name和id的值有冲突)

2)getElementsByTagName

[context].getElementsByTagName——在指定的上下文中，根据标签名获取到一组元素集合(HTMLCollection)

a、获取的元素是一个类数组(不能直接的使用数组中的方法)，每一项对应的是一个元素对象(有一些自己的内置属性)

b、它会把当前上下文中，子子孙孙(后代)层级内的标签都获取到(获取的不仅是儿子级的)

c、基于这个方法获取到的永远都是一个集合(不管里面是否有内容，也不管有几项，它是一个容器或者集合)，如果想操作集合中具体的某一项，需要基于索引获取到才可以

3)getElementsByClassName

[context].getElementsByClassName’在指定的上下文中，基于元素的样式类名(class=‘xxx‘)获取到一组元素集合. 真实项目中，我们经常是基于样式类给元素设置样式，所以在JS中，我们也会经常基于样式类来获取元素，但是此方法在IE6-8下不兼容。

4)getElementsByName

document.getElementsByName() 它的上下文也只能是document，在整个文档中基于元素的name属性值获取一组节点集合(也是一个类数组)。

在IE浏览器当中(IE9及以下)，只对表单元素的name元素起作用(正常来说，我们项目中只会给表单元素设置name，给非表单元素设置name，其实是一个不太符合规范的操作)。

5)querySelector

[context].querySelector()——在指定的上下文中基于选择器(类似于CSS选择器)获取到指定的元素对象(获取的是一个元素，哪怕选择器匹配了多个，我们只获取第一个)

6)querySelectorAll

在querySelector的基础上，我们获取到选择器匹配的所有元素，结果是一个节点集合

querySelector、querySelectorAll都是不兼容IE6-8浏览器的(不考虑兼容的情况下，我们能用byid或者其他方法获取到，也尽量不要用这两个方法，这两个方法性能消耗较大)。

document.querySelectorAll(‘#box’);

document.querySelectorAll(‘.box’);

document.querySelectorAll(‘[name=”hobby”]’);

7)document.head

获取head元素对象

8)document.body

获取body元素对象

9)document.documentElement

获取HTML元素对象

扩展：//=>需求：获取浏览器一屏幕的宽度和高度(兼容所有的浏览器)

document.documentELement.clientWidth || document.body.clientWidth

document.documentELement.clientHeight || document.body.clientHeight