dom选择器，节点类型

查看元素节点

• document代表整个文档
• document.getElementByID()//元素id在ie8一下的浏览器，不区分id大小写，而且也返回匹配name属性的元素(name = id)
• getElementsByTagName() // 标签名
  <div id = "only">123</div>
  var div = document. getElementsByTagName('div');
  把页面里面的所有div都拿出来，放到一个类数组里,代表一个数组，所以div.style.background = "red"就会报错 为了不报错 把这个div取出来 得这样 document. getElementsByTagName('div')[0];
  尽管页面只有一个div，但选出来的永远是一组 所以要加角标
• getElementsByName();//, 需注意 只有部分标签可生效（表单，表单元素，img，ifame）
• getElementsByClassName();//类名 ie8和ie8一下没有
• querySelector()// css选择器 在ie7和ie7以下得版本中没有
• querySelectorAll()// css选择器 在ie7和ie7以下得版本中没有

遍历节点树

• parentNode 父节点（最顶端的parentNode为#document);
• childNodes 子节点们
• firstChild 第一个子节点
• lastChild 最后一个子节点
• nextSibling 后一个兄弟节点previousSibling前一个兄弟节点

节点的主要类型：
元素节点 --1
属性节点 --2
文本节点 -- 3
注释节点 --8
document --9
DocumentFragment -- 11

<div>
     <strong>
               <span>1</span>
     </strong>
     <span></span>
     <em></em>
</div>
div.childNodes.length  -->7  
div和strong之间算1一个文本节点   strong算元素节点
<div>
       123
      <! -- this is comment-->  
     <strong></strong>
     <span></span>
</div>
也是七个节点

基于元素节点数的遍历

• parentElement 返回当前元素的父元素节点（ie不兼容）
• children 只返回当前元素的元素子节点
• nodechildElementCount === node.children.length当前元素节点的子元素个数
• firstElementChild 返回的是第一个元素节点
  -lastElementChild 返回的是最后一个元素节点
• nextElementSibling/previousElementSibling 返回的是后一个/前一个兄弟元素节点

节点的四个属性

• nodeName
  元素的标签名，以大写形式表示，只读
• nodeValue
  Text节点或Comment节点的文本内容，可读写
• nodeType
  该节点的类型，只读
• attributes
  Element节点的属性集合
  节点的一个方法 Node.hasChildNodes();

<div>
    123
        <!--    this is comment -->
      <strong> </strong>
      <span></span>
      <em></em>
      <i></i>
      <b></b>
</div>
<script type="text/javascript">
    var div = document.getElementsByTagName('div')[0];
    function retElementChild(node){
        var arr = [],
            child = node.childNodes,
            len = child.length;
        for (var i = 0; i < len; i++) {
            if(child[i].nodeType === 1){
                arr.push(child[i]);
            }
        }
        return arr;

    }
   console.log(retElementChild(div));
</script>

---------------------------------------------


<div>
    123
        <!--    this is comment -->
      <strong> </strong>
      <span></span>
      <em></em>
      <i></i>
      <b></b>
</div>
<script type="text/javascript">
    var div = document.getElementsByTagName('div')[0];
    function retElementChild(node){
        var temp = {
              length : 0,
              push : Array.prototype.push
              splice : Array.prototype.splice
        },
            child = node.childNodes,
            len = child.length;
        for (var i = 0; i < len; i++) {
            if(child[i].nodeType === 1){
                temp.push(child[i]);
            }
        }
        return temp;

    }
   console.log(retElementChild(div));
</script>