91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

JS怎么獲取節點并進行兼容性封裝

發布時間:2022-08-08 14:54:32 來源:億速云 閱讀:124 作者:iii 欄目:web開發

這篇“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>

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
獲取第一個子元素 :父元素.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);

3.獲取最后一個子節點和子元素

獲取最后一個子節點和子元素

獲取最后一個子節點 :父元素.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))

4.克隆節點

克隆節點 :元素.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怎么獲取節點并進行兼容性封裝”這篇文章的內容,相信大家都有了一定的了解,希望小編分享的內容對大家有幫助,若想了解更多相關的知識內容,請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

js
AI

休宁县| 黑龙江省| 鄯善县| 当涂县| 泗洪县| 溧阳市| 交口县| 镇平县| 历史| 临朐县| 江西省| 苏州市| 盱眙县| 犍为县| 沙坪坝区| 五台县| 甘南县| 长垣县| 富顺县| 日土县| 民丰县| 和田市| 安塞县| 西青区| 平安县| 黄梅县| 马山县| 当阳市| 德惠市| 思南县| 顺昌县| 航空| 灵山县| 鄂托克旗| 曲松县| 石门县| 阿拉善右旗| 小金县| 新民市| 梓潼县| 广安市|