JS を解析してノードを取得し、互換性のためにノードをカプセル化する方法-jsチュートリアル-php.cn

JS を解析してノードを取得し、互換性のためにノードをカプセル化する方法

藏色散人

リリース： 2022-08-06 17:18:30

転載

1880 人が閲覧しました

#この記事では主に JS でのノードの取得方法と互換性カプセル化について紹介します。必要！

ノード

Web ページのコンテンツはタグで構成されています (完全に正しいわけではありません)

Web ページのコンテンツはノードで構成されています
要素ノード属性ノードテキストノードコメントノードドキュメントノード
ノードの 3 つの要素

ノード名: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);

ログイン後にコピー

取得した親ノード要素ノードである必要があります (要素のみが子ノードを持ちます)

子要素をページに追加します(親要素内)

Parent element.appendChild(child element)

すべての子ノードを取得

		<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 は兄弟要素の取得操作をサポートしていません。要素があり、結果は unknown であり、IE8 には代替手段がありません

IE8 はノードを通じて兄弟要素のインテリジェンスを取得したいと考えています

前の兄弟要素のパッケージを取得します

@ param ele: 検索するターゲットパッケージ

@return node: 要素を返します。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. 最初の子ノードと子要素を取得します

最初のノードと子要素を取得します

最初の子ノードを取得します:

Parent element.firstChild 最初の子要素を取得します:
Parent element.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. 最後の子ノードと子要素を取得します

最後の子ノードを取得し、子要素

最後の A 子ノードを取得します:

Parent element.lastChild 最後の子要素を取得します:
Parent element.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. クローンノード

クローンノード:

Element.cloneNode(parameter) パラメーター:
パラメータがある場合:

パラメータが true の場合、ディープクローン作成を意味します。このタグとタグ内のすべてのコンテンツをクローンできます。
パラメータが false の場合、浅い複製を意味します。現在のタグのみが複製され、このタグのコンテンツは複製されません。

<div id="box"> 
    I&#39;m a big box
      <h1>我是标题</h1>
 </div>

ログイン後にコピー

var box = document.getElementById("box");var Newbox = box.cloneNode(true)console.log(New);

ログイン後にコピー

Newbox.id = "Newbox"

ログイン後にコピー

タオバオの場合、QR コードを非表示にする

<!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 = &#39;none&#39;;
			}
		</script>
	</body>
</html>

ログイン後にコピー