javascript获得元素的方法-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

javascript获得元素的方法：1、通过getElementById获取id属性的节点对象；2、通过getElementsByTagName获取对象数组；3、通过getElementsByClassName获取指定class名的元素。

本文操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

常见的获取元素的方法有3种，分别是通过元素ID、通过标签名字和通过类名字来获取。

getElementById

DOM提供了一个名为getElementById的方法，这个方法将返回一个与之对应id属性的节点对象。使用的时候请注意区分大小写。

它是document对象特有的函数，只能通过其来调用该方法。其使用的方法如下：

代码如下:

1	`document.getElementById('demo')` `//demo是元素对应的ID`

该方法兼容主流浏览器，甚至包括IE6+，可以大胆使用。

getElementsByTagName

该方法返回一个对象数组（准确的说是HTMLCollection集合，它不是真正意义上的数组），每个对象分别对应着文档里有着给定标签的一个元素。类似于getElementById,同样，该方法只提供一个参数，它的参数是指定标签的名字，示例代码如下：

代码如下:

1	`document.getElementsByTagname('li')` `//li是标签的名字`

需要注意的是，该方法除了能被document对象调用之外，还可以被普通的元素调用。示例如下：

代码如下:

1 2	`var` `demo = document.getElementById('demo');` `var` `lis = demo.getElementsByTagname('li');`

同样，该方法兼容主流浏览器，甚至包括IE6+，可以大胆使用。

getElementsByClassName

除了通过指定标签获取元素外，DOM还提供了getElementsByClassName方法来获取指定class名的元素。不过由于该方法比较新，较老的浏览器还不支持，比如IE6。不过我们可以通过hack方式来弥补老浏览器缺陷。该方法调用的方式如下所示：

代码如下:

1	`document.getElementsByClassName('demo')` `//demo为元素指定的class名`

和getElementsByTagname一样，该方法除了能被document对象调用之外，还可以被普通的元素调用。

对于比较老的浏览器，比如IE6、7我们可以通过下面的hack方式来实现：

代码如下:

function getElementsByClassName(node,classname){
        if(node.getElementsByClassName) {
            return node.getElementsByClassName(classname);
        }else {
            var results = [];
            var elems = node.getElementsByTagName("*");
            for(var i = 0; i < elems.length; i++){
                if(elems[i].className.indexOf(classname) != -1){
                    results[results.length] = elems[i];
                }
            }
            return results;
        }
    }