1、什么是DOM树？

浏览器加载HTML页面时，首先是DOM结构的计算，计算出的DOM结构是DOM树(

DOM树描述标记和标记之间的关系(节点之间的关系)，只要您知道其中一个标记，就可以根据DOM提供的属性和方法来获取页面中的任何其他标记或节点。

2、通过JS获取DOM元素的方法

1 ) getElementById

a、根据元素的ID获取指定的元素对象，使用时均为document.getElementById (‘ ‘ )，这里的document限定了获取元素的范围，将其称为“上下文[context]”

b、getElementById的上下文只有文档

严格来说，每个页面的ID是不可重复的，因此浏览器可以在整个文档中获取此唯一的ID。

如果页面中的Id重复，则此方法只能获取第一个元素，而不能获取后续的相同Id元素。

c、Ie6-7浏览器使用表单元素input的名称属性值作为id。 今后使用表单元素时，建议不要与name发生id值冲突。 ）

2 ) getElementsByTagName

context ].getelementsbytagname ——在指定的上下文中基于标记名称获取一组元素集合HTMLCollection

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

b、在当前上下文中获取后代、孙子、后代层次中的所有标记。 (要取得的不仅是儿子级别) ) ) ) )。

c、基于该方法获取的东西总是一个集合，无论里面是否有内容，以及是否有几个项目，它都是容器或集合。 如果想操作集合中的具体项目，需要根据索引获取

3 ) getElementsByClassName

context ].getelementsbyclassname’在指定的上下文中基于元素的样式类名(class=‘XXX’)获取元素的集合。 在实际的项目中，由于通常根据样式类设置元素的样式，因此JS经常根据样式类检索元素，但这种方法是ii

4 ) getElementsByName

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

在IE浏览器(IE9以下)中，只对表单元素的name元素起作用(在我们的项目中，通常只对表单元素设置name，而对非表单元素设置name，实际上并不规范)。

5 )查询选择器

[context].querySelector () ——在指定的上下文中基于选择器(类似于CSS选择器)获取指定的元素对象，并指定多个选择器

6 ) querySelectorAll

基于查询选择器，选择器检索了所有匹配的元素。 结果是节点的集合

querySelector、querySelectorAll都与IE6-8浏览器不兼容(不考虑兼容性时，可以通过byid或其他方法获取，也尽量不使用这两种方法。 这两种方法性能消耗很大)。

文档. Queryselectorall ((# box )；

文档. Queryselectorall；

文档. Queryselectorall ([名称=“主机”) )；

7 )文档.头

获取头元素对象

8 )文档.主体

获取实体元素对象

9 )文档.文档元素

获取HTML元素对象

扩展//=要求：获取浏览器的单个屏幕的宽度和高度(与所有浏览器兼容)

文档.文档元素.客户端宽度| |文档.主体.客户端宽度

文档.文档元素.客户端| |文档.主体.客户端