JavaScript中常见获取元素的方法及其拓展

xiongzenghui 发布于2019-08-21 10:26 / 863人阅读

摘要：常见的获取元素的方法有种，分别是通过元素通过标签名字和通过类名字来获取。其使用的方法如下是元素对应的该方法兼容主流浏览器，甚至包括，可以大胆使用。除了通过指定标签获取元素外，还提供了方法来获取指定名的元素。

常见的获取元素的方法有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差不多，如果有兴趣自己可以实现一套选择器。不过我觉得有上面的三个方法再结合事件冒泡，已经够用了，毕竟这三种性能上算是优秀的。

云服务器 GPU云服务器 javascript获取元素 js中获取元素位置常见的数据分析方法 js中常见的变量名称

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85536.html

JavaScript笔记——常见DOM知识

摘要：前言本篇文章以介绍常见的节点知识元素操作方法为目的，其中也对一些比较容易忽略的问题进行简要说明。此外，还有一些方式可以获得相关的元素节点。利用字符串拼接使用字符串拼接的方法插入元素是效率最高的。前言本篇文章以介绍常见的DOM节点知识、DOM元素操作方法为目的，其中也对一些比较容易忽略的问题进行简要说明。才疏学浅，如有纰漏之处或建议欢迎留下评论。 Node节点首先，简单看看Node...

madthumb 2019-08-20 18:58 评论0 收藏0
JavaScript 工作原理之三－内存管理及如何处理 4 类常见的内存泄漏问题(译)

摘要：这是因为我们访问了数组中不存在的数组元素它超过了最后一个实际分配到内存的数组元素字节，并且有可能会读取或者覆写的位。包含个元素的新数组由和数组元素所组成中的内存使用中使用分配的内存主要指的是内存读写。原文请查阅这里，本文有进行删减，文后增了些经验总结。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第三章。我们将会讨论日常使用中另一个被开发...

weknow619 2019-08-22 17:05 评论0 收藏0
【译】HTML表单高级样式

摘要：示例多选框和单选框给多选框和单选框添加样式是很让人凌乱的。通向漂亮表单之路一些有用的库和拓展工具尽管在复选框和单选框上的表现力已经够用了，但离其支持高级表单组件仍然遥遥无期。其表单部分挺有用的。系列文章说明原文在本文中，我们将了解如何在HTML表单上使用CSS，为那些难于自定义的表单组件加以样式。如前文所述，文本框和按钮很适合使用CSS，而现在我们得来探索HTML表单样式的那...

caikeal 2019-08-29 10:59 评论0 收藏0
【译】HTML表单高级样式

摘要：示例多选框和单选框给多选框和单选框添加样式是很让人凌乱的。通向漂亮表单之路一些有用的库和拓展工具尽管在复选框和单选框上的表现力已经够用了，但离其支持高级表单组件仍然遥遥无期。其表单部分挺有用的。系列文章说明原文在本文中，我们将了解如何在HTML表单上使用CSS，为那些难于自定义的表单组件加以样式。如前文所述，文本框和按钮很适合使用CSS，而现在我们得来探索HTML表单样式的那...

Jacendfeng 2019-08-01 15:29 评论0 收藏0