JavaScript常见获取元素的方法

Js中有很多获取元素的方法,本文讨论了较为常见的几种方法.

1.getElementById('demo'):

           该方法会返回一个Id值为'demo'的节点,该方法定义在Document.prototype上面,Element节点是不能调用的,只能被document调用                       ,

var Node = document.getElementById('demo');//获取一个id为'nav'的元素
var Node = Element.getElementById('demo');//不合法的

2.getElementsByClassName('demo'):

           该方法会返回一个class为'demo'的一个NodeList,虽然访问方式是以下标形式访问例如demo[0],但确实不是一个数组,而且括号内可以有多个参数,类名通过空格分隔,该方法定义在Document.prototype,Element.prototype上面,所以既可以被document调用,又可以被Element节点调用,但是IE8以及IE8以下不兼容。            

var demo = document.getElementsByClassName('demo');//获取所有类名为'demo'元素。
var demo = Element.getElementsByClassName('demo');//获取所有类名为'demo'元素。

3.getElementsByTagName('div'):

           该方法会返回一个div标签的一个NodeList,同样是一个类数组  ,该方法定义在Document.prototype,Element.prototype上面 ,和上一位相同。这个方法很常用,兼容性很棒,在项目中经常用到。                    

var demo = document.getElementsByTagName('p');在文档范围内获取p元素
var demo = Element.getElementsByTagName('p');  在Element范围内获取p元素

4.getElementsByName('demo'):

            该方法会返回一个name属性值为'demo'的一个列表,同样是一个NodeList,但是该方法定义在HTMLdocumen.prototype上面自然不能被Element节点和XML调用。                                 

       getElementsByName  在不同的浏览器其中工作方式不同。在IE和Opera中, getElementsByName()  方法还会返回那些 id 为指定值的元素。所以你要小心使用该方法,最好不要为元素的 name 和 id 赋予相同的值。兼容性不强

5.querySelector(css选择符):

querySelector()方法会接受一个CSS选择器,在文档范围内返回符合条件的第一个元素,如果参数为空,则返回null,既可以被document调用,又可以被Element类型调用,不兼容IE7以及以下版本,得到元素的是静态的。

var body = document.querySelector('body');
var head = body.querySelector('head');

6.querySelectorAll(css选择符):

querySelectorAll()方法接受一个css选择符,会在文档范围内匹配所有符合条件的元素,返回一个NodeList,如果参数为空,则返回null,可以调用querySelectorAll()的有Document,DocumentFragment,Element,不兼容IE7以及以下版本,而且得到的是一个静态的NodeList。

var section = document.querySelectorAll('.section');
section[0].querySelectorAll('color');

 

猜你喜欢

转载自blog.csdn.net/qq_41995398/article/details/98513880