JavaScript中常见获取元素的方法汇总

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

以上就是本文的全部内容了，希望对大家能够有所帮助。

赞 (0)

相关推荐

  • js正确获取元素样式详解

    在说js获取元素样式之前,简单地谈一下样式 样式分三种 外部样式 External Style Sheet 以CSS为扩展名的文件(又称为"超文本样式表"文件),它的作用范围可以是多张网页,或整个网站,甚至不同的网站.与网页链接后,才能应用. 嵌入式样式 internal Style Sheet 包含在网页内部的样式设置,它的作用范围仅限于嵌入的网页. 内联式样式 inline Style 在HTML文档中,内联式样式表的格式化信息直接插入所应用的网页元素的HTML标签中,作为其HTM

  • 用js获取元素属性的代码

    获取元素属性 // [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 浅谈JS获取元素的N种方法及其动静态讨论

    实际前端开发工作中,我们经常会遇到要获取某些元素,以达到更新该元素的样式.内容等目的.而文档对象模型 (DOM) 是HTML和XML文档的编程接口,它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容.DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合,它会将web页面和脚本或程序语言连接起来.也因此,JavaScript可以通过DOM API获取元素节点,方法有如下几种:其中querySelector()和quer

  • JavaScript中获取HTML元素值的三种方法

    JavaScript中取得元素的方法有三种:分别是: 1.getElementById() 方法:通过id取得HTML元素. 2.getElementsByName()方法:通过name取得元素,是一个数组. 3.getElementsByTagName()方法:通过HTML标签取得元素,是一个数组. 如果要取得值可以使用value,如:var x=document.getElementById("id").value; 方法一:getElementById() 方法 可返回对拥有指定

  • js jquery获取当前元素的兄弟级 上一个 下一个元素

    var chils= s.childNodes;  //得到s的全部子节点 var par=s.parentNode;   //得到s的父节点 var ns=s.nextSbiling;   //获得s的下一个兄弟节点 var ps=s.previousSbiling;  //得到s的上一个兄弟节点 var fc=s.firstChild;   //获得s的第一个子节点 var lc=s.lastChile;   //获得s的最后一个子节点 JS获取节点父级,子级元素 先说一下JS的获取方法,其

  • JavaScript中常见获取元素的方法汇总

    常见的获取元素的方法有3种,分别是通过元素ID.通过标签名字和通过类名字来获取. getElementById DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象.使用的时候请注意区分大小写. 它是document对象特有的函数,只能通过其来调用该方法.其使用的方法如下: 复制代码 代码如下: document.getElementById('demo') //demo是元素对应的ID 该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用. ge

  • javascript删除数组重复元素的方法汇总

    本文实例讲述了javascript删除数组重复元素的方法.分享给大家供大家参考.具体分析如下: 这里分享一个前端面试高频题,主要实现javascript删除数组重复元素.希望对初学者有所帮助 //数组去重的方法 Array.prototype.unique=function(){ //集中声明变量 var oldArr=this, newArr=[oldArr[0]], len=oldArr.length, i=1; //过滤空数组 if(!len) return this; //过滤重复元素

  • Javascript 中创建自定义对象的方法汇总

    Javascript 中创建对象,可以有很多种方法. Object构造函数/对象字面量: 抛开设计模式不谈,使用最基本的方法,就是先调用Object构造函数创建一个对象,然后给对象添加属性. 复制代码 代码如下: var student = new Object();      student.name = "xiao ming";      student.age = 20;      student.getName = function () {          alert(th

  • Spring中如何获取request的方法汇总及其线程安全性分析

    Spring中如何获取request的方法汇总及其线程安全性分析

    前言 本文将介绍在Spring MVC开发的web系统中,获取request对象的几种方法,并讨论其线程安全性.下面话不多说了,来一起看看详细的介绍吧. 概述 在使用Spring MVC开发Web系统时,经常需要在处理请求时使用request对象,比如获取客户端ip地址.请求的url.header中的属性(如cookie.授权信息).body中的数据等.由于在Spring MVC中,处理请求的Controller.Service等对象都是单例的,因此获取request对象时最需要注意的问题,便是

  • Java中实现获取路径的方法汇总

    一. java文件中获得路径 Thread.currentThread().getContextClassLoader().getResource("") //获得资源文件(.class文件)所在路径 ClassLoader.getSystemResource("") Class_Name.class.getClassLoader().getResource("") Class_Name.class .getResource("/&qu

  • Javascript中常见的逻辑题和解决方法

    一.统计数组 arr 中值等于 item 的元素出现的次数 function count(arr, item) { var count = 0; arr.forEach(function(e){ //e为arr中的每一个元素,与item相等则count+1 e == item ? count++ : 0; }); return count; } function count(arr, item) { return arr.filter(function(a){ return (a==item);

  • JavaScript中常见的字符串操作函数及用法汇总

    本文实例总结了JavaScript中常见的字符串操作函数及用法.分享给大家供大家参考.具体分析如下: 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信你也跟我一样,发现字符串的处理是前端招聘过程中最常见的题型之一.这些题有一个特点,站在考官的角度去考虑,它考的不是你会不会,而是你能不能在不借用XX手册或者XX指南再或者百度谷歌的情况下,用比较简洁的方式写出答案来.可惜的是,很多开发人员,当然我也

  • JavaScript过滤字符串中的中文与空格方法汇总

    js 如何过滤字符串里中文或空格呢?方法有很多种,我们可以使用替换与正则表达式来实现,本文向大家介绍两个简单的例子,感兴趣的朋友可以参考一下. 1.javascript过滤空格: function moveSpace() { var str = " abc defg"; alert(str.replace(/[ ]/g, "")); } moveSpace(); 2.javascript过滤中文: var title ="字符串zifuchuan"

  • js中利用tagname和id获取元素的方法

    本文分享了js中利用tagname和id获取元素的3种方法,供大家参考,具体内容如下 方法一:整体法,先获取所有的元素,再通过ai+-b的方法来算出需要的元素 方法二:数组法,在全局环境下建立空数组,遇到需要循环的结构时,在循环中获取元素,并放入数组 方法三:函数法,遇到相同的几组元素时,只操作一组元素,并用函数传参来实现所有的效果 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta cha

  • JS控制伪元素的方法汇总

    一. 缘由: 本文源于在OSC社区中,有人提问如何用jq获取伪元素.我第一想法是强大的CSS Query应该可以获取伪元素吧. 然而事实上,CSS Query并不能.即我们不能通过$(":before").$(dom).find(":before")或document.querySelector(":before")来获取:before伪元素. 为此,我不得不重新了解伪元素(Pseudo-elements).为什么不能用JS直接获取伪元素呢? 譬

随机推荐