节点
* 为什么要学节点
* 回顾概念
* 文档:document
* 元素:页面中所有的标签,元素---element, 标签----元素---对象
* 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
* 根元素:html标签
* 需求---用之前学习的知识点能否解决
* 获取div中所有的标签,设置每个标签的背景颜色
* 节点---任意一个标签中的元素获取都非常的方便
* 节点的操作的相关属性------>作用
* 节点的属性:(可以使用标签--元素.出来,可以使用属性节点.出来,文本节点.点出来)
* nodeType:节点的类型:1----标签,2---属性,3---文本
* nodeName:节点的名字:标签节点---大写的标签名字,属性节点---小写的属性名字,文本节点----#text
* nodeValue:节点的值:标签节点---null,属性节点---属性值,文本节点---文本内容
*
获取相关的节点案例:
<body>
<div id="dv">
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>乔峰</li>
<li>鹿茸</li>
<li id="three">段誉</li>
<li>卡卡西</li>
<li>雏田</li>
</ul>
</div>
<script src="common.js"></script>
<script>
var ulObj=my$("uu");
console.log(ulObj.parentNode);//div
console.log(ulObj.parentNode.parentNode);//body
console.log(ulObj.parentNode.parentNode.parentNode);//html
console.log(ulObj.parentNode.parentNode.parentNode.parentNode);//document
console.log(ulObj.parentNode.parentNode.parentNode.parentNode.parentNode);//null
// //ul标签的父级节点
// console.log(ulObj.parentNode);
// //ul标签的父级元素
// console.log(ulObj.parentElement);
//
// console.log(ulObj.parentNode.nodeType);//标签的---1
// console.log(ulObj.parentNode.nodeName);//标签---大写的标签名字
// console.log(ulObj.parentNode.nodeValue);//标签---null
</script>
</body>
获取相关的节点二:
<body>
<div id="dv">哦哦
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>乔峰</li>
<li>鹿茸</li>
<li id="three">段誉</li>
<li>卡卡西</li>
<li>雏田</li>
</ul>
</div>
<script src="common.js"></script>
<script>
//div
// var dvObj=document.getElementById("dv");
// //获取里面的每个子节点
// for(var i=0;i<dvObj.childNodes.length;i++){
// var node=dvObj.childNodes[i];
// //nodeType--->节点的类型:1---标签,2---属性,3---文本
// //nodeName--->节点的名字:大写的标签--标签,小写的属性名---属性,#text---文本
// //nodeValue-->节点的值:标签---null,属性--属性的值,文本--文本内容
// console.log(node.nodeType+"====="+node.nodeName+"===="+node.nodeValue);
// }
//div
// var dvObj=document.getElementById("dv");
// //获取的是属性的节点
// var node=dvObj.getAttributeNode("id");
// console.log(node.nodeType+"----"+node.nodeName+"===="+node.nodeValue);
//div
// var dvObj=document.getElementById("dv");
// //子节点
// console.log(dvObj.childNodes);//7个子节点
// //子元素
// console.log(dvObj.children);
</script>
</body>
获取相关的节点三:
<body>
<div id="dv">哦哦
<span>这是div中的第一个span标签</span>
<p>这是div中的第二个元素,第一个p标签</p>
<ul id="uu">
<li>乔峰</li>
<li>鹿茸</li>
<li id="three">段誉</li>
<li>卡卡西</li>
<li>雏田</li>
</ul>
</div>
<script src="common.js"></script>
<script>
//12行代码:都是获取节点和元素的
//ul
var ulObj=document.getElementById("uu");
//父级节点
console.log(ulObj.parentNode);
//父级元素
console.log(ulObj.parentElement);
//子节点
console.log(ulObj.childNodes);
//子元素
console.log(ulObj.children);
console.log("==============================================");
//第一个子节点
console.log(ulObj.firstChild);//------------------------IE8中是第一个子元素
//第一个子元素
console.log(ulObj.firstElementChild);//-----------------IE8中不支持
//最后一个子节点
console.log(ulObj.lastChild);//------------------------IE8中是第一个子元素
//最后一个子元素
console.log(ulObj.lastElementChild);//-----------------IE8中不支持
//某个元素的前一个兄弟节点
console.log(my$("three").previousSibling);
//某个元素的前一个兄弟元素
console.log(my$("three").previousElementSibling);
//某个元素的后一个兄弟节点
console.log(my$("three").nextSibling);
//某个元素的后一个兄弟元素
console.log(my$("three").nextElementSibling);
//总结:凡是获取节点的代码在谷歌和火狐得到的都是 相关的节点
//凡是获取元素的代码在谷歌和火狐得到的都是 相关的元素
//从子节点和兄弟节点开始,凡是获取节点的代码在IE8中得到的是元素,获取元素的相关代码,在IE8中得到的是undefined----元素的代码,iE中不支持
// var ulObj=document.getElementById("uu");
//
//
// console.log("==============================================");
// //第一个子节点
// console.log(ulObj.firstChild.innerText);//------------------------IE8中是第一个子元素
// //第一个子元素
// console.log(ulObj.firstElementChild);//-----------------IE8中不支持
// //最后一个子节点
// console.log(ulObj.lastChild.innerText);//------------------------IE8中是第一个子元素
// //最后一个子元素
// console.log(ulObj.lastElementChild);//-----------------IE8中不支持
// //某个元素的前一个兄弟节点
// console.log(my$("three").previousSibling.innerText);
// //某个元素的前一个兄弟元素
// console.log(my$("three").previousElementSibling);
// //某个元素的后一个兄弟节点
// console.log(my$("three").nextSibling.innerText);
// //某个元素的后一个兄弟元素
// console.log(my$("three").nextElementSibling);
//
</script>
</body>
* 12行代码----有用的----熟练的问题,
获取全选和全部选的案例:
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<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="common.js"></script>
<script>
//获取全选的这个复选框
var ckAll = my$("j_cbAll");
//获取tbody中所有的小复选框
var cks = my$("j_tb").getElementsByTagName("input");
//点击全选的这个复选框,获取他当前的状态,然后设置tbody中所有复选框的状态
ckAll.onclick = function () {
//console.log(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].οnclick=function () {
var flag=true;//默认都被选中了
//判断是否所有的复选框都选中
for(var j=0;j<cks.length;j++){
if(!cks[j].checked){
//没选中就进来了
flag=false;
break;
}
}
//全选的这个复选框的状态就是flag这个变量的值
ckAll.checked=flag;
};
}
</script>
</body>
* 元素的创建三种方式------重点的内容
第一种元素创建的方式:
<body>
<input type="button" value="创建一个p" id="btn"/>
小苏是一个快乐的小男孩,人家今年才38岁.好帅哦
<script src="common.js"></script>
<script>
//document.write("标签代码及内容");
my$("btn").οnclick=function () {
document.write("<p>这是一个p</p>");
};
// document.write("<p>这是一个p</p>");
//document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉
</script>
</body>
第二种元素创建的方式:
<body>
<input type="button" value="创建一个p" id="btn" />
<div id="dv"></div>
<script src="common.js"></script>
<script>
//点击按钮,在div中创建一个p标签
//第二种方式创建元素: 对象.innerHTML="标签代码及内容";
my$("btn").οnclick=function () {
my$("dv").innerHTML="<p>窗前明月光,疑是地上霜,举头望明月,低头思故乡</p>";
};
</script>
</body>
第三种元素创建的方式:
<body>
<input type="button" value="创建p" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
//第三种方式创建元素
//创建元素
//document.createElement("标签名字");对象
//把元素追加到父级元素中
//点击按钮,在div中创建一个p
my$("btn").onclick = function () {
//创建元素的
var pObj = document.createElement("p");
setInnnerText(pObj, "这是一个p");
//把创建后的子元素追加到父级元素中
my$("dv").appendChild(pObj);
};
</script>
</body>
案例:动态创建列表
<meta charset="UTF-8">
<title>title</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
cursor: pointer;
}
div {
width: 200px;
height: 400px;
border: 2px solid red;
}
</style>
</head>
<body>
<input type="button" value="创建列表" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var kungfu = ["降龙十八掌", "黯然销魂掌", "葵花宝典", "九阴真经", "吸星大法", "如来神掌", "化骨绵掌", "玉女心经", "极乐神功", "辟邪剑谱"];
//点击按钮动态的创建列表,把列表加到div中
my$("btn").onclick = function () {
//创建ul,把ul立刻加入到父级元素div中
var ulObj = document.createElement("ul");
my$("dv").appendChild(ulObj);
//动态的创建li,加到ul中
for (var i = 0; i < kungfu.length; i++) {
var liObj = document.createElement("li");
//设置li中间的文字内容
liObj.innerHTML = kungfu[i];
ulObj.appendChild(liObj);
//为li添加鼠标进入事件
liObj.onmouseover = mouseoverHandle;
//为li添加鼠标离开事件
liObj.onmouseout = mouseoutHandle;
}
};
//此位置.按钮的点击事件的外面
function mouseoverHandle() {
this.style.backgroundColor = "red";
}
function mouseoutHandle() {
this.style.backgroundColor = "";
}
//如果是循环的方式添加事件,推荐用命名函数
//如果不是循环的方式添加事件,推荐使用匿名函数
</script>
</body>
案例:点击按钮创建一个表格
<body>
<input type="button" value="创建表格" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var arr=[
{name:"百度",href:"http://www.baidu.com"},
{name:"谷歌",href:"http://www.google.com"},
{name:"优酷",href:"http://www.youku.com"},
{name:"土豆",href:"http://www.tudou.com"},
{name:"快播",href:"http://www.kuaibo.com"},
{name:"爱奇艺",href:"http://www.aiqiyi.com"}
];
//点击按钮创建表格
my$("btn").οnclick=function () {
//创建table加入到div中
var tableObj=document.createElement("table");
tableObj.border="1";
tableObj.cellPadding="0";
tableObj.cellSpacing="0";
my$("dv").appendChild(tableObj);
//创建行,把行加入到table中
for(var i=0;i<arr.length;i++){
var dt=arr[i];//每个对象
var trObj=document.createElement("tr");
tableObj.appendChild(trObj);
//创建第一个列,然后加入到行中
var td1=document.createElement("td");
td1.innerText=dt.name;
trObj.appendChild(td1);
//创建第二个列
var td2=document.createElement("td");
td2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
trObj.appendChild(td2);
}
};
</script>
</body>
* 元素绑定多个事件
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
//为元素绑定事件(DOM):一种,但是不兼容,有两种
//1 对象.addEventListener("事件类型",事件处理函数,false);--谷歌和火狐支持,IE8不支持
//2 对象.attachEvent("有on的事件类型",事件处理函数)--谷歌不支持,火狐不支持,IE8支持
//为按钮绑定点击事件
//参数1:事件的类型---事件的名字,没有on
//参数2:事件处理函数---函数(命名函数,匿名函数)
//参数3:布尔类型,目前就写false-----没有为什么,不解释,明天说
//为同一个元素绑定多个相同的事件--
// my$("btn").addEventListener("click",function () {
// console.log("小苏猥琐啊");
// },false);
// my$("btn").addEventListener("click",function () {
// console.log("小苏龌龊啊");
// },false);
// my$("btn").addEventListener("click",function () {
// console.log("小苏邪恶啊");
// },false);
// my$("btn").addEventListener("click",function () {
// console.log("小苏下流啊");
// },false);
//参数1:事件类型---事件名字,有on
//参数2:事件处理函数---函数(命名函数,匿名函数)
// my$("btn").attachEvent("onclick",function () {
// console.log("小杨好帅哦1");
// });
//
// my$("btn").attachEvent("onclick",function () {
// console.log("小杨好帅哦2");
// });
//
// my$("btn").attachEvent("onclick",function () {
// console.log("小杨好帅哦3");
// });
</script>
</body>
* 为元素绑定事件的兼容代码
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
<script>
//为任意元素.绑定任意的事件, 任意的元素,事件的类型,事件处理函数
function addEventListener(element,type,fn) {
//判断浏览器是否支持这个方法
if(element.addEventListener){
element.addEventListener(type,fn,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,fn);
}else{
element["on"+type]=fn;
}
}
addEventListener(my$("btn"),"click",function () {
console.log("哦1");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦2");
});
addEventListener(my$("btn"),"click",function () {
console.log("哦3");
});
// my$("btn")["on"+"click"]=function () {
//
// };
// function Person(name) {
// this.name=name;
// this.sayHi=function () {
// console.log("您好啊");
// };
// }
// var per=new Person("小明");
// if(per.sayHii){//判断这个对象中有没有这个方法
// per.sayHii();
// }else{
// console.log("没有这个方法");
// }
</script>
</body>