专业IT网络知识平台,分享IT百科知识、生活百科知识解答!

易企推科技
易企推科技

javascript获得元素的方法

来源:小易整编  作者:小易  发布时间:2024-03-20 08:17
摘要:javascript获得元素的方法:1、通过getelementbyid获取id属性的节点对象;2、通过getelementsbytagname获取对象数组;3、通过getelementsbyclassname获取指定class名的元素。本...

javascript获得元素的方法:1、通过getelementbyid获取id属性的节点对象;2、通过getelementsbytagname获取对象数组;3、通过getelementsbyclassname获取指定class名的元素。

javascript获得元素的方法

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

常见的获取元素的方法有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;        }    }
登录后复制

拓展

如果你不仅仅满足上面那些元素选择的方法,想和JQuery一样,能通过选择器来获取元素,实现的方法和上面的getElementsByClassName差不多,如果有兴趣自己可以实现一套选择器。不过我觉得有上面的三个方法再结合事件冒泡,已经够用了,毕竟这三种性能上算是优秀的。

推荐学习:《javascript高级教程

以上就是javascript获得元素的方法的详细内容,更多请关注易企推科技其它相关文章!


本文地址:网络知识频道 https://www.hkm168.com/jiqiao/1151484.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


网络知识
小编:小易整编
相关文章相关阅读
  • 有没有录制电脑屏幕的方法

    有没有录制电脑屏幕的方法

    电脑屏幕有录制的方法吗有两个方法一是用win10电脑自带的录屏软件来录,打游戏的时候按一下【win+g】就行了二是用其他的录制软件来录制,比如“迅捷屏幕录像工具”,操作方法如下:1、首先在电脑上将这个工具下载下来。下载完成后打开工具,主页...

  • 什么是构造函数?详解JavaScript中的构造函数

    什么是构造函数?详解JavaScript中的构造函数

    作为原型和原型链的基础,先了解清楚构造函数以及它的执行过程才能更好地帮助我们学习原型和原型链的知识。本篇文章带大家详细了解一下javascript中的构造函数,介绍一下怎么利用构造函数创建一个js对象,希望对大家有所帮助!一个普通的函数被用...

  • win7硬件加速设置方法

    win7硬件加速设置方法

    有很多网民在玩一些游戏或运行一些大软件,下载大文件,可能会觉得系统运行不够无忧无虑,这次可以尝试加速硬件。下面的小边将为您介绍如何设置win7的硬件加速方法。1.右击桌面空白处,然后点击右键菜单中的屏幕分辨率选项。2.进入电脑屏幕分辨率设置...

  • 迅雷下载速度慢怎么办-迅雷下载速度慢解决方法

    迅雷下载速度慢怎么办-迅雷下载速度慢解决方法

    迅雷下载速度慢怎么办?迅雷是目前国内用户使用最多的高速下载工具,其速度和效率都是同类下载工具的顶点,但是很多用户在使用的时候却发现迅雷的下载速度很慢,这其实是因为多个不同的问题导致的,那么我们该如何解决呢?下面就由小编为大家带来迅雷下载速度...

  • java中tostring方法的作用是什么

    java中tostring方法的作用是什么

    java中tostring方法的作用是会返回一个【以文本方式表示】此对象的字符串,结果是一个简明但易于读懂的信息表达式。java中tostring方法的作用是toString方法会返回一个“以文本方式表示”此对象的字符串。结果是一个简明但易...

  • 电脑运行内存怎么扩大 秒懂:电脑内存扩大内存的方法

    电脑运行内存怎么扩大 秒懂:电脑内存扩大内存的方法

    电脑运行内存怎么扩大?这是许多电脑用户常常遇到的问题。想要提升电脑运行速度和性能,扩大内存是一个有效的方法。但是,如何扩大内存呢?在本文中,php小编西瓜将为你介绍一些简单又实用的方法,让你秒懂如何扩大电脑内存,提升电脑的运行效率。无论你是...

  • 修复 Windows 11 中 Sxstrace.exe 运行时错误的 5 种方法

    修复 Windows 11 中 Sxstrace.exe 运行时错误的 5 种方法

    windows用户有时会发现启动程序很困难,在这种情况下可能会收到一条错误消息,要求使用命令行sxstrace.exe工具了解更多详细信息。sxstrace.exe由Microsoft于2006年11月首次为Windo...

  • CSS颜色设置方法:HEX、RGB、HSL的简单对比

    CSS颜色设置方法:HEX、RGB、HSL的简单对比

    css中,颜色值有多种表示方法,例如颜色名、十六进制颜色、rgb()、hex()、hsl()等等。那你知道hex、rgb和hsl之间有什么区别吗?下面本篇文章就来给大家简单对比一下hex、rgb、hsl,看看它们区别。不知道你是否了解HE...

  • 周排行
  • 月排行
  • 年排行

精彩推荐