您好,欢迎访问一九零五行业门户网

javascript获取元素的3种方法实例详解

常见的获取元素的方法有3种,分别是通过元素id、通过标签名字和通过类名字来获取。
getelementbyid
dom提供了一个名为getelementbyid的方法,这个方法将返回一个与之对应id属性的节点对象。使用的时候请注意区分大小写。
它是document对象特有的函数,只能通过其来调用该方法。其使用的方法如下:
document.getelementbyid('demo') //demo是元素对应的id
该方法兼容主流浏览器,甚至包括ie6+,可以大胆使用。
getelementsbytagname
该方法返回一个对象数组(准确的说是htmlcollection集合,它不是真正意义上的数组),每个对象分别对应着文档里有着给定标签的一个元素。类似于getelementbyid,同样,该方法只提供一个参数,它的参数是指定标签的名字,示例代码如下:
document.getelementsbytagname('li') //li是标签的名字
需要注意的是,该方法除了能被document对象调用之外,还可以被普通的元素调用。示例如下:
原生dom的话首先获取标签对象,id或者name或其他
例:
<p id="targetp" >2333333</p> <script> var element = document.getelementbyid("targetp"); var tagname = element.tagname; alert(tagname); </script>
jquery获取
$("#content-header").get(0).tagname
如果已经获取到对象可以直接获取标记名
<p onclick="alert('您单击的是:'+this.tagname);">中华人民共和国</p>
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获取元素的3种方法实例详解的详细内容。
其它类似信息

推荐信息