JavaScript中常见猎取元素的要领及其拓展

2024年5月12日 187次阅读 来源: 两仪

罕见的猎取元素的要领有3种，离别是经由过程元素ID、经由过程标签名字和经由过程类名字来猎取。

getElementById

DOM供应了一个名为getElementById的要领，这个要领将返回一个与之对应id属性的节点对象。运用的时刻请注重辨别大小写。

它是document对象特有的函数，只能经由过程其来挪用该要领。其运用的要领以下：

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

该要领兼容主流浏览器，以至包含IE6+，能够斗胆勇敢运用。

getElementsByTagName

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

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

须要注重的是，该要领除了能被document对象挪用以外，还能够被一般的元素挪用。示例以下：

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

一样，该要领兼容主流浏览器，以至包含IE6+，能够斗胆勇敢运用。

getElementsByClassName

除了经由过程指定标签猎取元素外，DOM还供应了getElementsByClassName要领来猎取指定class名的元素。不过因为该要领比较新，较老的浏览器还不支撑，比方IE6。不过我们能够经由过程hack体式格局来填补老浏览器缺点。该要领挪用的体式格局以下所示：

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;
        }
    }

假如你想猎取极致的机能，能够参考这便文章：The ultimate getElementsByClassName, anno 2008

拓展

假如你不单单议满足上面那些元素挑选的要领，想和JQuery一样，能经由过程挑选器来猎取元素，完成的要领和上面的getElementsByClassName差不多，假如有兴致本身能够完成一套挑选器。不过我以为有上面的三个要领再连系事宜冒泡，已够用了，毕竟这三种机能上算是优异的。

    原文作者：两仪
    原文地址: https://segmentfault.com/a/1190000002571464
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞