从javascript的观点来看，网页上的每个html标签都是一个html dom对象，标签的属性也是html dom对象的属性。如：

从javascript的观点来看，这个 <img> 标签是一个 class=c4>image 对象，它是html dom对象的一种。它的 id、src、width、border

属性的值已经指定，其它属性采用默认值。

利用javascript程序可以访问html dom对象，实际上就是用程序访问一个html标签。你可以通过编程修改一个html

dom对象的属性，也就是用程序修改一个html标签的属性，使标签变得可控。

html dom对象的属性通常与相应的html标签的属性相对应，名字通常也是相同的，但html dom对象的属性需区分大小写。比如 class=c4>border 属性可以用在 <img>、class=c4><table> 等几种标签中，则对应的 image 对象、table 对象等html dom对象也拥有 border

属性，取值方法也相同。

有个别html dom属性的名字和html标签的属性名字不同，但它们实际上是同一个属性。比如html标签的 class=c4>class 属性对应的html dom属性是 classname

（注意大小写）。

还有一些html dom属性没有与之对应的html属性，比如 innerhtml 是一个html

dom属性，它代表的是一个标签所包含的内容。利用这个属性可以修改一个html的开始标签和结束标签之间的内容。但对于 class=c4><img> 等单个标签，它所对应的 image 对象没有 class=c4>innerhtml 属性。

另外，有些html dom对象还提供有方法，可以在程序中调用。

实际上，html dom对象不是javascript对象，它是一种跨平台的对象，有很多语言都提供了对html

dom对象的访问支持。javascript只是其中之一。

用javascript设置或修改一个html标签的属性时，首先要做的是获取这个标签所对应的html dom对象。常用的方法有：

1、用 id 获取html dom对象：

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

document.getelementbyid( id )

document 是一个javascript对象，它代表了当前的html文档；class=c4>getelementbyid 是document对象的一个方法；id

是网页中某个html标签的 id 属性值。

document.getelementbyid( id ) 的返回值是一个对象型数据，也就是一个html

dom对象。

2、用 name 获取html dom对象：

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

document.getelementsbyname( name )

说明：在一个网页中，如果为标签设置 id 属性，则各个标签的 id 属性值不能相同，如果为标签设置 name

属性，则一个网页中可以有多个 name 属性值相同的标签。

所以 document.getelementsbyname( name )

的返回值不是单一的对象，而是一个html dom对象数组，它包含了本页中所有 name 值相同的那些标签。

3、用标签名获取html dom对象：

我们可以直接用标签名访问指定标签，它的javascript代码代码为：

document.getelementsbytagname( tagname )

说明：由于在一个网页中，同一种标签可以出现多次，所以 class=c4>document.getelementsbytagname( tagname ) 的返回值也是一个html

dom对象数组，它包含了本页中指定种类的所有标签。

比如：document.getelementsbytagname( "img" ) 返回的是一个 image

对象数组，每个元素对应于网页中的一个 <img> 标签，数组中的元素按 class=c4><img> 标签出现的顺序排列。

比较以上三种方法，document.getelementbyid( id )

是最好的也是最快的方法，它可以直接访问到网页中一个指定的html标签，这也是我们今后最常使用的方法。

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

html dom对象.属性名 = 值;

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

例1：

效果为：

border="0"  onclick=setborder(1)>border="1"  onclick=setborder(3)>border="3"  onclick=setborder(8)>border="8"

本例可以通过按钮修改 <img> 标签的 border

属性的值。

首先，为了可以访问这个 <img> 标签，为它定义了 class=c4>id="image1" 属性。

在按钮中，利用事件句柄 onclick 响应鼠标单击事件，调用 js 函数 class=c4>setborder()。

在 setborder() 函数中，利用 class=c4>document.getelementbyid( "image1" ) 方法获取 class=c4><img> 标签对应的 image 对象，并为它的 border

属性设置新值。

例2：

效果为：

欢迎光临！

改变方向

本例利用按钮修改 <marquee> 标签的 class=c4>direction 属性的值。

<marquee> 标签没有指定 direction

属性时，其默认值为“left”。利用 js 程序可以修改它的值。

例3：

效果为：

1   onclick=count() type=checkbox name=cb>2   type=checkbox name=cb>3   name=cb>4

本例定义了四个复选框，当选中或取消选择时，文本框中显示出选中的复选框个数。

各复选框使用了相同的 name 属性，在 js 函数中，用 class=c4>document.getelementsbyname( "cb" )

方法可以获得这个复选框组成的数组。利用下标访问数组中的对象。

当复选框被选中时，它的 checked 属性为 true，否则为

false。利用循环检查各复选框的 checked 属性，统计其中值为

true 的复选框个数。

说明：为了区分这一组复选框，在网页中不能再有其它标签的 name

属性设置为“cb”。

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

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

html dom对象.innerhtml = 文本串;

html dom对象.innertext = 文本串;

html dom对象的 innerhtml 属性和 class=c4>innertext 属性中存放的就是它对应的html标签包含的内容。当你修改它时，这个标签中包含的内容也就修改了。

这两个属性的区别在于：innerhtml

属性的值是代码串，如果其中含有html标签，它们会作为标签被解释。innertext

属性的值是纯文本，如果其中含有html标签，也会作为字符显示出来，不会被当作标签解释。

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

例1：

效果为：

 1   onclick=setbox2()> 2   onclick=setbox3()> 3 

本例可以通过按钮设置 <div id="box"> 标签的内容。

在 js 程序中，通过为 document.getelementbyid( "box" ).innerhtml

属性设置值来修改标签中包含的文本。

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

例2：

效果为：

网易

修改链接

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

在 js 程序中，document.getelementbyid( "a1" ).href 属性对应的是

<a> 标签的 href 属性，class=c4>document.getelementbyid( "a1" ).innerhtml 属性对应的是 class=c4><a> 标签包含的内容。

注意一个小细节，当单击“修改链接”按钮后，这个按钮就变得不可用了。这个功能是通过按钮中的 class=c4>onclick="setlink(); this.disabled=true"

实现的。也就是说，在一个事件句柄的取值中，可以包含多个 js 语句，它们之间用“;”分界。