하나의 문서에 담긴 포괄적인 JavaScript 노드 작업

이 글은 javascript에 대한 관련 지식을 제공하며, 상위 노드, 하위 노드, 형제 노드, 노드 추가, 삭제, 복사 등 노드 작업과 관련된 문제를 주로 소개합니다. 다음은 살펴보겠습니다. 모두를 돕습니다.

[관련 권장 사항: javascript 비디오 튜토리얼, web front-end]

웹 페이지에서는 DOM에서 제공하는 방법을 사용하여 노드를 얻는 것 외에도 계층적 관계를 사용할 수도 있습니다. 노드를 얻는 방법은 비교적 간단합니다!

노드 개요

웹페이지의 모든 콘텐츠는 노드(레이블, 속성, 텍스트, 설명 등)입니다. DOM에서 노드는 노드로 표시됩니다.
HTML DOM 트리의 모든 노드는 JavaScript를 통해 접근 가능하며, 모든 HTML 요소(노드)는 수정, 생성, 삭제가 가능합니다.

일반적으로 노드에는 nodeType(노드 유형), nodeName(노드 이름), nodeValue(노드 값)라는 세 가지 이상의 기본 속성이 있습니다.

• 요소 노드 nodeType은 1
• 속성 노드 nodeType은 2
• 텍스트 노드 nodeType은 3입니다(텍스트 노드에는 텍스트, 공백, 줄바꿈 등이 포함됩니다.)

실제 개발에서는 메인 노드 작업은 요소 노드입니다.

노드 수준

DOM 트리를 사용하면 노드를 다양한 계층 관계로 나눌 수 있습니다. 가장 일반적인 것은 아버지-아들-형제 계층 관계입니다.

1. 상위 노드

node.parentNode

• parentNode 속성은 노드의 상위 노드를 반환할 수 있으며, 이는 가장 가까운 상위 노드라는 점에 유의하세요.
• 지정된 노드에 상위 노드가 없으면 null을 반환합니다.

<p>
        </p><p></p>
    
    <script>
        var son = document.querySelector(".son");
        console.log(son.parentNode);
    </script>

2. 하위 노드

1.node.childNodes(표준)

node.childNodes는 즉시 업데이트되는 컬렉션인 지정된 노드의 하위 노드를 포함하는 컬렉션을 반환합니다.

        
• 我是li
        
• 我是li
        
• 我是li
        
• 我是li
    

    <script> var ul = document.querySelector(&#39;ul&#39;); // 子节点childNodes 所有子节点，包含元素节点，文本节点等。 console.log(ul.childNodes); </script>

여기에 5개의 텍스트 노드가 있는 이유는 실제로 5개의 줄 바꿈에 해당합니다. 아래 그림을 참조하세요.

이 5개의 줄 바꿈은 텍스트 노드와 4개의 li 요소 노드로 총 9

입니다. : 반환 값에는 요소 노드, 텍스트 노드 등을 포함한 모든 하위 노드가 포함됩니다.
요소 노드만 내부로 가져오려면 특별히 처리해야 합니다. 따라서 우리는 일반적으로 childNodes 사용을 옹호하지 않습니다.

	var ul = document.querySelector('ul');
	for (var i = 0;i

2.node.children(비표준)

node.children은 모든 하위 요소 노드를 반환하는 읽기 전용 속성입니다. 하위 요소 노드만 반환하고 다른 노드는 반환하지 않습니다(이것이 우리가 집중하는 것입니다).
어린이용은 비표준이지만 다양한 브라우저에서 지원되므로 안심하고 사용할 수 있습니다.

        
• 我是li
        
• 我是li
        
• 我是li
        
• 我是li
    

    <script> var ul = document.querySelector(&#39;ul&#39;); console.log(ul.children); </script>

3. 첫 번째 하위 노드와 마지막 하위 노드

1.firstChild
2.lastChild
firstChild는 첫 번째 하위 노드를 반환하며, null을 반환합니다. 같은 이유. 마찬가지로 모든 노드가 포함됩니다.

3.node.firstElementChild
firstElementChild는 첫 번째 하위 요소 노드를 반환하거나, 찾을 수 없으면 null을 반환합니다.
4.node.lastElementChild
lastElementChild는 마지막 하위 요소 노드를 반환하거나, 찾을 수 없으면 null을 반환합니다.

참고: 이 두 가지 방법에는 호환성 문제가 있으며 IE9 이상에서만 지원됩니다.

5.node.children[0]
5.node.children[node.children.length - 1]
참고: 실제 개발 작성 방법과 호환성 문제는 없습니다.

        
• 我是li
        
• 我是li
        
• 我是li
        
• 我是li
    

    <script> var ul = document.querySelector(&#39;ul&#39;); // 1.不管是文本节点还是元素节点 console.log(ul.firstChild); console.log(ul.lastChild); // 2.返回对应的自元素节点，IE9以上才支持 console.log(ul.firstElementChild); console.log(ul.lastElementChild); // 3.不存在兼容性问题 console.log(ul.children[0]); console.log(ul.children[ul.children.length - 1]); </script>

4.兄弟节点

1.node. nextSibling
nextSibling 返回当前元素的下一个兄弟节点，找不到则返回 null 。同样，也是包含所有的节点。
2.node. previousSibling
previousSibling 返回当前元素上一个兄弟节点，找不到则返回null。同样，也包含所有的节点。
3.node. nextElementSibling
nextElementSibling 返回当前元素下一个兄弟元素节点，找不到返回 null 。
4.node. previousElementSibling
previousElementSibling 返回当前元素上一个兄弟元素节点，找不则返回 null 。
注意：这两个方法有兼容性问题，IE9以上才支持。

那么如何封装一个满足兼容性，又可以找到兄弟元素节点的函数呢

   function getNextElementSibling(element){
       var el = element;
       while(el = el.nextSibling){
           if(el.nodeType == 1){
               return el;
           }
       }
       return null;
   }

上面这段封装的代码就可解决，但不必考虑太多，因为ie浏览器即将要停止服务了，所以你只要记住node. nextElementSibling 这个就行，不必担心兼容性问题。

创建节点

document.createElement (’ tagName ＇)

document.createElenent (）方法创建由 tagName 指定的Н TML 元素。因为这些元素原先不存在，是根据我的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点与添加节点

1.node. appendChild(child)

node.appendChild (）方法将一个节点添加到指定父节点的子节点列表末尾。类似 css 里面的 after 伪元素。

2.node.insertBefore(child,指定元素)

    <script> var ul = document.querySelector("ul"); var li =document.createElement("li"); var span = document.createElement("span") ul.appendChild(li); ul.insertBefore(span,ul.children[0]); </script>

删除节点

node.removeChild(child)

node.removeChild(child) 方法从DOM中删除一个子节点，返回删除的节点。

        
• aniu
        
• marry
        
• tom
    

    <script> var ul = document.querySelector("ul"); ul.removeChild(ul.children[2]); </script>

复制节点（克隆节点）

node.cloneNode ()

node.cloneNode ()方法返回调用该方法的节点的一个副本。也称为克隆节点／拷贝节点
1．如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克降里面的子节点。
2．如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。

        
• aniu
        
• marry
        
• tom
    

    <script> var ul = document.querySelector("ul"); var li1 = ul.children[0].cloneNode(); //浅拷贝 var li2 = ul.children[0].cloneNode(true); //深拷贝 ul.appendChild(li1); ul.appendChild(li2); </script>

【相关推荐：javascript视频教程、web前端】

위 내용은 하나의 문서에 담긴 포괄적인 JavaScript 노드 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!