day07：节点的应用
目录
- 一、总结
- 二、模板-案例切换图片
- 三、模板-全选和反选案例
- 四、模板-全选和反选案例
- 五、模板-全选和反选案例
- 六、第一种创建元素的方式
- 七、第二种创建元素的方式
- 八、点击创建人物
- 九、点击创建列表
- 十、第三种创建元素的方式
一、总结
第一、12行代码，都是需要掌握的（前四个是必须要倒背如流的）
var ulObj = document.getElementById("uu");
父级节点 ulObj.parentNode
父级元素 ulObj.parentElement
子级节点 ulObj.childNodes
子级元素 ulObj.children
// 总结：以上四个是最常用，兼容所有的浏览器
// 下面是我们扩展的
第一个子节点 ulObj.firstChild ---- IE8中是元素
第一个子元素 ulObj.firstElementChild ---- IE8 不支持
最后一个子节点 ulObj.lastChild ---- IE8中是元素
最后一个子元素 ulObj.lastElementChild ---- IE8 不支持
某个元素的前一个兄弟节点 .previousSibling ---- IE8中是元素
某个元素的前一个兄弟元素 .previousElementSibling ---- IE8 不支持
某个元素的后一个兄弟节点 .nextSibling ---IE8中是元素
某个元素的后一个兄弟元素 .nextElementSibling ---IE8不支持
总结： 从第一个子节点开始，只要是节点：在IE8等低版本浏览器都叫做元素。只要是子元素：IE8等低版本浏览器都不支持
第二、获取属性(用的相对少一些) .getAttributeNode(“id”) — 到此我们把标签、属性、和文本都获取到了
二、模板-案例切换图片
<body>
<div id="mask">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</div>
<script src="publick.js"></script>
<script>
// 获取子元素
var imgObjs = my$("mask").children;//获取的是一个集合---伪数组
// 循环遍历
for(var i = 0; i < imgObjs.length; i++){
// 为了给每个图片加点击事件
imgObjs[i].onclick = function(){
// 记得老师教大家的口诀:把字符串删除 "+变量+" 可以加薪的大招
document.body.style.backgroundImage = 'url("'+this.src+'")';
// document.body.style.backgroundImage = "url('"+this.src+"')";
// 是否曾经记得老师还交给大家的转义字符 第二种方法
// document.body.style.backgroundImage = "url(\""+this.src+"\")";
// 再扩展一个ES6的写法 先写 `${变量}` 这个后面会详细讲解
// document.body.style.backgroundImage = `url("${this.src}")`;
}
}
</script>
</body>
三、模板-全选和反选案例
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>油炸榴莲</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>清蒸助教</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div>
<script src="publick.js"></script>
<script>
// 获取全选的这个复选框
var ckAll = my$("j_cbAll");//获取到了上面的全选和反选的复选框
// 获取tbody中所有的小的复选框
var cks = my$("j_tb").getElementsByTagName("input");//集合--获取到了所有的复选框--tbody里面的复选框
// 点击全选的这个复选框，获取他的当前的状态，然后设置tbody中的所有的复选框的状态---跟他一模一样
ckAll.onclick = function(){
// alert("教大家测试");学会测试
// console.log(this.checked);
// 拿到下面tbody里面所有的复选框的状态this.checked让他跟我们的复选框一样 this.checked
for(var i = 0; i < cks.length; i++){
cks[i].checked = this.checked;
}
}
</script>
</body>
四、模板-全选和反选案例
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>油炸榴莲</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>清蒸助教</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div>
<script src="publick.js"></script>
<script>
// 获取全选的这个复选框
var ckAll = my$("j_cbAll");//获取到了上面的全选和反选的复选框
// 获取tbody中所有的小的复选框
var cks = my$("j_tb").getElementsByTagName("input");//集合--获取到了所有的复选框--tbody里面的复选框
// 点击全选的这个复选框，获取他的当前的状态，然后设置tbody中的所有的复选框的状态---跟他一模一样
ckAll.onclick = function () {
// alert("教大家测试");学会测试
// console.log(this.checked);
// 拿到下面tbody里面所有的复选框的状态this.checked让他跟我们的复选框一样 this.checked
for (var i = 0; i < cks.length; i++) {
cks[i].checked = this.checked;
}
}
// 重点
// 循环tbody中的所有的复选框，分别给他们做点击事件
for (var i = 0; i < cks.length; i++) {
// 为了给每个复选框做点击事件
cks[i].onclick = function () {
// 假设 flag 为true
var flag = true;//假设被选中
// 循环判断是否所有的复选框到底有没有被选中
for (var j = 0; j < cks.length; j++) {
// 为了判断下面的每个复选框到底有没有被选中
if (!cks[j].checked) {//cks[j].checked 表示复选框的状态-- !false---true
// 没有被选中就进来
flag = false;
break;
}
}
// 让我们全选的复选框的状态跟我们设置的假设的flag是一样的
ckAll.checked = flag;
}
}
</script>
</body>
五、模板-全选和反选案例
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>油炸榴莲</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>清蒸助教</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div>
<script src="publick.js"></script>
<script>
// 获取全选的这个复选框
var ckAll = my$("j_cbAll");//获取到了上面的全选和反选的复选框
// 获取tbody中所有的小的复选框
var cks = my$("j_tb").getElementsByTagName("input");//集合--获取到了所有的复选框--tbody里面的复选框
// 点击全选的这个复选框，获取他的当前的状态，然后设置tbody中的所有的复选框的状态---跟他一模一样
ckAll.onclick = function () {
// alert("教大家测试");学会测试
// console.log(this.checked);
// 拿到下面tbody里面所有的复选框的状态this.checked让他跟我们的复选框一样 this.checked
for (var i = 0; i < cks.length; i++) {
cks[i].checked = this.checked;
}
}
// 重点
// 循环tbody中的所有的复选框，分别给他们做点击事件
for(var i = 0; i < cks.length; i++){
// 给每个复选框做点击事件
cks[i].onclick = function(){
// 假设 flag
var flag = true;//假设被选中
// 循环判断下面的复选框是否都被选中了
for(var j = 0; j < cks.length; j++){
// 判断
if(!cks[j].checked){//cks[j].checked表示复选框的状态 !false ---true
// 没有被选中则进来
flag = false;
break;
}
}
// 让我们上面的全选的复选框跟我们的flag一样
ckAll.checked = flag;
}
}
</script>
</body>
六、第一种创建元素的方式
<body>
<input type="button" value="创建元素" id="btn">
我们继续加油,给力，也可以把问题直接发到qq群，我们是一个大家庭,互帮互助，效果更好
<script src="publick.js"></script>
<script>
my$("btn").onclick = function(){
document.write("我是一个段落标签,我们班有很多很多大神
")
}
// document.write缺陷：当页面加载完毕的时候，在执行document.write,他会把我们前面的内容都覆盖掉。
</script>
</body>
七、第二种创建元素的方式
<body>
<input type="button" value="创建一个p标签" id="btn">
<div id="dv"></div>
<script src="publick.js"></script>
<script>
my$("btn").onclick = function(){
my$("dv").innerHTML = "一见如故
";
}
</script>
八、点击创建人物
<body>
<input type="button" id="btn" value="来一个美女">
<div id="dv"></div>
<script src="publick.js"></script>
<script>
my$("btn").onclick = function(){
my$("dv").innerHTML = "
"
}
</script>
</body>
九、点击创建列表
<body>
<input type="button" value="创建列表" id="btn">
<div id="dv"></div>
<script src="publick.js"></script>
<script>
var names = ["杨过", "郭靖", "张无忌", "张三丰", "乔峰", "段飞", "丁棚","小龙女","黄蓉"];
my$("btn").onclick = function(){
var str = ""
;
//循环遍历
for(var i = 0; i < names.length; i++){
// 用到了我们的大招 删除固定的字符串 "+变量+",也可以用`${变量}`
str += "" +names[i]+"";
}
str += "";
my$("dv").innerHTML = str;
//需求：动态创建元素之后还要实现隔行换色
// 获取所有的li，循环遍历添加鼠标经过和鼠标离开
var list = my$("dv").getElementsByTagName("li");
// 循环遍历
for(var i = 0; i < list.length; i++){
// 鼠标经过
list[i].onmouseover = function(){
this.style.backgroundColor = "pink";
}
// 鼠标离开
list[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
}
</script>
</body>
十、第三种创建元素的方式
<body>
<input type="button" value="创建元素" id="btn">
<div id="dv"></div>
<script src="publick.js"></script>
<script>
my$("btn").onclick = function(){
// 第一步：先创建元素
var pObj = document.createElement("p");//创建元素
pObj.innerText = "这是一个段落标签";
// 第二步：追加到父元素里面
my$("dv").appendChild(pObj);//把创建好的元素追加到父元素里面
/*
总结：我们第三种创建元素的方式：2步骤
1、先创建元素 document.createElement("标签的名字");
2、把创建好的元素追加到父元素身上，里面 appendChild()
举个大白话：就像小孩一样，先有小孩，再上户口
*/
}
</script>
</body>