JavaScript 实战详解，自学第二天时，我们已经了解了JavaScript的编程基础， DOM（Document Object Model，文档对象模型），是W3C组织推荐处理可扩展标记语言（HTML或XML）的标准编程接口（API）。通俗地说，可通过DOM操作获取或设置HTML或CSS。那今天我们主要学习DOM入门的相关内容，即如何通过DOM获取网页中的HTML元素，并设置相关的CSS样式。

如何通过JavaScript获取到网页中的元素？首先需要了解document文档，document文档指整个页面的根对象（最外层对象），通过document文档获取到页面中的具体HTML元素。注意document文档的类型为对象类型，即typeof document返回object值，因此，通常document文档亦称document对象。document文档页面的最外层如图所示。

在学习DOM获取HTML中指定的标签元素前，先来思考如何实现CSS样式，可以通过给元素添加id属性，然后通过id选择器进行样式的设置，具体示例代码如下：

DOM操作也可以通过添加id的方式获取和设置指定的HTML元素，通过document对象下的getElementById()方法实现。通过单词拼写可直观的发现getElementById()方法即用id的方式获取元素，具体示例如下：

把id值通过字符串形式放入到此方法的小括号中，即可以获取到div元素，通过查看类型，可以发现也属于对象类型，所以说对象是一个及其强大的数据类型，表示各种值组成的集合。

注意，在获取元素时，一定要保证html标签加载完毕后再获取，否则可能获取不到目的元素。

只获取到元素本身并不能对其属性进行操作，可以通过点的方式来获取到元素身上的属性，具体示例代码如下：

这里需要注意class属性，因为class属于JavaScript中的保留字，所以不能通过class的方式获取，而需要通过className的语法形式获取。与class属性类似的还有for属性，需要通过htmlFor的方式获取。

除了获取外，也可以对元素的属性进行设置，接下来通过案例演示修改元素title属性。具体案例详情参考3.1.3。

在前面的小节中，讲解了DOM操作HTML元素的属性，同样对HTML元素的style属性也能够获取和设置，接下来通过案例演示调试获取style属性中的样式，具体如例3.2.1所示。

在style属性下操作多组样式，需要一行行设置，操作起来比较烦琐。DOM提供了cssText属性，可用来一次性设置多组CSS样式，注意cssText属性是在style对象的下面，具体示例代码如下。

运行结果和图3.6一样，从上例可以发现，cssText中样式的写法与CSS样式的写法类似，通过冒号和分号进行操作，设置简单明了。注意，当出现多个cssText属性时，后面的cssText会覆盖前面整个cssText中的样式。

3.2.2节中获取和设置的样式，都是通过style属性完成，操作都是在行间完成，对于非行间样式并不可用，具体示例代码如下：

style属性只能获取到行间样式，并不能获取到style标签中的非行间样式，因此，返回结果并没有值，而是返回空字符串。可以发现，这对于开发并不是特别方便，如需要获取非行间中的样式，DOM如何操作？

window.getComputedStyle()是标准规范下提供的获取最终样式的方法，最终样式即包括行间样式和非行间样式，因此可通过这种方法来完成需求。其语法格式如下。