02 document对象，获取元素，节点，遍历树

document

最上层节点

getElementById

1. IE8及以下，不区分大小写
2. IE8及 getElementById 可以通过name来找dom

getElementsByTagName

1. 获取一组元素(类数组)

   getElementsByClassName

2. IE8及以下没有

   getElementsByName

3. 不常用

   querySelector,querySelectorAll

4. HTML5新引入标签 选一组和选一个。

5. 兼容至IE7
6. 参数和css选择器类似。

缺点 性能比get系列都要慢

1. 不实时 之后还能获取到几个元素。

   querySelector

   <div>123</div>
   <div id="myDIV">123</div>
   <script>
    var div = document.querySelector('#myDIV');
   var div = document.querySelector('div')[0];
   </script>

   querySelectorAll

2. 选取一组元素

   <div>123</div>
   <div id="myDIV">123</div>
   <script>
   var divs = document.querySelectorAll('div');
   </script>

   遍历节点树

3. 节点不是元素。节点包含元素 元素节点===DOM元素

4. 元素节点树

5. 节点类型

   1. 元素节点 nodeType 1
   2. 属性节点 nodeType 2
   3. 文本节点 nodeType 3
   4. 注释节点 nodeType 8
   5. document nodeType 9

   6. 文档片段(documentFragment)节点 nodeType 11

      <ul>
      <li>
      <p>I am P</p>
      <h1>I am Header</h1>
      <a href="">I am Ancho</a>
      </li>
      </ul>

      parentNode

      1. 上一级，一个元素只有一个父节点。
      2. 元素直系父元素

         var a =  document.getElementByTagName('a')[0];
         console.log(a.parentNode);
         console.log(a.parentNode.parentNode.parentNode);

         childNodes

         获取子节点集合

         firstChild

         第一个节点

         lastChild

         最后一个节点

         nextSibing

         下一个兄弟节点

         previousSibling

         前一个兄弟节点

         遍历元素节点树

         parentElement

         父元素节点

         children

         子元素节点集合

      • IE7及以下不能使用

        firstChildElement

        第一个子元素节点

        lastChildElement

        最后一个子元素节点

        childElementCount

        子元素节点长度 == children,length;

      • IE9及以下不能使用

        previousElementSibling

        前一个元素节点

      • IE9及以下不能使用

        nextElementSibling

        后一个元素节点

      • IE9及以下不能使用