站長資訊網
本文主要給大家介紹JS如何獲取節點及兼容性封裝，希望對需要的朋友有所幫助！ 網頁內容是由標簽組成的（不完全正確） 獲取父節點 ：子元素.parentNode 獲取子元素 獲取的父節點一定是元素節點（只有元素才會有子節點） 添加子元素到頁面中（父元素中）父元素.appendChild(子元素) 獲取元素： 上一個節點 下一個節點 上一個元素 下一個元素 IE8不支持獲取兄弟元素的操作，執行得到的undefined，而且 在IE8里面沒有任何替代方案 @param ele ：需要查找的目標封裝 獲取第一個子節點 ：父元素.firstChild IE8無法執行元素的操作 獲取最后一個子節點 ：父元素.lastChild 克隆節點 ：元素.cloneNode(參數) 如果參數是true，表示深克?。?能夠克隆這個標簽以及標簽里面所有的內容。 如果參數是false，表示淺克?。褐荒芸寺‘斍斑@個標簽，不會克隆這個標簽里面的內容。 沒有參數，默認是false。 克隆節點只會在內存中克隆一份, 不會添加到頁面上 只能手動添加 克隆huibaid也克隆過去 為了保持頁面id的唯一性，需要修改克隆元素的id
節點
網頁的內容是由節點組成的
元素節點 屬性節點 文本節點 注釋節點 文檔節點
節點三要素
節點類型（nodeType） 節點名稱（ nodeName） 節點值（nodeValue） 元素節點 1 標簽名大寫 null屬性節點 2 屬性名 屬性值 文本節點 3 #text 文本 注釋節點 8 #comment 注釋內容 文檔節點 9 #document null
獲取父節點
<div id = "box"> <!--宮崎駿--> <div>千與千尋</div> <div id="box2">哈兒的移動城堡</div> 龍貓 <div>懸崖上的金魚姬</div> </div>
var box2 = document.getElementById("box2");console.log(box2.parentNode);
獲取所有子節點
<div id="box" style="width: 100px; height: 100px;"> <div id="box1" style="background-color: lightblue;">千與千尋</div> <div id="box2">哈爾的移動城堡</div> </div> <script type="text/javascript"> var box = document.getElementById("box") console.log(box.chilNodes); </script>
1.兄弟元素和兄弟節點
獲取兄弟節點
<div id = "box"> <!--宮崎駿--> <div>千與千尋</div> <div id="box2">哈兒的移動城堡</div> 龍貓 <div>懸崖上的金魚姬</div> </div>
var box = document.getElementById("box");var box2 = document.getElementById("box2");
console.log(box2.previousSibling); // 文本節點
console.log(box2.nextSibling); // 文本節點
獲取兄弟元素
console.log(box2.previousElementSibling);
console.log(box2.nextElementSibling);
IE8要獲取兄弟元素 智能通過節點獲取上一個兄弟元素的封裝
@return node：返回的是一個元素節點 function getPreviousElement(ele) { // 能力檢測 if(ele.previousElementSibling) { // 谷歌火狐 return ele.previousElementSibling; } else { // IE8 // 獲取上一個節點 : null 元素 文本 注釋 var node = ele.previousSibling; // 循環次數不確定 // 1. node必須存在, 不是null, 2. node不是元素節點 while(node != null && node.nodeType != 1) { node = node.previousSibling } // node == null 或者 node.nodeType == 1 return node; } } console.log(getPreviousElement(li2));
2.獲取第一個子節點和子元素
獲取第一個節點和子元素
獲取第一個子元素 ：父元素.firstElementChildvar box = document.getElementById("box");console.log(box.firstChild);console.log(box.firstElementChild);
獲取第一個子元素的兼容性封裝
function getFirstElementChild(ele) { if (ele.firstElementChild != undefined) { return ele.firstElementChild; } else { var nodeFirst = ele.firstChild; while (nodeFirst && nodeFirst.nodeType == 1) { nodeFirst = nodeFirst.nextSibling; } return nodeFirst; } } console.log(ul.firstElementChild);
3.獲取最后一個子節點和子元素
獲取最后一個子節點和子元素
獲取最后一個子元素 ：父元素.lastElementChildvar box = document.getElementById("box");console.log(box.lastChild);console.log(box.lastElementChild);
獲取最后一個子元素的兼容性封裝
function firstElement(ele) { if (ele.firstElementChild) {//谷歌和火狐 return ele.firstElementChild; } else {//IE8 var node = ele.firstChild; while (node != null && node.nodeType != 1) { node = node.nextSibling; } return node; } } console.log(firstElement(ul))
4.克隆節點
參數：
有參數時：
<div id="box"> I'm a big box <h1>我是標題</h1> </div>
var box = document.getElementById("box");var Newbox = box.cloneNode(true)console.log(New);
Newbox.id = "Newbox"
淘寶案例，隱藏二維碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>關閉二維碼</title> <style type="text/css"> #box{ width: 94px; height: 92px; margin: 30px auto; position: relative; } #x{ width: 14px; height: 14px; line-height: 14px; border: 1px solid #D9D9D9; color: #D6D6D6; text-align: center; position: absolute; top: 0; left: -15px; } #img{ width: 76px; height: 90px; background-image: url(img/erweima.png); } </style> </head> <body> <div id="box"> <div id="x">x</div> <div id="img"></div> </div> <script type="text/javascript"> var x = document.getElementById("x") x.onclick = function(){ this.parentNode.style.display = 'none'; } </script> </body> </html>
站長資訊網
最全最豐富的資訊網站
最全最豐富的資訊網站
