提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

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

对象
2023-03-07 09:50:44 时间

JavaScript网页脚本语言可以很高效的操作网页的各个元素节点，并赋予给它们相对应的操作，使我们的前端网页更的的智能化，更加的有利于访客的体验。

下面自已记录几个常用的操作元素的方法，以便自己以后查找时使用。

getElementById(id)方法

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

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

类似语法：

复制

document.getElementById(ID)

例子：

如果想获取关于元素ID属性为“mochu”的元素对象

复制

document.getElementById("mochu");

getElementsByTagName(tag)方法

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

类似语法：

复制

document.getElementsByTagName(tag)

例子：

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

复制

document.getElementsByTagName("li"):

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

代码如下：

复制

for(var i=0;i < document.getElementsByTagName("li").length;i++)}
//这里是操作方法
alert(typeof document.getElementsByTagName("li")[i]);
}

我们也可以把上面的代码简化一下

复制

var mochu = document.getElementsTagName("li");
for(var i=0;i<mochu.length;i++){
alert(typeof mochu[i]);
}

我们也可以结合getElementById()方法来操作某个ID属性下的元素对象。

示例代码：

复制

var mochuid = document.getElementById("mochuid"); //获取ID属性为“mochuid”的元素
var mochuli = mochuid.getElementsByTagName("li") //获取mochuid元素中所有的"li"标签
for(var i=0;i<mochuli.length;i++){
alert(typeof mochu[i]);
}

getElementsByClassName(class)方法

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

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

类似语法：

复制

document.getElementsByClassName(class)

例子： 如果想获取document(文档)中class类名为“mochu”的元素

复制

document.getElementsByClassName("mochu");

如果想获取document(文档)中同时含有两个class类名为“mochu feiniaomy”的元素

复制

document.getElementsByClassName("mochu feiniaomy");

注意：如果查找同时含有两个class类名的元素,两个类名要以空格分开，并无顺序的区别

示例代码：

我们可以结合上面的二个函数方法来使用此函数，但是注意的是老式浏览器并不支持此函数

复制

var mochuid = document.getElementById("mochuid"); //获取ID属性为“mochuid”的元素
var mochuli = mochuid.getElementsByTagName("li") //获取mochuid元素中所有的"li"标签
var mochuclass = mochuli.getElementsByClassName("mochuclass"); //获取含有class类为“mochuclass”的li标签
for(var i=0;i < mochuclass.length; i++){
alert(mochuclass[i]);
}

上面示例代码的第二行，第三行：

复制

var mochuli = mochuid.getElementsByTagName("li") //获取mochuid元素中所有的"li"标签
var mochuclass = mochuli.getElementsByClassName("mochuclass"); //获取含有class类为“mochuclass”的li标签

简写为：

复制

var mochuclass = mochuid.getElementsByClassName("mochuclass");

以上的三个函数方法分别通过元素的ID,元素的标签,元素的类名来获取元素的节点，并且这三个函数可以结合使用，可以更加方法的查找所需要的元素节点。

相关文章