从javascript的观点来看,网页上的每个html标签都是一个html dom对象,标签的属性也是html dom对象的属性。如: <img id="myimg" src="" width="120" border="0"
/> 从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 是一个javascript对象,它代表了当前的html文档;class=c4>getelementbyid 是document对象的一个方法;id 是网页中某个html标签的 id 属性值。 document.getelementbyid( id ) 的返回值是一个对象型数据,也就是一个html dom对象。 2、用 name 获取html dom对象: 如果一个标签设置了 name 属性,我们可以利用 name 值访问这个标签,它的javascript代码代码为:
说明:在一个网页中,如果为标签设置 id 属性,则各个标签的 id 属性值不能相同,如果为标签设置 name 属性,则一个网页中可以有多个 name 属性值相同的标签。 所以 document.getelementsbyname( name ) 的返回值不是单一的对象,而是一个html dom对象数组,它包含了本页中所有 name 值相同的那些标签。 3、用标签名获取html dom对象: 我们可以直接用标签名访问指定标签,它的javascript代码代码为:
说明:由于在一个网页中,同一种标签可以出现多次,所以 class=c4>document.getelementsbytagname( tagname ) 的返回值也是一个html dom对象数组,它包含了本页中指定种类的所有标签。 比如:document.getelementsbytagname( "img" ) 返回的是一个 image 对象数组,每个元素对应于网页中的一个 <img> 标签,数组中的元素按 class=c4><img> 标签出现的顺序排列。 比较以上三种方法,document.getelementbyid( id ) 是最好的也是最快的方法,它可以直接访问到网页中一个指定的html标签,这也是我们今后最常使用的方法。 |
设置或修改标签的属性
|
获取了一个html dom对象之后,我们可以为该对象的属性进行赋值,从而修改了它所对应标签的属性值。一般方法是:
html dom对象的属性名通常和html标签的属性名相同,但它要区分大小写,所以在书写时要特别注意。 例1: <img id="image1" src="/me/images/weblogo.jpg" border="0"
/> onclick="setborder(0)">border="0"</button> onclick="setborder(1)">border="1"</button> onclick="setborder(3)">border="3"</button> onclick="setborder(8)">border="8"</button> type="text/javascript"> ) n; 效果为:
本例可以通过按钮修改 <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
id="mar">欢迎光临!</marquee> onclick="setdir()">改变方向</button></p> type="text/javascript"> setdir() "left"; dir; 效果为:
本例利用按钮修改 <marquee> 标签的 class=c4>direction 属性的值。 <marquee> 标签没有指定 direction 属性时,其默认值为“left”。利用 js 程序可以修改它的值。 例3: <input type="checkbox" name="cb" onclick="count()"
/>1 />2 />3 />4 /></p> count() 0; ); ) obs[k].checked ) i++; "res" ).value = "已选择:"+i+"个"; 效果为: 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 属性和 class=c4>innertext 属性中存放的就是它对应的html标签包含的内容。当你修改它时,这个标签中包含的内容也就修改了。 这两个属性的区别在于:innerhtml 属性的值是代码串,如果其中含有html标签,它们会作为标签被解释。innertext 属性的值是纯文本,如果其中含有html标签,也会作为字符显示出来,不会被当作标签解释。 注意:赋值的文本串必须写在一行中,中间不能用回车断开。 例1: <div id="box" style="color:red;border:1px solid
blue"> </div> onclick="setbox1()"> 1 </button> onclick="setbox2()"> 2 </button> onclick="setbox3()"> 3 </button> type="text/javascript"> setbox1() ).innerhtml = "欢迎光临!"; setbox2() ).innerhtml = "<h1>欢迎光临!</h1>"; setbox3() ).innerhtml = '<img src="/me/images/weblogo.jpg" />'; 效果为:
style="border-right: blue 1px solid; border-top: blue 1px solid; border-left: blue 1px solid; color: red; border-bottom: blue 1px solid">
本例可以通过按钮设置 <div id="box"> 标签的内容。 在 js 程序中,通过为 document.getelementbyid( "box" ).innerhtml 属性设置值来修改标签中包含的文本。 注意:在 setbox3() 函数中,由于文本串中包含有双引号,必须用单引号进行分界。 例2: <a id="a1" href="http://www.bttc.cn/"
target="_blank">包头师范学院</a> onclick="setlink(); this.disabled=true">修改链接</button> type="text/javascript"> setlink() "http://www.163.com/"; ).innerhtml = "网易"; 效果为:
本例定义了一个超链接,利用按钮可以修改链接的文本和目的地址。 在 js 程序中,document.getelementbyid( "a1" ).href 属性对应的是 <a> 标签的 href 属性,class=c4>document.getelementbyid( "a1" ).innerhtml 属性对应的是 class=c4><a> 标签包含的内容。 注意一个小细节,当单击“修改链接”按钮后,这个按钮就变得不可用了。这个功能是通过按钮中的 class=c4>onclick="setlink(); this.disabled=true" 实现的。也就是说,在一个事件句柄的取值中,可以包含多个 js 语句,它们之间用“;”分界。 |