獲取節點及元素的代碼
阿新 • • 發佈：2019-03-11
next 之前 ren 相同 屬性節點 eve 函數 say 三種
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> /* * * 節點: * 節點:頁面中所有的內容都是節點(標簽,屬性,文本:文字,空格,換行) * 文檔：document---頁面中的頂級對象 * 元素:頁面中所有的標簽, 標簽---元素--對象(通過DOM的方式來獲取這個標簽,得到了這個對象,此時這個對象叫DOM對象) * 節點的屬性:作用:為了將來獲取很多節點,得到節點中的標簽(元素),識別節點中的標簽元素 * 節點的類型:1標簽節點,2屬性節點,3文本節點 * nodeType:節點的類型,1---標簽節點,2----屬性節點,3---文本節點 * nodeName:標簽節點--大寫的標簽名字,屬性節點---小寫的屬性名字,文本節點---#text * nodeValue:標簽---null,屬性---屬性的值,文本---文本內容 * if(node.nodeType==1&&node.nodeName=="P") * * 獲取節點及元素的代碼(下面呢) * * * * 元素的創建 * 三種元素創建的方式 * 1. document.write("標簽代碼及內容"); 如果在頁面加載完畢後創建元素.頁面中的內容會被幹掉 * 2. 父級對象.innerHTML="標簽代碼及內容"; * 3. document.createElement("標簽名字");得到的是一個對象, * 父級元素.appendChild(子級元素對象); * 父級元素.inerstBefore(新的子級對象,參照的子級對象); * 移除子元素 * 父級元素.removeChild(要幹掉的子級元素對象); * * 事件的綁定:為同一個元素綁定多個相同的事件 * 三種方式: * 1. 對象.on事件名字=事件處理函數 如果是多個相同事件註冊用這種方式,最後一個執行,之前的被覆蓋了 * my$("btn").onclick=function(){}; * 2. 對象.addEventListener("沒有on的事件名字",事件處理函數,false); * my$("btn").addEventListener("click",function(){},false); * 3. 對象.attachEvent("有on的事件名字",事件處理函數); * my$("btn").attachEvent("onclick",function(){}); * * * * */
//獲取當前節點的父級節點 console.log(my$("uu").parentNode); //獲取當前節點的父級元素 console.log(my$("uu").parentElement); //獲取當前節點的子級節點 console.log(my$("uu").childNodes); //獲取當前節點的子級元素 console.log(my$("uu").children);
//獲取當前節點的第一個子級節點 console.log(my$("uu").firstChild); //獲取當前節點的第一個子級元素 console.log(my$("uu").firstElementChild); //獲取當前節點的最後一個子級節點 console.log(my$("uu").lastChild); //獲取當前節點的最後一個子級元素 console.log(my$("uu").lastElementChild); //獲取當前節點的前一個兄弟節點 console.log(my$("uu").previousSibling); //獲取當前節點的前一個兄弟元素 console.log(my$("uu").previousElementSibling); //獲取當前節點的後一個兄弟節點 console.log(my$("uu").nextSibling); //獲取當前節點的後一個兄弟元素 console.log(my$("uu").nextElementSibling);
// document.write("<p>這是一個p</p>") // // document.body.innerHTML="<p>這是一個p</p>"; </script> </head> <body>
<script src="common.js"></script> <script>
// var pObj=document.createElement("p"); // 父級元素.appendChild(pObj);
</script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script> /* * * 節點: * 節點:頁面中所有的內容都是節點(標簽,屬性,文本:文字,空格,換行) * 文檔：document---頁面中的頂級對象 * 元素:頁面中所有的標簽, 標簽---元素--對象(通過DOM的方式來獲取這個標簽,得到了這個對象,此時這個對象叫DOM對象) * 節點的屬性:作用:為了將來獲取很多節點,得到節點中的標簽(元素),識別節點中的標簽元素 * 節點的類型:1標簽節點,2屬性節點,3文本節點 * nodeType:節點的類型,1---標簽節點,2----屬性節點,3---文本節點 * nodeName:標簽節點--大寫的標簽名字,屬性節點---小寫的屬性名字,文本節點---#text * nodeValue:標簽---null,屬性---屬性的值,文本---文本內容 * if(node.nodeType==1&&node.nodeName=="P") * * 獲取節點及元素的代碼(下面呢) * * * * 元素的創建 * 三種元素創建的方式 * 1. document.write("標簽代碼及內容"); 如果在頁面加載完畢後創建元素.頁面中的內容會被幹掉 * 2. 父級對象.innerHTML="標簽代碼及內容"; * 3. document.createElement("標簽名字");得到的是一個對象, * 父級元素.appendChild(子級元素對象); * 父級元素.inerstBefore(新的子級對象,參照的子級對象); * 移除子元素 * 父級元素.removeChild(要幹掉的子級元素對象); * * 事件的綁定:為同一個元素綁定多個相同的事件 * 三種方式: * 1. 對象.on事件名字=事件處理函數 如果是多個相同事件註冊用這種方式,最後一個執行,之前的被覆蓋了 * my$("btn").onclick=function(){}; * 2. 對象.addEventListener("沒有on的事件名字",事件處理函數,false); * my$("btn").addEventListener("click",function(){},false); * 3. 對象.attachEvent("有on的事件名字",事件處理函數); * my$("btn").attachEvent("onclick",function(){}); * * * * */
//獲取當前節點的父級節點 console.log(my$("uu").parentNode); //獲取當前節點的父級元素 console.log(my$("uu").parentElement); //獲取當前節點的子級節點 console.log(my$("uu").childNodes); //獲取當前節點的子級元素 console.log(my$("uu").children);
//獲取當前節點的第一個子級節點 console.log(my$("uu").firstChild); //獲取當前節點的第一個子級元素 console.log(my$("uu").firstElementChild); //獲取當前節點的最後一個子級節點 console.log(my$("uu").lastChild); //獲取當前節點的最後一個子級元素 console.log(my$("uu").lastElementChild); //獲取當前節點的前一個兄弟節點 console.log(my$("uu").previousSibling); //獲取當前節點的前一個兄弟元素 console.log(my$("uu").previousElementSibling); //獲取當前節點的後一個兄弟節點 console.log(my$("uu").nextSibling); //獲取當前節點的後一個兄弟元素 console.log(my$("uu").nextElementSibling);
// document.write("<p>這是一個p</p>") // // document.body.innerHTML="<p>這是一個p</p>"; </script> </head> <body>
<script src="common.js"></script> <script>
// var pObj=document.createElement("p"); // 父級元素.appendChild(pObj);
</script> </body> </html>
獲取節點及元素的代碼