DOM(四)

第十天

03-对象模型-第04天{创建结构}

• 第十天
  • 节点操作
    • 克隆节点 - cloneNode()
    • 添加节点 - appendChild()
    • 插入节点 - insertBefore()
    • 移除节点 - removeChild()
  • 获取节点
    • 获取第一个子节点 - firstChild
    • 获取第一个子元素 - firstElementChild
    • 获取第一个子元素兼容写法
    • 获取最后一个子元素兼容写法
  • 创建结构
    • document.write()
    • innerHtml()
    • createElement()
    • 性能问题
      • 优化
  • 选好友模型
  • 百度搜索框

节点操作

克隆节点 - cloneNode()

• element.cloneNode(): 复制element节点

• 参数:布尔值,

  • true代表深层克隆,把当前节点和内部所有节点都复制一份

  • false代表浅层克隆,只复制当前节点

    
        
    
    
    
    var father = document.getElementById("father");
    var son = document.getElementById("son");
    var clone = son.cloneNode(true);// 把son这个div复制一份 复制出来的clone和son没有任何关系了
    
    

添加节点 - appendChild()

• father.appendChild(son):将son节点追加到father内部的最后位置

  
      
  
  
  
  
  var father = document.getElementById("father");
  var demo = document.getElementById("demo");
  var clone = demo.cloneNode(true);// 将demo克隆一份 
  father.appendChild(clone);// 将克隆出来的clone追加到father中
  
  // 此时页面结构应该为
  
      
  
      
  
  
  
  
  #追加克隆节点对原节点不会产生影响
  
  //如果代码如下 则会将demo节点直接移动到father节点下
  father.appendChild(demo);// demo是页面上存在的节点
  
  // 此时页面结构应该为
  
      
  
      
  
  
  
  

插入节点 - insertBefore()

• father.inserBefore(son1,son2): 将son1插入到father节点下的son2前面

  
      
  
  
  
  
  var father = document.getElementById("father");
  var son = document.getElementById("son");
  var demo = document.getElementById("demo");
  
  father.inserBefore(son,demo);//会直接将demo节点移动到father下的son前面       
  
  #插入克隆出来的节点也不会对原节点产生影响
  
  

移除节点 - removeChild()

• father.removeChild(son): 将father下的son节点移除

  
      
  
  
  
  var father = document.getElementById("father");
  var son = document.getElementById("son");
  
  father.removeChild(son);// 直接将son节点删除
  
  

获取节点

获取第一个子节点 - firstChild

        

        

        



var father = document.getElementById("father");
var first = father.firstChild;// 获取到的是文本节点 换行

获取第一个子元素 - firstElementChild

        

        

        



var father = document.getElementById("father");
var first = father.firstElementChild;// 获取到的是son1

获取第一个子元素兼容写法

// 获取element的第一个子元素
function getFirstElement(element){
    // 判断是否支持这一写法
    if(element.firstElementChild){
        return element.firstElementChild;
    }else{
        // 先找到第一个节点
        var first = element.firstChild;
        // 如果这个节点存在而且这个节点不是元素节点
        while(first&&first.nodeType !== 1){
            // 从这个节点向后继续找下一个兄弟节点
            first = first.nextSibling;
        }
        return first;
    }
}

获取最后一个子元素兼容写法

// 获取element的最后一个子元素
function getLastElement(element){
    // 判断是否支持这一写法
    if(element.lastElementChild){
        return element.lastElementChild;
    }else{
        // 先找到最后一个个节点
        var last = element.lastChild;
        // 如果这个节点存在而且这个节点不是元素节点
        while(last&&last.nodeType !== 1){
            // 从这个节点向前继续找上一个兄弟节点
            last = last.previousSibling;
        }
        return last;
    }
}

创建结构

document.write()

• 特点:只能被document调用,而且会覆盖页面上原有内容

  document.write("百度")
  
  // 可以在页面上创建一个a标签,而且会覆盖页面上原有的所有内容
  
  

innerHtml()

• 特点:往页面添加html标签,可以限定范围

  
  
  var box = document.getElementById("box");
  box.innerHtml = "百度";
  
  // 追加后的结构为
  
      百度
  
  
  

createElement()

• 特点:动态创建标签,添加到页面需要配合appendChild使用

  
  
  var box = document.getElementById("box");
  var input = document.createElement("input");
  input.type = "text";
  box.appendChild(input);
  
  

性能问题

    


    var box = document.getElementById("box");
    for(var i=0;i<1000;i++){
        box.innerHtml += "百度";
    }

    // 1.大量拼接字符串
    // 2.字符串转换为文档对象
    // 3.把对象挂接到DOM树上
    // 4.渲染引擎根据新的DOM树重新渲染

优化

### 数组拼接
    var arr = [];
    for(var i=0;i<1000;i++){
        arr.push("百度");
    }
    box.innerHtml = arr.join("");

### createElement
    for(var i=0;i<1000;i++){
        var a = document.createElement("a");
        box.apendChild(a);
        a.href = "http://www.baidu.com";
        a.innerHtml = "百度";
    }