您的位置：首页 > 其它

DOM创建和删除节点

2015-10-25 19:32 323 查看

一、创建节点

　　3步　　

　　1.创建空元素对象：

　　　　var newElem=document.createElement("标签名");

　　　　例如：var a=document.createElement("a");//<a></a>

　　2.设置必要属性

　　　　newElem.属性名="值";

　　　　newElem.innerHTML="文本";

　　　　例如：a.href="http://tmooc.cn";a.innerHTML="go to tmooc";

　　3.将元素对象挂载到指定父元素下(2种)

　　追加：parent.appendChild(newElem);

　　插入新元素：parent.insertBefore(newElem,oldElem);

　　强调：只有向已经在页面中的父元素追加新节点，才导致渲染

二、创建文档片段

　　文档片段：内存中，临时存储多个子节点的存储空间

　　减少渲染频率：先将所有平级元素先追加到文档片段中,将文档片段一次性追加到父元素下.

　　var frag=new document.createDocumentFragment();

　　示例：动态创建表格

　　

<!DOCTYPE HTML>
<html>
<head>
<title>联动菜单</title>
<meta charset="utf-8" />
<script>
/*使用 HTML DOM 的方式实现联动菜单*/
var categories=[
{"id":10,"name":'男装',"children":[
{"id":101,"name":'正装'},
{"id":102,"name":'T恤'},
{"id":103,"name":'裤衩'}
]},
{"id":20,"name":'女装',"children":[
{"id":201,"name":'短裙'},
{"id":202,"name":'连衣裙'},
{"id":203,"name":'裤子',"children":[
{"id":2031,"name":'长裤'},
{"id":2031,"name":'九分裤'},
{"id":2031,"name":'七分裤'}
]},
]},
{"id":30,"name":'童装',"children":[
{"id":301,"name":'帽子'},
{"id":302,"name":'套装',"children":[
{"id":3021,"name":"0-3岁"},
{"id":3021,"name":"3-6岁"},
{"id":3021,"name":"6-9岁"},
{"id":3021,"name":"9-12岁"}
]},
{"id":303,"name":'手套'}
]}
];

//专门遍历一级分类 data保存当前同级分类的数组
function loadData(data){
//创建一个select对象
//在select对象中追加一个新option，内容为请选择"-请选择-",值为0
//遍历data中每个类别对象
// 每遍历一个，就要在select中追加一个option，内容是当前对象的name属性值为当前对象的id属性
//
var select=document.createElement("select");
select.add(new Option("-请选择-",0));
for (var key in data)
{
select.add(new Option(data[key].name,data[key].id));
}
//为新创建的select对象，添加onchange时间
select.onchange=function(){
//this-->select

//将当前select后的元素都删除
var parent=this.parentNode;
while(parent.lastChild!=this){
parent.removeChild(parent.lastChild);
}

/*
获得和选中项位置对应的类别子对象
*/
var category=data[this.selectedIndex-1];
if(category!=undefined&&category.children){
loadData(category.children);
}
}
document.querySelector("#category").appendChild(select);

}

window.onload=function(){
loadData(categories);
}

</script>
</head>
<body>
<div id="category"></div>
</body>
</html>

View Code

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航