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');