第十天
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 = "百度";
}
