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()是标准规范下提供的获取最终样式的方法,最终样式即包括行间样式和非行间样式,因此可通过这种方法来完成需求。其语法格式如下。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注