dom节点总结

节点以及节点类型

   Node.ELEMENT_NODE (1)  元素节点
   Node.ATTRIBUTE_NODE (2) 属性节点    
   Node.TEXT_NODE (3) 文本节点
   Node.COMMENT_NODE (8) 注释节点
   console.log(oDiv.nodeName)   nodeName 获取标签名称

孩子节点，兄弟节点

   普通标签的标签名就是TagName  文本节点的标签名是#text
       （oDiv.nodeType）  nodeType 节点类型
        (oDiv.firstChild)  第一个节点
       （oDiv.lastChild）  最后一个节点
       <ul>
       <li id="list">1</li>
       <li>2</li>
       <li>3</li>
       </ul>
       var oLi = document.getElementById('list')
       console.log(oLi.nextSibling)  输出的是下一个兄弟节点，会检测到 ‘回车空格’文本节点
       nextElementSibling 找到下一个元素节点  只在IE浏览器里支持，IE浏览器里不支持
       nextSibling 在标准浏览器会找到回车空格，而在IE浏览器里找到的直接是元素节点
       previousSibling 前一个元素节点
       previousElementSibling 前一个兄弟元素节点  用法同上
       
       找到下一个兄弟元素节点：用nextSibling

找到下一个节点，并判断节点类型，如果节点类型不是元素节点，元素继续循环，直到找到元素节点

       function next(elem) {
           do {
               elem = elem.nextSibling
           } while(elen.nodeType !=1)
           return elem
       }
       console.log(next(oLi))

另有一个方法是判断浏览器的类型，使用nextSibling 或者 nextElementSibling

       function next_new(elem) {
          var ua = navigator.userAgent 
          if(ua.indexOf('MSIE')!=-1){
              elem=elem.nextSibling
          }  else{
              elem=elem.nextElementSibling
          }
                 return elem

          }

同时firstChild 在标准浏览器里 也会找到回车空格元素 在封装一个方法

       function first(elem){
           elem=elem.firstChild 
           if(elem.nodeType!=1)
           {
               elem=next(elem)
           }
           return elem
       } 

创建标签 var op = document.creatElement('p')

  console.log(op)    
  给标签插入内容 op.innerHTML='hello'  是字符串类型的注意要带引号
  给标签末尾插入标签  oDiv.appendChild(op)
  在标签中的某个元素前插入标签 oDiv.insertBefore(oA,oP)  第一个是新节点，第二个目标节点
  标签中删除节点  oDiv.removeChild(oA)
  标签中替换节点  oDiv.replaceChild(oA,oP)  第一个是新节点，第二个是目标节点
  给标签插入属性  oDiv.setAttribute('index',1) 第一个是属性，第二个是属性值 第二个也可以是属性，用第二个属性替换第一个
                 oDiv.tag=1  
                 两种属性的区别 ： 第一个是在Html结构中可以看到，第二个看不到
  获取元素属性 console.log(oDiv.getAttribute('index'))   注意括号中是一个字符串，要带引号  转换成number类型可以*1或者/1
  删除元素属性    oDiv.removeAttribute('')
  getElementsByTagName返回html集合  getElementsByName返回NodeList