您好,登錄后才能下訂單哦!
這篇“JS怎么獲取節點并進行兼容性封裝”文章的知識點大部分人都不太理解,所以小編給大家總結了以下內容,內容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“JS怎么獲取節點并進行兼容性封裝”文章吧。
網頁內容是由標簽組成的(不完全正確)
網頁的內容是由節點組成的
元素節點 屬性節點 文本節點 注釋節點 文檔節點
節點三要素
節點類型 :nodeType
節點名稱 : nodeName
節點值 :nodeValue
節點類型(nodeType) 節點名稱( nodeName) 節點值(nodeValue) 元素節點 1 標簽名大寫 null屬性節點 2 屬性名 屬性值 文本節點 3 #text 文本 注釋節點 8 #comment 注釋內容 文檔節點 9 #document null
獲取父節點 :子元素.parentNode
獲取子元素
<div id = "box"> <!--宮崎駿--> <div>千與千尋</div> <div id="box2">哈兒的移動城堡</div> 龍貓 <div>懸崖上的金魚姬</div> </div>
var box2 = document.getElementById("box2");console.log(box2.parentNode);
獲取的父節點一定是元素節點(只有元素才會有子節點)
添加子元素到頁面中(父元素中)父元素.appendChild(子元素)
<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>
<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不支持獲取兄弟元素的操作,執行得到的undefined,而且 在IE8里面沒有任何替代方案
IE8要獲取兄弟元素 智能通過節點
@param ele :需要查找的目標封裝
@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));
獲取第一個子節點 :父元素.firstChild
獲取第一個子元素 :父元素.firstElementChild
var box = document.getElementById("box");console.log(box.firstChild);console.log(box.firstElementChild);
IE8無法執行元素的操作
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);
獲取最后一個子節點 :父元素.lastChild
獲取最后一個子元素 :父元素.lastElementChild
var 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))
克隆節點 :元素.cloneNode(參數)
參數:
有參數時:
如果參數是true,表示深克隆: 能夠克隆這個標簽以及標簽里面所有的內容。
如果參數是false,表示淺克隆:只能克隆當前這個標簽,不會克隆這個標簽里面的內容。
沒有參數,默認是false。
<div id="box"> I'm a big box <h2>我是標題</h2> </div>
var box = document.getElementById("box");var Newbox = box.cloneNode(true)console.log(New);
克隆節點只會在內存中克隆一份, 不會添加到頁面上 只能手動添加
克隆huibaid也克隆過去
為了保持頁面id的唯一性,需要修改克隆元素的id
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>
以上就是關于“JS怎么獲取節點并進行兼容性封裝”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。