Js操作DOM

2118 ワード

domを作成
//    li  
var oLi = document.createElement("li");
// .appendChild(oLi);       (         )
//  .insertBefore(oLi);          
domを削除
// .removeChild(oLi)
.parentNode()
ドキュメントの断片化速度
var fragment = document.createDocumentFragment();

var oLi = document.createElement("li");
oLi.innerHTML = "Xujiguang";
//oLi.innerText = "xu";
fragment.appendChild(oLi); //   fragment     
domノード
  • 親ノード
  • サブノード
  • oUl.childNodes //     ,     , firefox         (    )
    //      
    document.body.childNodes[0].NodeType
    // 3  --     
    //1   --     
    //          NodeType            
    //
    oUl.children   //     (  ),      childNodes     
    //
    oLi.parentNode //     
    //
    //    
    this.parentNode.style.display = none; 
    
    offsetパーティ
    ps:   
    position:absolute        ,  left,right,top,buttom    
    (    static                )
    //
    position:relative        ,    left,right,top,bottom   
                             (                 )
    
    offsetParent          
    
    サブノードを続ける
    var oCh = oUl.firstElementChild || oUl.firstChild
    var oCh = oUl.lastElementChild || oUl.lastChild
    
    兄弟ノード
    oLi.previousSibling || oLi.previousElementSibling
    //
    oLi.nextSibling || oLi.nextElemetnSibling
    
    コントロール要素の属性
    //
    oIn.value = "123"; //       value
    //
    oIn["value"] = "123";
    //
    oIn.setAttribute("value", "xujiguagn");
    //      
    var v = oIn.getAttribute("id");
    
    //      
    oIn.removeAttribute("class");
    
    //
    oIn.style.display = "none";
    oIn.style["display"] = "none";
    
    クラスで元素を選ぶ
    function getByClass(oParent, sClass) {
      var aEle = oParent.getElementsByTagName("*");
      var aReault = [];
      for (var i = 0; i< aEle.length; i++) {
        if(aEle[i].className == sClass) {
          aResult.push(aEle[i]);
        }
      }
    }
    
    js事件
    //window     onload、onscroll、onresize
    //     
    window.open("www.baidu.com", "_self"); //       frame  ,  _blank