第十天

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

第十天

节点操作

克隆节点 - cloneNode()

element.cloneNode(): 复制element节点

参数:布尔值,

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

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

<div id="father">
    <div id="son"><div/>
</div>

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内部的最后位置

<div id="father">
    <div id="son"><div/>
</div>
<div id="demo"></div>

var father = document.getElementById("father");
var demo = document.getElementById("demo");
var clone = demo.cloneNode(true);// 将demo克隆一份 
father.appendChild(clone);// 将克隆出来的clone追加到father中

// 此时页面结构应该为
<div id="father">
    <div id="son"><div/>
    <div id="demo"></div>
</div>
<div id="demo"></div>

#追加克隆节点对原节点不会产生影响

//如果代码如下 则会将demo节点直接移动到father节点下
father.appendChild(demo);// demo是页面上存在的节点

// 此时页面结构应该为
<div id="father">
    <div id="son"><div/>
    <div id="demo"></div>
</div>

插入节点 - insertBefore()

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

<div id="father">
    <div id="son"><div/>
</div>
<div id="demo"></div>

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节点移除

<div id="father">
    <div id="son"><div/>
</div>

var father = document.getElementById("father");
var son = document.getElementById("son");

father.removeChild(son);// 直接将son节点删除

获取节点

获取第一个子节点 - firstChild

<div id="father">
        <div id="son1"><div/>
        <div id="son2"><div/>
        <div id="son3"><div/>
</div>

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

获取第一个子元素 - firstElementChild

<div id="father">
        <div id="son1"><div/>
        <div id="son2"><div/>
        <div id="son3"><div/>
</div>

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 href="http://www.baidu.com">百度</a>")

// 可以在页面上创建一个a标签,而且会覆盖页面上原有的所有内容

innerHtml()

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

<div id="box"></div>

var box = document.getElementById("box");
box.innerHtml = "<a href="http://www.baidu.com">百度</a>";

// 追加后的结构为
<div id="box">
    <a href="http://www.baidu.com">百度</a>
</div>

createElement()

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

<div id="box"></div>

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

性能问题

    <div id="box"></div>

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

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

优化

### 数组拼接
    var arr = [];
    for(var i=0;i<1000;i++){
        arr.push("<a href="http://www.baidu.com">百度</a>");
    }
    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 = "百度";
    }

DOM(四)