回顧概念 文檔: document 元素: 頁面中所有的標簽, 元素 element, 標簽 元素 對象 節點: 頁面中所有的內容(標簽,屬性,文本(文字,換行,空格,回車)) Node 根元素:html標簽 需求 用之前學習的知識點能否解決？獲取div中所有的標簽,設置每個標簽的背景顏色 節點 任 ...
回顧概念
文檔: document 元素: 頁面中所有的標簽, 元素---element, 標簽----元素---對象 節點: 頁面中所有的內容(標簽,屬性,文本(文字,換行,空格,回車))----Node 根元素:html標簽需求---用之前學習的知識點能否解決？獲取div中所有的標簽,設置每個標簽的背景顏色
節點---任意一個標簽中的元素獲取都非常的方便
節點的屬性
可以使用標簽--元素.出來 可以使用屬性節點.出來 文本節點.點出來 節點的類型 nodeType: 節點的類型: 1----標簽, 2---屬性, 3---文本 nodeName: 節點的名字: 標簽節點---大寫的標簽名字, 屬性節點---小寫的屬性名字, 文本節點----#text nodeValue: 節點的值: 標簽節點---null, 屬性節點---屬性值, 文本節點---文本內容獲取相關的節點
獲取父級節點和父級元素
.parentNode .parentElement獲取相關的節點屬性
.parentNode.nodeType // 1 --------標簽 .parentNode.nodeName // DIV-----大寫的標簽名字 .parentNode.nodeValue // null------標簽<!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(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> </html>
獲取子節點和子元素
.childNodes // 7個
.children //3個
<!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"); //子節點 console.log(dvObj.childNodes);//7個子節點 //子元素 console.log(dvObj.children); //3 </script> </body> </html>
獲取裡面的每個子節點
用for迴圈，長度是：.childNodes.length<!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); } </script> </body> </html>
認識下即可：獲取屬性的節點
.getAttributeNode("id")
//2====id====dv
<!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"); //獲取的是屬性的節點 var node = dvObj.getAttributeNode("id"); console.log(node.nodeType + "====" + node.nodeName + "====" + node.nodeValue);//2====id====dv </script> </body> </html>
12行代碼:都是獲取節點和元素的
前4個沒有相容問題
後面8個有
<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(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); </script> </body>
