집 > 기사 > 웹 프론트엔드 > JS를 구문 분석하여 노드를 얻고 호환성을 위해 캡슐화하는 방법

JS를 구문 분석하여 노드를 얻고 호환성을 위해 캡슐화하는 방법

藏色散人앞으로: 2022-08-06 17:18:301940검색

이 글은 주로 JS에서 노드를 얻는 방법과 호환성 캡슐화를 소개합니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다!

Node

웹 페이지의 콘텐츠는 태그로 구성됩니다(완전히 정확하지는 않음)
웹 페이지의 콘텐츠는 노드로 구성됩니다.
Element 노드 Attribute 노드 Text 노드 Comment 노드 Document 노드
node의 세 가지 요소

Node 유형: nodeType
노드 이름: nodeName
노드 값: nodeValue

			节点类型（nodeType）			节点名称（ nodeName）		节点值（nodeValue）
元素节点				1						标签名大写						null属性节点				2						属性名							属性值
文本节点				3						#text							文本
注释节点				8						#comment						注释内容
文档节点				9						#document						null

부모 노드 가져오기

부모 노드 가져오기:child element.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(하위 요소)

모든 하위 노드 가져오기

		<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>

get 요소 :

var box = document.getElementById("box");var box2 = document.getElementById("box2");

님의 노드 노드

console.log(box2.previousSibling);  // 文本节点

next node

console.log(box2.nextSibling);  // 文本节点

e rreeee gget get emprevious element

 console.log(box2.previousElementSibling);

next 요소 r

console.log(box2.nextElementSibling);

ie8은 형제 요소를 얻는 것의 작동을 지원하지 않습니다. , 결과는 정의되지 않았으며 IE8에는 대안이 없습니다

IE8은 노드를 통해 형제 요소 인텔리전스를 얻으려고 합니다

이전 형제 요소의 패키지 가져오기

@param ele: 찾아야 할 대상 패키지

@return 노드: 요소 노드를 반환합니다

 	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 마지막 하위 노드 및 하위 요소 가져오기마지막 하위 노드 및 하위 요소 가져오기 element

마지막 하위 노드 가져오기:

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. 노드 복제
Clone node: Element.cloneNode (매개변수) 매개변수:

매개변수가 있는 경우:

매개변수가 true인 경우 심층 복제를 의미합니다. 이 태그와 태그에 포함된 모든 콘텐츠를 복제할 수 있습니다.

매개변수가 false이면 얕은 복제를 의미합니다. 현재 태그만 복제할 수 있으며 이 태그의 콘텐츠는 복제되지 않습니다.

매개변수가 없습니다. 기본값은 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);

복제된 노드는 메모리에 있는 복사본 하나만 복제하며 페이지에 추가되지 않습니다. 수동으로만 추가할 수 있습니다.

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