用JavaScript修改HTML标签属性

转载自：http://www.java3z.com/cwbwebhome/article/article9/ht30.html

 

 HTML DOM 对象

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

<img id="myimg" src="./image/2.jpg" width="120"border="0">

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

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

DOM 对象的属性通常与相应的 HTML标签的属性相对应，名字通常也是相同的，但 DOM对象的属性需区分大小写。比如border 属性可以用在 <img>、<table> 等几种标签中，则对应的Image 对象、Table 对象等 DOM 对象也拥有 border属性，取值方法也相同。

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

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

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

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

  对象的获取

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

1、用 id 获取 DOM 对象：

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

document.getElementByIdx( id )

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

document.getElementByIdx( 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_r( tagname )

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

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

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

  设置或修改标签的属性

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

DOM对象.属性名 = 值;

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

例1：

<img id="image1" src="./image/2.jpg"border="0">
<buttononclick="setBorder(0)">border="0"</button>
<buttononclick="setBorder(1)">border="1"</button>
<buttononclick="setBorder(3)">border="3"</button>
<buttononclick="setBorder(8)">border="8"</button>

<script type="text/javascript">
function setBorder( n )
{
        document.getElementByIdx("image1" ).border = n;
}
</script>

效果为：

border="0" border="1" border="3" border="8"

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

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

在按钮中，利用事件句柄 onclick 响应鼠标单击事件，调用JS 函数 setBorder()。

在 setBorder() 函数中，利用 document.getElementByIdx("image1") 方法获取 <img> 标签对应的Image对象，并为它的 border 属性设置新值。

例2：

<marqueeid="Mar">欢迎光临！</marquee>
<p><buttononclick="setDir()">改变方向</button></p>

<script type="text/javascript">
var dir = "left";
function setDir()
{
        dir= (dir=="left") ? "right" : "left";
        document.getElementByIdx("Mar" ).direction = dir;
}
</script>

效果为：

欢迎光临！

改变方向

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

<marquee> 标签没有指定 direction 属性时，其默认值为“left”。利用JS 程序可以修改它的值。

例3：

<input type="checkbox" name="cb"onclick="Count()">1
<input type="checkbox" name="cb"onclick="Count()">2
<input type="checkbox" name="cb"onclick="Count()">3
<input type="checkbox" name="cb"onclick="Count()">4
<p><input type="text"id="res"></p>

<script type="text/javascript">
function Count()
{
        vari = 0;
        varobs = document.getElementsByName( "cb" );
        for(k = 0; k<obs.length; k++ )
        {
                if(obs[k].checked ) i++;
        }
        document.getElementByIdx("res" ).value = "已选择："+i+"个";
}
</script>

效果为：

 1    2    3    4

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

各复选框使用了相同的 name 属性，在JS 函数中，用 document.getElementsByName("cb") 方法可以获得这个复选框组成的数组。利用下标访问数组中的对象。

当复选框被选中时，它的 checked 属性为 true，否则为 false。利用循环检查各复选框的 checked 属性，统计其中值为true 的复选框个数。

说明：为了区分这一组复选框，在网页中不能再有其它标签的name 属性设置为“cb”。

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

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

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

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

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

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

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

例1：

<div id="box" style="color:red;border:1px solidblue">&nbsp;</div>
<buttononclick="setBox1()">&nbsp;1&nbsp;</button>
<buttononclick="setBox2()">&nbsp;2&nbsp;</button>
<buttononclick="setBox3()">&nbsp;3&nbsp;</button>

<script type="text/javascript">
function setBox1()
{
        document.getElementByIdx("box" ).innerHTML = "欢迎光临！";
}
function setBox2()
{
        document.getElementByIdx("box" ).innerHTML ="<h1>欢迎光临！</h1>";
}
function setBox3()
{
        document.getElementByIdx("box" ).innerHTML = '<imgsrc="./image/2.jpg">';
}
</script>

效果为：

 

 1  ??  2  ??  3 

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

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

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

例2：

<a id="a1" href="http://www.bttc.cn/"target="_blank">包头师范学院</a>
<p>
<button onclick="setLink();this.disabled=true">修改链接</button>
</p>
<script type="text/javascript">
function setLink()
{
        document.getElementByIdx("a1" ).href = "http://www.163.com/";
        document.getElementByIdx("a1" ).innerHTML = "网易";
}
</script>

效果为：

包头师范学院

修改链接

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

在 JS 程序中，document.getElementByIdx( "a1").href 属性对应的是 <a> 标签的 href 属性，document.getElementByIdx("a1").innerHTML 属性对应的是 <a> 标签包含的内容。

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

#Js