站長資訊網
本文主要給大家介紹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>
站長資訊網
最全最豐富的資訊網站
最全最豐富的資訊網站
