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>

dom选择器，节点类型

推荐阅读更多精彩内容