js初识第四节
2019-08-03 本文已影响0人
An的杂货铺
原生js删除dom节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul id="oul">
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<button id="btn">删除ul</button>
</body>
<script type="text/javascript">
//原生js删除dom节点
var btn = document.getElementById('btn');
var oul = document.getElementById('oul');
btn.onclick = function(){
oul.remove();
}
</script>
</html>
原生js动态创建一个表格的，并对其进行封装便于以后复用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" name="" id="hang"><span>行</span>
<input type="text" name="" id="lie"><span>列</span>
<button id="btn">点击创建</button>
<div id="outer">
</div>
</body>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
$('btn').onclick = function(){
createdtb();
}
//创建表格的函数
function createdtb(){
var h = $('hang').value;
var l = $('lie').value;
//创建表格主体
var tableone = document.createElement('table');
tableone.style.width = '300px';
tableone.style.height = '300px';
tableone.border = 1;
//创建表格的行
for(var i = 0;i<h;i++){
var trs = document.createElement('tr');
//为行创建列
for(var j = 0;j<l;j++){
var tds = document.createElement('td');
trs.appendChild(tds);
}
//为每一行单独再追加一列
var tda = document.createElement('td');
tda.innerHTML = "<a href='javascript:;'>删除</a>"
tda.style.textAlign = 'center';
trs.appendChild(tda);
tableone.appendChild(trs);
}
//将创建的表格添加进div
$('outer').appendChild(tableone);
//为所有的删除标签添加事件
var as = document.getElementsByTagName('a');
for(var i=0; i<as.length; i++) {
as[i].onclick = function() {
if (confirm("你确定删除么?")) {
// 删除当前a元素所在行
this.parentNode.parentNode.remove();//删除当前所在的行
if(tableone.children.length == 0){
tableone.remove();
//当删掉最后一行的时候整个表格也被移除掉
}
}
}
}
}
//对以上函数进行封装一下
function addtable(h,l){
var tableone = document.createElement('table');
tableone.style.width = '300px';
tableone.style.height = '300px';
tableone.border = 1;
//创建表格的行
for(var i = 0;i<h;i++){
var trs = document.createElement('tr');
//为行创建列
for(var j = 0;j<l;j++){
var tds = document.createElement('td');
trs.appendChild(tds);
}
//为每一行单独再追加一列
var tda = document.createElement('td');
tda.innerHTML = "<a href='javascript:;'>删除</a>"
tda.style.textAlign = 'center';
trs.appendChild(tda);
tableone.appendChild(trs);
}
//将创建的表格添加进div
document.body.appendChild(tableone);
//为所有的删除标签添加事件
var as = document.getElementsByTagName('a');
for(var i=0; i<as.length; i++) {
as[i].onclick = function() {
if (confirm("你确定删除么?")) {
// 删除当前a元素所在行
this.parentNode.parentNode.remove();//删除当前所在的行
if(tableone.children.length == 0){
tableone.remove();
//当删掉最后一行的时候整个表格也被移除掉
}
}
}
}
}
addtable(5,5);
</script>
</html>
创建文本节点和节点的克隆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<ul>
<li><span onclick="alert('123')">123</span></li>
</ul>
</body>
<script type="text/javascript">
//创建文本节点
var otext = document.createTextNode("<h1>一盒文本</h1>");
var odiv = document.querySelector('div');
odiv.appendChild(otext);//动态添加文本节点
//odiv.innerText = "<h1>123</h1>" //把标签当成文本来对待
odiv.innerHTML = "<h1>123</h1>" //当标签来处理
//对于一个节点来进行复制
var oli = document.querySelector('li');
var oliobe = oli.cloneNode(true);
var olio = oli.cloneNode(false);
console.log(oliobe);
console.log(olio);
document.querySelector('ul').appendChild(oliobe);
//node.cloneNode() 对一个节点进行复制,设置为 true，克隆节点及其属性，以及后代;若为false那么则只复制当前节点
</script>
</html>
一个clone节点应用的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" id="tb">
<tr>
<td><input type="checkbox"></td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
</table>
姓名:<input type="text" id="userName" />
性别: <input type="radio" name="sex" id="d" />男
<input type="radio" name="sex" />女
年龄: <input type="text" name="" id="age" />
<input type="button" id="saveBtn" value="保存" />
</body>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
$('saveBtn').onclick = function(){
var trs = $('tb').children[0].children[0].cloneNode(true);
trs.children[1].innerText = $('userName').value;
var sex = $('d').checked?"男":"女";
trs.children[2].innerText = sex;
trs.children[3].innerText = $('age').value;
$('tb').appendChild(trs);
}
</script>
</html>
文档碎片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 页面放置500个p元素 '我爱你'
// for(var i=0; i<1500; i++) {
// var oP = document.createElement("button");
// oP.innerHTML = "我爱你";
// document.body.appendChild(oP);
// }
// var str = "";
// for(var i=0; i<1500; i++) {
// str += "<button>我爱你</button>";
// }
// // 一次添加到body
// document.body.innerHTML = str;
//创建缓存
var cache = document.createDocumentFragment();
for(var i=0; i<1500; i++) {
var btn = document.createElement("button");
btn.innerHTML = "我爱你";
cache.appendChild(btn);
}
document.body.appendChild(cache);
// 当我们要想document中添加大量DOM节点时，如果循环插入，会出现明显的性能问题。我们也可以创建个新节点，比如说div，然后将div一次性插入document中，但是这样会多加一层div，而文档碎片（DocumentFragment）不会产生这种节点。
</script>
</body>
</html>
