JavaScript中几个操作元素对象的函数方法

JavaScript016

JavaScript中几个操作元素对象的函数方法,第1张

1、getElementById(id)方法

JavaScript中的getElementById中的方法,将返回一个与它有着相同ID属性元素节点的对应对象。这里值得注意的是getElementById写法一定要注意大小写,否则会出错。

getElementById()是document对象的特有函数,它只有一个参数值:如果你想获得某个ID属性元素的值,那么它的写法如下

类似语法:

document.getElementById(ID)

2、getElementsByTagName(tag)方法

getElementsByTagName()方法返回一个对象数组,这个对象数组中的每一个对象对应着文档里有着给定标签的一个元素。

类似语法:

document.getElementsByTagName(tag)

例子:

如果想获取对象中所有的"li"标签

document.getElementsByTagName("li")

这个调用将返回一个对象数组,数组中的每一个对象分别对应里document文档中的一个列表元素(li标签)。关于这个对象数组的操作方法和其它数组一样,要以使用数组的"length"属性。

代码如下:

for(var i=0i < document.getElementsByTagName("li").lengthi++){

    //这里是操作方法

    alert(typeof document.getElementsByTagName("li")[i])

}

3、getElementsByClassName(class)方法

getElementsByClassName()是HTML5中新增的方法,在一些老式的浏览器中不支持此方法,所有使用时要注意!

getElementsByClassName()和上面的二个函数方法一样,结合document(文档对象)使用。

类似语法:

document.getElementsByClassName(class)

1、当元素绑定class样式

<div id="d1" class="red">hello</div>

此时可以通过改变class,去修改元素样式:

document.getElementById("d1").className="green"

2、当元素使用直接样式,即

<div id="d1" style="color:red">hello</div>

document.getElementById("d1").style.color="green"