溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
