节点的删除
removeChild -- 删除子节点
例1：
<div class="box">
<button>删除</button>
<ul>
<li>刘德华</li>
<li>周润发</li>
<li>古巨基</li>
</ul>
</div>
<script>
var btn = document.querySelector("button")
var ul = document.querySelector("ul")
btn.onclick = function() {
if(ul.children.length === 0) {
this.disabled = true;
}else {
ul.removeChild(ul.children[0])
}
}
</script>
例2：
<div>
<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发布</button>
<ul>
</ul>
</div>
<script>
var textarea = document.querySelector("textarea")
var btn = document.querySelector("button");
var ul = document.querySelector("ul")
btn.onclick = function() {
// 将textArea的内容发布到ul中去
var li = document.createElement("li")
li.innerText = textarea.value;
// 增加一个删除按钮
var deleteBtn = document.createElement("button")
deleteBtn.innerText = "删除";
deleteBtn.onclick = function() {
// 删除当前的元素！！！
ul.removeChild(li)
}
//把删除按钮放到li上去
li.appendChild(deleteBtn)
ul.appendChild(li)
textarea.value = ""
}
</script>
克隆节点
cloneNode 克隆
如果cloneNode不加任何的内容，就只会克隆标签
如果加上true参数，就会进行深度克隆！！！
例1:
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script>
var ul = document.querySelector("ul");
var newUl = ul.cloneNode();
var newUl2 = ul.cloneNode(true);
console.log(newUl2)
</script>
例2：
<div class="box">
<table cellspacing="0" width="400px" align="center" border="1">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
// 1.数组生成DOM元素
// 数组里面可以有对象
var students = [
{
name: "张三",
subject: "javascript",
score: 99
},
{
name: "李四",
subject: "javascript",
score: 100
},
{
name: "吉吉",
subject: "javascript",
score: 100
}
]
// 2.向tbody里面进行appendChild值，列出所有的数据
var tbody = document.querySelector("tbody")
for(var i = 0; i < students.length; i++) {
// 1.创建一个tr
var tr = document.createElement('tr')
tr.align = "center"
// 2.循环创建td
for(var key in students[i]) {
var td = document.createElement("td");
td.innerHTML = students[i][key];
tr.appendChild(td)
}
// 3. 增加删除的操作
var td = document.createElement("td")
td.innerHTML = "<a href='javascript:void(0)'>删除</a>"
tr.appendChild(td)
// 4.将tr放入tbody
tbody.appendChild(tr)
}
// 3. 给每一个a标签增加一个删除事件
var allA = document.querySelectorAll("a");
console.log(allA)
for(var i = 0; i < allA.length; i++) {
allA[i].onclick = function() {
console.log(this)
// 这样的写法是不对！！！如果当你的点击的时候，for循环已经执行完毕！！！取到i值为最大值！！！
// tbody.removeChild(allA[i].parentNode.parenNode)
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
创建元素
1.创建元素
var tr = document.createElement("tr")
var li = document.createElement("li")
document.body.appendChild(li)
2.创建方式2
innerHTML = ""
var inner = "<tr></tr>"
document.body.innerHTML = "<li>李四</li>"
3.创建方式3
document.write("写到document中")
document.write("<li></li>")
例1：
1.
<script>
for(var i = 0; i < 1000; i++) {
// 这里渲染了1000次页面！！！
document.body.innerHTML += "<div>你好</div>"
// 每一次执行就会重新渲染页面！！！
}
</script>
2.
<script>
var arr = []
for(var i = 0; i < 1000; i++) {
// document.body.innerHTML += "<div>你好</div>"
// 每一次执行就会重新渲染页面！！！
// 数组是在内存中的数据！！！
arr.push("<div>你好</div>")
}
//渲染了一次页面！！！
document.body.innerHTML = arr.join("")
</script>
3.
<script>
for(var i = 0; i < 1000; i++) {
var div = document.createElement("div")
div.innerHTML = "你好"
document.body.appendChild(div)
}
</script>
同样的效果，第二种速度最快，
在写代码时要尽可能减少DOM操作，减少页面渲染，提升性能！！！
注册事件
<button>点击</button>
<script>
var btn = document.querySelector("button")
btn.onclick = function() {
console.log("点击1了！！！")
}
btn.onclick = function() {
console.log("点击2了！！！")
}
只有第二个事件处理函数执行了！！！把之前的处理函数 覆盖掉了！！！
当注册事件后！！！
增加事件的监听
使用addEventListener绑定事件，一单事件产生会执行绑定在上面的所有的事件处理函数！！！
var f1 = function() {
console.log("点击1事件产生了！！！")
}
var f2 = function() {
console.log("点击2事件产生了！！！")
}
btn.addEventListener('click', f1)
btn.addEventListener('click', f2)
有增加就有删除
removeEventListener --
btn.removeEventListener("click", f2)
事件流
事件流分为三个阶段
1.捕获阶段！！！ -- 捕获 你点击的谁就捕获谁！！！ (capture)
捕获的过程是从上到下！！！document html body
2.目标阶段 - 查到了谁点击了！！！ (target)
3.冒泡阶段！！！ bubbling
案例：
<div class="grandfater">
<div class="father">
<div class="son"></div>
</div>
</div>
<script>
// 1.捕获阶段事件也可以进行绑定
var grandfater = document.querySelector(".grandfater")
var father = document.querySelector(".father")
var son = document.querySelector(".son")
// 第三个参数为true,那么这个事件处理函数就是捕获阶段！！！
grandfater.addEventListener("click", function() {
console.log("grandfather捕获")
}, true)
grandfater.addEventListener("click", function() {
console.log("grandfather冒泡")
}, false)
father.addEventListener("click", function() {
console.log("father捕获")
}, true)
father.addEventListener("click", function() {
console.log("father冒泡")
}, false)
// 当处于目标阶段时。谁先注册了函数，谁先执行！！！
son.addEventListener("click", function() {
console.log("son冒泡")
}, false)
son.addEventListener("click", function() {
console.log("son捕获")
}, true)
</script>
