JavaScript 操纵css样式

HTML DOM 对象

 

从 JavaScript 的观点来看,网页上的每个 HTML 标签都是一个 DOM 对象,标签的属性也是 DOM 对象的属性。如:

从 JavaScript 的观点来看,这个 标签是一个 Image 对象,它是 DOM 对象的一种。它的 id、src、width、border 属性的值已经指定,其它属性采用默认值。

利用 JavaScript 程序可以访问 DOM 对象,实际上就是用程序访问一个 HTML 标签。你可以通过编程修改一个 DOM 对象的属性,也就是用程序修改一个 HTML 标签的属性,使标签变得可控。

DOM 对象的属性通常与相应的 HTML 标签的属性相对应,名字通常也是相同的,但 DOM 对象的属性需区分大小写。比如 border 属性可以用在

等几种标签中,则对应的 Image 对象、Table 对象等 DOM 对象也拥有 border 属性,取值方法也相同。

有个别 DOM 属性的名字和 HTML 标签的属性名字不同,但它们实际上是同一个属性。比如 HTML 标签的 class 属性对应的 DOM 属性是 className (注意大小写)。这是因为 class 是 JavaScript 保留字,而属性名是不能和保留字同名的。

还有一些 DOM 属性没有与之对应的 HTML 属性,比如 innerHTML 是一个 DOM 属性,它代表的是一个标签所包含的内容。利用这个属性可以修改一个 HTML 的开始标签和结束标签之间的内容。但对于 等单个标签,它所对应的 Image 对象没有 innerHTML 属性。

另外,DOM 对象还提供有方法,可以在程序中调用。

实际上,DOM 对象不是 JavaScript 特有的对象,它是一种跨平台的对象,有很多语言都提供了对 DOM 对象的访问支持。JavaScript 只是其中之一。

 

对象的获取

 

用 JavaScript 设置或修改一个 HTML 标签的属性时,首先要做的是获取这个标签所对应的 DOM 对象。常用的方法有:

1、用 id 获取 DOM 对象:

如果一个标签设置了 id 属性,我们可以利用 id 值访问这个标签,它的 JavaScript 代码代码为:

document.getElementById( id )

document 是一个 BOM 对象,它代表了当前的 HTML 文档;getElementById 是 Document 对象的一个方法;id 是网页中某个 HTML 标签的 id 属性值。

document.getElementById( id ) 的返回值是一个对象型数据,也就是一个 DOM 对象。

2、用 name 获取 DOM 对象:

如果一个标签设置了 name 属性,我们可以利用 name 值访问这个标签,它的 JavaScript 代码代码为:

document.getElementsByName( name )

说明:在一个网页中,如果为标签设置 id 属性,则各个标签的 id 属性值不能相同,如果为标签设置 name 属性,则一个网页中可以有多个 name 属性值相同的标签。

所以 document.getElementsByName( name ) 的返回值不是单一的对象,而是一个 DOM 对象数组,它包含了本页中所有 name 值相同的那些标签。

3、用标签名获取 DOM 对象:

我们可以直接用标签名访问指定标签,它的JavaScript代码代码为:

document.getElementsByTagName( tagname )

说明:由于在一个网页中,同一种标签可以出现多次,所以 document.getElementsByTagName( tagname ) 的返回值也是一个 DOM 对象数组,它包含了本页中指定种类的所有标签。

比如:document.getElementsByTagName( "img" ) 返回的是一个 Image 对象数组,每个元素对应于网页中的一个 标签,数组中的元素按 标签出现的顺序排列。

比较以上三种方法,document.getElementById( id ) 是最好的也是最快的方法,它可以直接访问到网页中一个指定的 HTML 标签,这也是我们今后最常使用的方法。

 

设置或修改标签的属性

 

获取了一个 DOM 对象之后,我们可以为该对象的属性进行赋值,从而修改了它所对应标签的属性值。一般方法是:

DOM对象.属性名 = 值;

DOM 对象的属性名通常和HTML标签的属性名相同,但它要区分大小写,所以在书写时要特别注意。

例1:







设置或修改标签中包含的内容

在那些有开始标签和结束标签的 HTML 标签中,开始标签和结束标签之间的内容就是标签所包含的内容。

利用JavaScript可以重新设置或修改一个标签所包含的内容。有两种方法:

DOM对象.innerHTML = 文本串;
DOM对象.innerText = 文本串;

DOM 对象的 innerHTML 属性和 innerText 属性中存放的就是它对应的 HTML 标签包含的内容。当你修改它时,这个标签中包含的内容也就修改了。

这两个属性的区别在于:innerHTML 属性的值是代码串,如果其中含有 HTML 标签,它们会作为标签被解释。innerText 属性的值是纯文本,如果其中含有 HTML 标签,也会作为字符显示出来,不会被当作标签解释。

注意:赋值的文本串必须写在一行中,中间不能用回车断开。

例1:

 





效果为:

 

 

1 ??2 ??3

本例可以通过按钮设置

标签的内容。

在 JS 程序中,通过为 document.getElementById( "box" ).innerHTML 属性设置值来修改标签中包含的文本。

注意:在 setBox3() 函数中,由于文本串中包含有双引号,必须用单引号进行分界。

例2:

包头师范学院




效果为:

包头师范学院

修改链接

本例定义了一个超链接,利用按钮可以修改链接的文本和目的地址。

在 JS 程序中,document.getElementById( "a1" ).href 属性对应的是 标签的 href 属性,document.getElementById( "a1" ).innerHTML 属性对应的是 标签包含的内容。

注意一个小细节,当单击“修改链接”按钮后,这个按钮就变得不可用了。这个功能是通过按钮中的 οnclick="setLink(); this.disabled=true" 实现的。也就是说,在一个事件句柄的取值中,可以包含多个 JS 语句,它们之间用“;”分界。

你可能感兴趣的:(Web前端,JavaScript,CSS,HTML,编程)