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

墨初学习笔记2284

网页的制作离不开JavaScript(JS)今天就说说那些关于JavaScript(JS)操作DOM节点的一些属性,做个记录,以备后续查找!

getattribute()

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

getattribute(),getattribute(),getElementsByTagName(),getElementsByClassName(),HTML DOM getAttribute() 方法,setAttribute(),JS操作DOM的属性

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

getAttribute()

getAttribute()方法是一个函数。它只有一个参数——你打算查询的属性的名字:

getAttribute()方法不能通过document对象调用,这与我们此前介绍过的其他方法不同。我们只能通过一个元素节点对象调用它。

你可以把它与getElementsByTagName()方法结合起来,去查询每个<p>元素的title属性

代码如下:

var text=document.getElementsByTagName("p")for (var i=0;i<text.length;i++){alert(text[i].getAttribute("title"));}

setAttribute()

setAttribute()函数可以设置对象的属性,如果不存在此属性,则会创建此属性。

代码:

var ts=document.getElementsByTagName("li");for (var i=0; i<ts.length;i++){var text=ts[i].getAttribute("title");alert(ts[i].getAttribute("title"))if(text){ts[i].setAttribute("title","我会成功!")alert(ts[i].getAttribute("title"))}}

上面的示例代码,来自网络,有什么不对的,大家可以在下方留言哦!

相关文章

JavaScript中for...in 语句详解

JavaScript中for...in 语句详解

在编程中我们会使用到各式各样的循环语句,以使我们可以对一个数组进行读操作或是写入赋值的操作,当然在javascript中这少不了这样的循环语句的存在。今天记录一下关于JavaScript for......

JQ获取某个元素下的所有图片并改变其属性

利用JQ获取某个元素下的所有图片并改变其属性...

500 501 502 503 504 505 详解

500 501 502 503 504 505 详解

服务器会经常的出现错误,那么在平时的时候出现了服务器错误,我们要如何去解决了,今天小编就简单的说说服务器500错误、501错误、502错误、503错误、504错误、505错误的一些问题所在。服务器50...

LAMP和LNMP,你更愿意选择谁,为什么?

这几天一直在捣鼓服务器的网站环境,不知道是装apache好,还是装nginx好。这不又开始找百度,查资料,看看大神们怎么说的。lamp 的全称是linux + apache + mysql +phpl...

PHP读取大文件的多种方法介绍

读取大文件一直是一个头痛的问题,我们像使用php开发读取小文件可以直接使用各种函数实现,但一到大文章就会发现常用的方法是无法正常使用或时间太长太卡了,下面我们就一起来看看关于php读取大文件问题解决办...

这个函数返回的是包含当前函数所有参数的一个数组

这个函数返回的是包含当前函数所有参数的一个数组

在PHP中,系统内置好了很多的函数,在我们写PHP程序的过程中可以调用这些函数,可以极大的减少我们开发程序的时间与精力。当然我们也可以自己写函数,PHP在我们的自定义函数中也有系统内置好的系统函数.....

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。