DOM操作笔记

1. 选择节点的方法：
   1. DOM选择元素方法：
      1. document.getElementByID('id名'); 。
         兼容性：ie8以下会把name属性看做id属性。
      2. document.getElementsByTagName('标签名'); 。（常用）
         兼容性：都好使。
      3. document.getElementsByClassName('类名'); 。
         兼容性：ie8及以下没有这个方法。
      4. document.getElementsByName('name属性值'); 。
         兼容性：以前的浏览器只有部分标签的name属性可以生效。
          
      5. document.querySelector('css选择器写法'); 。
         选出来是一个。
         兼容性：ie7及以下没有这个方法。
         且这个方法选的元素不是实时的。所以不用。
      6. document.querySelectorAll('css选择器写法'); 。
         选出来是一组。
         兼容性：ie7及以下没有这个方法。
         且这个方法选的元素不是实时的。所以不用。
          
   2. 遍历节点树：（通过一个相关的节点选择目标节点）
      兼容性是全浏览器都好使。
      1. 节点.parentNode 。父节点。
      2. 节点.childNodes 。子节点们。
      3. 节点.firstchild 。第一个子节点。
      4. 节点.lastchild 。最后一个子节点。
      5. 节点.nextSibling 。后一个兄弟节点。
      6. 节点.previousSibling 。前一个兄弟节点。
          
   3. 遍历元素节点树：
      兼容性是除了children属性，其他的属性对IE9及以下不兼容。
      1. 节点.parentElement 。父元素节点。
      2. 节点.children 。 元素子节点。（常用）
      3. 节点.firstElementchild 。第一个元素子节点。
      4. 节点.lastElementchild 。最后一个元素子节点。
      5. 节点.nextElementSibling 。后一个兄弟元素节点。
      6. 节点.previousElementSibling 。前一个兄弟元素节点。
         
          
2. 节点。
   1. 节点的类型：（括号里的数字是 nodeType方法 返回的值，可以用来区分是什么类型的节点）
      1. 元素节点 （1）。
      2. 属性节点 （2）。
      3. 文本节点 （3）。
      4. 注释节点 （8）。
      5. document节点 （9）。
      6. DocumentFragment文档碎片节点 （11）。
   2. 节点的属性
      1. nodeName 返回节点类型。
      2. nodeValue 返回这个文本节点或注释节点的内容。
      3. nodeType 返回节点类型对应的值。（常用）
      4. attributes 返回这个标签的属性节点的集合。
          
3. 节点的增删改：
   1. 创建节点：（这里的创建节点还在js手中拿着，后面可以通过appChild等插入方式放到html中）
      1. document.creatElement('标签名'); 。创建标签。（常用）
      2. document.creatTextNode('文本内容'); 。创建文本节点内容。
      3. document.creatComment('注释内容'); 。创建注释节点内容。
      4. document.creatDocumentFragment(); 。创建文本碎片节点。
   2. 插入节点：（和创建节点一起组合使用后给html增加节点）
      1. 父节点.appendChild(节点); 。把节点插入到父节点中。
      2. 父节点.insertBefore(节点1, 节点2); 。把节点1插入到父节点的节点2之前。
   3. 删除节点：
      1. 父节点.removeChild(子节点); 。剪切父节点的一个子节点。
      2. 节点.remove(); 。删除节点。
4. Element节点的属性和方法
   1. 属性：
      1. innerHTML 。该属性可读写。可以改变标签的HTML内容。（常用）
      2. innerText/textContent 。可读写。可以改变标签的文本内容。
         兼容性：innerText很老的火狐不兼容，textContent IE9及以下不兼容。
      3. className。属性可读写。可以改变class属性值。
   2. 方法：（结合事件形成动态效果，如鼠标移到某个元素上给它添上或修改属性对，让它符合别的css样式，鼠标离开恢复。）
      1. 元素.setAttribute('属性名', '属性值'); 。给元素增加属性对。
      2. 元素.getAttribute('属性名', '新属性值'); 。修改元素的属性值。
5. 定时器（函数中如果有this，它指向window）
   1. setInterval(function, time);
      1. 意思就是每隔 time毫秒 执行一次前面的 function ，且是一直无休止的执行。
      2. 这个方法的第一个参数可以写字符串，表示每隔 time 毫秒执行一次前面的字符串转换为代码。（绝大部分情况都不要用这个写法）
      3. 这个方法要注意它的时间间隔是不会变的。
      4. setInterval的时间其实是不准的。
         记住这个结果：所以setInterval()方法作为计时器，是非常不准的。
      5. setInterval是有返回值的。
         它会返回一个数字作为它的唯一标识。（第几个定时器返回值就是几）

      6. 这个唯一标识就是为了后面的程序能用clearInterval清除这个计时器。

         它和setTimeout返回的标识是依次排列的。

   2. setTimeout(function, time)
      意思是隔了 time 毫秒之后，执行 function ，且只执行一次。
      它和setInterval返回的标识是依次排列的。
   3. clearInterval()
      这个方法可以让setInterval停止。
      一般都是传var的那个计时器变量名，不过也可以传具体的数字。（传数字几就是停止第几个计时器）
   4. clearTimeout()
      可以清除setTimeout。（让它停止）
   5. 上述方法都是全局对象window上的方法，所以内部函数this指向的是window 。
6. DOM实例：
   1. 创建新的HTML元素：
      <div id="div1">
      <p id="p1">这是一个段落。</p>
      <p id="p2">这是另一个段落。</p>
      </div>
      <script>
      var para=document.createElement("p");
      var node=document.createTextNode("这是一个新段落。");
      para.appendChild(node);
      var element=document.getElementById("div1");
      element.appendChild(para);
      </script>