#节点的删除
<div class="box">
<button>删除</button>
<ul>
<li>321</li>
<li>123</li>
<li>132</li>
</ul>
</div>
<script>
// createElement:创建节点
// appendChild:追加一个节点
// removeChild:删除一个节点
var btn = document.querySelector("button")
var ul = document.querySelector("ul")
var liList = document.querySelectorAll("li")
btn.onclick = function(){
if(ul.children.length == 0){
this.disabled = true;
}else{
ul.removeChild(ul.children[0])
}
}
</script>
#留言板案例
<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(){
var li = document.createElement("li")
if(textarea.value !== ""){
li.innerText = textarea.value
var btn1 = document.createElement("button")
btn1.innerText = "删除"
btn1.onclick = function(){
ul.removeChild(li)
}
li.appendChild(btn1)
ul.appendChild(li)
textarea.value = ""
}else{
alert("发布内容不能为空")
}
}
</script>
#克隆节点
<div class="box">
<ul>
<li>123</li>
<li>321</li>
<li>132</li>
<li>312</li>
</ul>
</div>
<script>
var ul = document.querySelector("ul")
// var newul = ul.cloneNode()
var newul = ul.cloneNode(true)
console.log(newul)
</script>
#表格操作
<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>
// 数组生成DOM元素
// 数组里面可以有对象
var students = [
{
name:"张三",
subject:"javascript",
score: 99
},
{
name:"李四",
subject:"javascript",
score: 100
},
{
name:"王朝",
subject:"javascript",
score: 99
},
]
// 向tbody里面进行appendChild值，列出所有的数据
var tbody = document.querySelector("tbody")
for(var i = 0; i < students.length; i++){
// 创建一个tr
var tr = document.createElement("tr")
tr.align = "center"
// 循环创建td
for(var key in students[i]){
var td = document.createElement("td")
td.innerHTML = students[i][key]
tr.appendChild(td)
}
// 增加删除操作
var td = document.createElement("td")
td.innerHTML = "<a href = 'javascript:void(0)'>删除</a>"
tr.appendChild(td)
// 将tr放入tbody里面
tbody.appendChild(tr)
}
// 给每一个a标签添加一个删除事件
var allA = document.querySelectorAll("a")
for(var i = 0; i < allA.length; i++){
allA[i].onclick = function(){
console.log(i)
// 当点击的时候，for循环已经执行完毕！！取到i值为最大值
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
#创建元素的三种方法
<script>
// 创建元素1
// var tr = document.createElement("tr")
// var li = document.createElement("li")
// li.innerText = "你好"
// document.body.appendChild(li)
// 创建元素2
// innerHTML = ""
// var inner = "<tr></tr>"
// document.body.innerHTML = "<li>你好</li>"
// 创建元素3
// document.write("写到document中去")
// document.write("<li>你好</li>")
</script>
#innerHTML
<script>
for(var i = 0; i < 10; i++){
document.body.innerHTML += "<div>你好</div>"
// 每一次执行就会重新渲染页面！！！速度比较慢
}
</script>
#通过数组的方式进行拼接
<script>
var arr = []
for(var i = 0; i < 100; i++){
// 数组是在内存中的数据，所以速度比较快
arr.push("<div>你好</div>")
}
// 渲染了一次页面
document.body.innerHTML = arr.join("")
</script>
#createElement
<script>
var d1 = +new Date()
for(var i = 0; i < 100; i++){
var div = document.createElement("div")
div.innerText = "你好"
document.body.appendChild(div)
}
var d2 = +new Date()
console.log(d2 - d1)
// 尽可能减少DOM操作，减少页面渲染
</script>
#事件注册
<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("点击事件产生了！！！")
}
var f2 = function(){
console.log("点击事件产生了1！！！")
}
btn.addEventListener("click",f1)
btn.addEventListener("click",f2)
// 有增加就有删除
// removeEventListener
btn.removeEventListener("click", f1)
</script>
#冒泡事件
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
var ul = document.querySelector("ul")
// 冒泡事件
var li = document.querySelectorAll("li")
for(var i = 0; i < li.length; i++){
li[i].onclick = function(){
console.log("这是点击了")
}
}
ul.onclick = function(){
// 当点击li的时候，就会执行该函数
// 冒泡事件，当点击，这个事件就会一直向上传递，执行每一个事件函数，直到html
// 冒泡事件是浏览器的默认事件
console.log("ul点击事件")
}
</script>
#事件流的三个阶段
<div>
<ul>
<li>1</li>
<li>2</li>
<li class="san">3</li>
</ul>
</div>
<script>
// 事件流分为三个阶段
// 捕获阶段 捕获 你点击了谁就捕获谁 （capture）
// 目标阶段 查到了谁点击了 （target）
// 冒泡阶段 (bubbling)
var san = document.querySelector(".san")
san.onclick = function(){
console.log("zhixing")
}
</script>
#三个事件流阶段案例
<style>
.da{
width: 400px;
height: 400px;
border: 1px solid red;
}
.zhong{
width: 200px;
height: 200px;
border: 1px solid red;
}
.xiao{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<div class="da">
<div class="zhong">
<div class="xiao"></div>
</div>
</div>
<script>
// 捕获阶段事件也可以进行绑定
var da = document.querySelector(".da")
var zhong = document.querySelector(".zhong")
var xiao = document.querySelector(".xiao")
// 第三个参数为true，那么这个事件处理函数就是捕获阶段的
da.addEventListener("click",function(){
console.log("da捕获阶段")
},true)
da.addEventListener("click",function(){
console.log("da冒泡")
},false)
zhong.addEventListener("click",function(){
console.log("zhong捕获阶段")
},true)
zhong.addEventListener("click",function(){
console.log("zhong冒泡")
},false)
// 当处于目标阶段时，应该是谁先注册了函数谁先执行
xiao.addEventListener("click",function(){
console.log("xiao捕获阶段")
},true)
xiao.addEventListener("click",function(){
console.log("xiao冒泡")
},false)
</script>
