<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Day3</title>
<style>
#dv3 img {
display: inline-block;
height: 100px;
150px;
cursor: pointer;
}
#dv6{
height: 200px;
200px;
border: 1px dashed #af521b;
}
</style>
</head>
<body>
<script>
//节点：Node所有的内容都是一个节点 可以分为标签、属性、文本
//节点的属性：nodeType:节点类型：标签节点：1; 属性节点：2; 文本节点：3;
// nodeName:节点名：标签节点：大写标签名; 属性节点：小写属性名; 文本节点：#text;
// nodeValue:节点内容：标签节点：null; 属性节点：属性值; 文本节点：文本内容;
//获取节点的方式：parentNode----获取父节点
// parentElement----获取父元素 元素就是一个节点，一般来说，一个父级元素如果包含子节点，那么这个父级
// 元素很可能就是一个标签节点，所以说获取父元素实际上和获取父节点意义相同。
// chlidNodes----获取子节点--得到伪数组
// chlidren----获取子元素---得到伪数组 子节点和子元素不同！子节点包括文本节点，子元素只有标签节点
//
// firstChild----获取第一个子节点
// firstElementChild----获取第一个子元素
//
// lastChild----最后一个子节点
// lastElementChild----最后一个子元素
//
// previousSibling----前一个兄弟节点
// previousElementSibling----前一个兄弟元素
//
// nextSibling----后一个兄弟节点
// nextElementChild----后一个兄弟元素
//
// getAttributeNode("属性名")----根据属性名获取属性节点
</script>
<div id="dv1">
<p>文本</p>
<input type="text" name="" id="">
<a href=""></a>
<ul id="uu">
<li>蒹葭苍苍</li>
<li>白露为霜</li>
<li>所谓伊人</li>
<li>在水一方</li>
</ul>
</div>
<script>
var uObj = document.getElementById("uu");
console.log(uObj.parentNode);
console.log(uObj.parentElement);
console.log(uObj.parentNode.nodeType);
console.log(uObj.parentNode.nodeName);
console.log(uObj.parentNode.nodeValue);
var dvObj = document.getElementById("dv1");
console.log(dvObj.childNodes);
console.log(dvObj.children);
console.log(dvObj.getAttributeNode("id"));
</script>
<!-- 案例：用节点的方式修改标签样式 -->
<div id="dv2">
<p>1</p>
<span>2</span>
<p>1</p>
<span>2</span>
<p>1</p>
<a href="#">3</a> <br/>
<span>2</span>
<p>1</p>
</div>
<script>
var dv2 = document.getElementById("dv2");
var dv2Nodes = dv2.childNodes;
for (var i = 0; i < dv2Nodes.length; i++) {
if (dv2Nodes[i].nodeType == 1 && dv2Nodes[i].nodeName == "P") {
dv2Nodes[i].style.backgroundColor = "pink";
}
}
</script>
<!-- 案例：利用节点实现隔行变色 -->
<ul id="uu2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<script>
var num = 0;
var liObj = document.getElementById("uu2").childNodes;
for (var i = 0; i < liObj.length; i++) {
if (liObj[i].nodeType == 1 && liObj[i].nodeName == "LI") {
//liObj[i].style.backgroundColor = i%2 == 0 ? "red" : "yellow"; //结果全是yellow。因为获取子节点包括了文本节点，其中li标签就是第2.4.6.8...个子节点，对应索引就是第1.3.5.7...,为奇数，所以改变样式这行代码中的i都是奇数，结果全换成了yellow
num++ //为li子节点计数,以便于计算是第奇数个li还是第偶数个li(对2取余 ==0？)
liObj[i].style.backgroundColor = num%2 == 0 ? "red" : "yellow";
}
}
</script>
<!-- 案例：切换背景图片 -->
<div id="dv3">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</div>
<script>
var imgObj = document.getElementById("dv3").children;
for (var i = 0; i < imgObj.length; i++) {
imgObj[i].onclick = function(){
//document.body.style.backgroundImage = "url(this.src)"; //这样不行，url(this.src)真个被看成了字符串
document.body.style.backgroundImage = "url("+this.src+")"; //另外要注意js设置CSS样式，应该为 属性 = "属性值";这里用"url("+this.src+")"得到的结果还是字符串，可以实现。
// 例
//document.body.style.backgroundColor = pink; //这里属性值没加""报错
//document.body.style.backgroundColor = "pink"; //实现
};
}
</script>
<!-- 案例 ：全选 -->
<div id="dv4">
<table border="1">
<thead style="background-color: skyblue;">
<tr>
<td> <input type="checkbox"></td>
<td>全选</td>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox"></td>
<td>吃饭</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>睡觉</td>
</tr>
<tr>
<td> <input type="checkbox"></td>
<td>打豆豆</td>
</tr>
</tbody>
</table>
</div>
<script>
//获取元素
var dv4 = document.getElementById("dv4");
var hd = dv4.getElementsByTagName("thead")[0].getElementsByTagName("input")[0];
var bd = dv4.getElementsByTagName("tbody")[0].getElementsByTagName('input');
//设置全选全不选
hd.onclick = function(){
// if (this.checked) { //checked获取元素的选中状态，返回一个布尔值
// for (var i = 0; i < bd.length; i++) {
// bd[i].checked = true;
// }
// }else{
// for (var i = 0; i < bd.length; i++) {
// bd[i].checked = false;
// }
// }
//简化代码
for (var i = 0; i < bd.length; i++) {
bd[i].checked = this.checked;
}
};
//设置根据下面的状态改变全选的复选框
for (var i = 0; i < bd.length; i++) {
bd[i].onclick = function(){
var flag = true; //默认全选
for (var j = 0; j < bd.length; j++) {
//遍历，如果有没选中的则设置flag = false
if (!bd[j].checked) {
flag = false
}
//没设置else，即全都选中了的话flag为默认值
}
hd.checked = flag;
};
}
</script>
<!-- 创建元素：某些元素内容不是必须的，用户需要时才加载的东西，可以根据事件创建新元素，这样可以减少网页加载时获取的资源，提高用户体验 -->
<!-- 创建元素的方式: 1.document.write("新元素")
2.对象.innerHTML = "" 回忆 对象.innerText = "":不能创建新元素，只能获取和写入文本
3.document.createElement("标签名"); 此方法创建一个标签，还需要用其他方法写入标签内容以及将新标签追加到父元素中
-->
<input type="button" value="创建一个新标签" id="btn1">
<input type="button" value="创建一个新标签" id="btn2">
<input type="button" value="创建一个新标签" id="btn3">
<div id="dv5"></div>
<script>
//点击按钮创建新标签
document.getElementById("btn1").onclick = function(){
document.write("<p>这是一个新标签</p>"); //document.write()方法在页面加载完毕之后使用会用新元素覆盖所有的原有元素
};
document.write("<p>这是另一个新标签</p>"); //在页面加载时使用document.write()方法不会覆盖
document.getElementById("btn2").onclick = function(){
document.getElementById("dv5").innerHTML = "<p>这是一个新标签</p>"; //innerHTML：以赋值的方式创建，每次都会覆盖原有内容，创建写好的内容。
};
document.getElementById("btn3").onclick = function(){
var pObj = document.createElement("p"); //创建新标签
pObj.innerText = "这是一个新标签"; //写入内容
document.getElementById("dv5").appendChild(pObj); //将创建的新标签追加到想要放的地方
};
</script>
<!-- 案例：用两种方式创建新列表 -->
<input type="button" value = "创建" id="btn4">
<input type="button" value = "创建" id="btn5">
<div id="dv6"></div>
<script>
var names = ["氢","氦","锂","铍","硼"];
var dv6 = document.getElementById("dv6");
//方式1利用innerHTML
document.getElementById("btn4").onclick = function(){
//利用循环编写innerText里的内容
var str = "<ul>";
for (var i = 0; i < names.length; i++) {
str += "<li>" + names[i] + "</li>";
}
str += "</ul>";
dv6.innerHTML = str;
//循环注册鼠标经过的效果
var liObj = dv6.getElementsByTagName("ul")[0].children; //直接getElementsByTagName("li")
for (var i = 0; i < liObj.length; i++) {
liObj[i].onmouseover = function(){
this.style.backgroundColor = "skyblue"; //注意，这里的this不能用liObj[i]!!
};
liObj[i].onmouseout = function(){
this.style.backgroundColor = ""; //注意，这里的this不能用liObj[i]!!
};
}
};
//方式2利用document.createElement
document.getElementById("btn5").onclick = function(){
var ulObj = document.createElement("ul"); //创造一个ul
dv6.appendChild(ulObj); //放入目标地方
for (var i = 0; i < names.length; i++) { //循环创造li元素并注入
var li = document.createElement("li");
li.innerText = names[i];
ulObj.appendChild(li);
}
//循环注册鼠标经过的效果
var liObj = dv6.getElementsByTagName("li");
for (var i = 0; i < liObj.length; i++) {
liObj[i].onmouseover = mouseoverHandle;
liObj[i].onmouseout = mouseoutHandle; //这里创建了两个命名函数，好处：节省空间，在for循环中只利用了两个函数的空间。而在方式1中的for循环中，每个i都创建了两个匿名函数，使用了两个对应的内存空间。
//总结：循环中最好使用命名函数，不是循环的事件函数最好用匿名函数
}
function mouseoverHandle(){
this.style.backgroundColor = "skyblue";
}
function mouseoutHandle(){
this.style.backgroundColor = "";
}
};
</script>
<!-- 元素的一些方法： 1 父元素.appendChild(新元素) 在父元素的内部后面追加新元素
2 父元素.insertBefore(新元素,参照元素)在参照元素外面的前面插入新元素
3 父元素.replaceChild(新元素,参照元素)将参照元素替换为新元素
4 父元素.removeChild(元素)移除父元素中的指定元素
-->
<br>
<input type="button" value="在c后面插入" id="btn6">
<input type="button" value="在a前面插入" id="btn7">
<input type="button" value="替换b" id="btn8">
<input type="button" value="移除c" id="btn9">
<div id="dv7">
<p>a</p>
<span>b</span>
<h3>c</h3>
</div>
<script>
var dv7 = document.getElementById("dv7");
document.getElementById("btn6").onclick = function(){
var newElement = document.createElement("input");
newElement.type = "button";
newElement.value = "新元素";
dv7.appendChild(newElement);
};
//这一比较这两个格式，下面这个无法实现多次点击插入多个，因为这个新元素是在点击事件之外创建的，每次点击调用的都是这一个新元素， appendChild()方法特别注意：如果文档树中已经存在了这个新元素，它将从文档树中删除，然后重新插入它的新位置。利用appendChild()可以实现改变元素位置的操作
// var dv7 = document.getElementById("dv7");
// var newElement = document.createElement("input");
// newElement.type = "button";
// newElement.value = "新元素";
// document.getElementById("btn6").onclick = function(){
// dv7.appendChild(newElement);
// };
// document.getElementById("btn7").onclick = function(){ //这个事件用来测试新元素已经存在的情况下的结果
// dv6.appendChild(newElement);
// };
document.getElementById("btn7").onclick = function(){
var newElement = document.createElement("input");
newElement.type = "button";
newElement.value = "新元素";
dv7.insertBefore(newElement, dv7.firstElementChild);
};
document.getElementById("btn8").onclick = function(){
var newElement = document.createElement("input");
newElement.type = "button";
newElement.value = "新元素";
dv7.replaceChild(newElement, dv7.getElementsByTagName("span")[0]);
};
document.getElementById("btn9").onclick = function(){
var newElement = document.createElement("input");
newElement.type = "button";
newElement.value = "新元素";
dv7.removeChild(dv7.lastElementChild);
};
</script>
<!-- 如何实现利用document.createElement多次触发不会创建多个元素：有则删除，无则创建 -->
<!-- 如何为同一个元素的同一个事件绑定多个事件处理函数 ：
若直接编写多个事件函数，后面的会覆盖前面的
方法：元素.addEventListener("事件名-去除on","事件处理函数","false");
-->
<button id="btn10" value="">按钮</button>
<div id="dv8" style=" 100px; height: 100px; border: 1px solid yellow;"></div>
<script>
var btn10 = document.getElementById("btn10");
var dv8 = document.getElementById("dv8");
btn10.addEventListener("click", function(){
dv8.style.backgroundColor = "pink";
// dv8.style.background = "pink";
}, false);
btn10.addEventListener("click", function(){
dv8.innerText = "叽叽叽叽鸡";
}, false);
btn10.addEventListener("click", function(){
dv8.style.textAlign = "center";
}, false);
//可以看出三个事件函数都能发生
</script>
</body>
</html>