DOM获取节点

获取节点的方式

1.querySelectorAll/querySelector

  var home2LiNodes = document.querySelectorAll('#wrap #content .list .home .home2 li');  //是一个静态的 NodeList 类型的对象. 类数组
  var home1LiNodes = document.querySelector('#wrap #content .list .home .home1 li'); 获取元素

返回值: NodeList

首先获取的是静态NodeList；元素改变不会影响他的值；就是死的

兼容性:IE8以上；

2.getElementsByTagName

var ele = Element.getElementsByTagName()

返回值: HTMLCollection 俗称类数组

返回的列表是动态的，意味着随着DOM变化，他也会变化，使用相同的元素和参数时没有必要，重复调用Element.getElementsByTagName() .

兼容性：IE8以上

3.getElementById('id')

element = document.getElementById(id);

返回值:element元素 ，没有查找到返回null

兼容性:没问题

4.getElementsByClassName('name')

var elements = element.getElementsByClassName(names); //

• elements 是一个即时更新的（live）HTMLCollection。

• names 是一个字符串，表示要匹配的类名（class names）列表；类名被空白符分隔。
• element 是文档中的任一 Element。

返回值:HTMLCollection  （动态）

兼容性:ie8及一下不支持

5.children

var elList = elementNodeReference.children;
一个只读属性
返回值: elementNodeReferenc节点的所有子元素；是动态更新的HTMLCollection

children 属性为只读属性，对象类型为 HTMLCollection，
你可以使用 elementNodeReference.children[1].nodeName 来获取某个子元素的标签名称。

兼容性:IE9以上兼容

兼容性:只选择元素节点没兼容性问题，IE9一下会包含注释节点

6.childNode

var elList = document.body.childNodes;

返回值:NodeList 所有子节点的集合，包括文本/注释/等；需要对节点类型进行判断nodeType === 1 ;元素节点

虽然是NodeList但是是一个具有映射关系的动态集合

兼容性：没有问题

7.写一个兼容所有浏览器的children方法

function myChildren(ele) {
      var nodeList = [];
      if (window.getComputedStyle) {
        nodeList = Array.prototype.slice.call(ele.children)
      }else{
        for(var i=0;i<ele.childNodes.length;i++){
          if (ele.childNodes[i].nodeType === 1){
            nodeList.push(ele.childNodes[i])
          }
        }
      }
      return nodeList
    }

返回值:数组

兼容性：全部浏览器

 最后关于collection与NodeList区别

HTMLCollection: 
接口表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合（generic collection），还提供了用来从该集合中选择元素的方法和属性。

NodeList 对象是一个节点的集合，是由 Node.childNodes 和 document.querySelectorAll 返回的.
有时实时集合： nodd.childNodes获取的是实时
querySelecttorAll 获取的是静态集合
是类数组;通过Array.prototype.call(NodeList)可以转换成数组

HTMLCollection对象与NodeList对象类似，也是节点的集合，返回一个类数组对象。但二者有不同之处

　　NodeList集合主要是Node节点的集合，而HTMLCollection集合主要是Element元素节点的集合。Node节点共有12种，Element元素节点只是其中一种。关于12种节点类型的详细信息移步至此

　　HTMLCollection集合包括getElementsByTagName()、getElementsByClassName()、getElementsByName()等方法的返回值，以及children、document.links、document.forms等元素集合

详情可以查看