节点
- 元素:页面中所有的标签,元素—element, 标签----元素—对象
- 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node
- 根元素:html标签
节点的属性:
获取方式
- 可以使用标签——通过 元素+“.” 出来,
- 可以使用属性节点.——通过 文本节点+“.” 出来)
属性包括
- nodeType:节点的类型:
1——标签,
2——属性,
3——文本
- nodeName:节点的名字:
标签节点——大写的标签名字,
属性节点——小写的属性名字,
文本节点-——#text
- nodeValue:节点的值:
标签节点——null,
属性节点——属性值,
文本节点——文本内容
节点理解探究实例
探究1：节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <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("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 console.log("----------------------------------") // //ul标签的父级节点 console.log("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> </html>
探究2：节点属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <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> </html>
探究3：亲戚节点
应用案例：节点操作隔行变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="变色" id="btn"/> <ul id="uu"> <li>降龙十八掌</li> <li>黯然销魂掌</li> <li>落英神剑掌</li> <li>铁砂掌</li> <li>龙象波若掌</li> <li>摧心掌</li> <li>波若掌</li> <li>大天龙掌</li> </ul> <script src="common.js"></script> <script> //隔行变色--li my$("btn").onclick = function () { var count=0;//记录有多少个li //获取ul中所有的子节点 var nodes = my$("uu").childNodes; for (var i = 0; i < nodes.length; i++) { //判断这个节点是不是li标签 if (nodes[i].nodeType == 1 && nodes[i].nodeName == "LI") { nodes[i].style.backgroundColor=count%2==0?"red":"yellow"; count++;//8个 //nodes[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow"; } } }; </script> </body> </html>
节点的兼容代码
element.firstChild—>谷歌和火狐获取的是第一个子几点
element.firstChild—>IE8获取的是第一个子元素
element.firstElementChild------>谷歌和火狐是第一个子元素,IE8不支持
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <ul id="uu"> <li>第一个</li> <li>第二个</li> <li>第三个</li> <li>第四个</li> <li>第五个</li> </ul> <script src="common.js"></script> <script> //第一个节点和第一个元素的获取的代码在IE8中可能不支持 //获取任意一个父级元素的第一个子级元素 function getFirstElementChild(element) { if(element.firstElementChild){//true--->支持 return element.firstElementChild; }else{ var node=element.firstChild;//第一个节点 while (node&&node.nodeType!=1){ node=node.nextSibling; } return node; } } //获取任意一个父级元素的最后一个子级元素 function getLastElementChild(element) { if(element.lastElementChild){//true--->支持 return element.lastElementChild; }else{ var node=element.lastChild;//第一个节点 while (node&&node.nodeType!=1){ node=node.previousSibling; } return node; } } console.log(getFirstElementChild(my$("uu")).innerText); console.log(getLastElementChild(my$("uu")).innerText); //最后一个节点和最后一个元素的获取的代码在IE8中可能不支持 //前一个节点和前一个元素的获取的代码在IE8中可能不支持 //后一个节点和后一个元素的获取的代码在IE8中可能不支持 </script> </body> </html>
