解析JS如何取得節點並進行相容性封裝
- 藏色散人轉載
- 2022-08-06 17:18:301988瀏覽
本文主要介紹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>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不支援取得兄弟元素的操作，執行得到的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));
2.取得第一個子節點和子元素
取得第一個節點與子元素
取得第一個子節點：
父元素.firstChild 取得第一個子元素：父元素.firstElementChildvar 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);
3.取得最後一個子節點和子元素
取得最後一個子節點和子元素
取得最後一個子節點：
父元素.lastChild 取得最後一個子元素：父元素.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.複製節點
複製節點：
元素.cloneNode(參數) 參數： 有參數時：
- 如果參數是true，表示深克隆： 能夠複製這個標籤以及標籤裡面所有的內容。
- 如果參數是false，表示淺克隆：只能複製目前這個標籤，不會複製這個標籤裡面的內容。
- 沒有參數，預設是false。
<div id="box">
I'm a big box
<h1>我是标题</h1>
</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>相關推薦：【JavaScript影片教學
】以上是解析JS如何取得節點並進行相容性封裝的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：csdn.net。如有侵權，請聯絡admin@php.cn刪除