자바스크립트에서 노드를 교체하는 방법-프런트엔드 Q&A-php.cn

자바스크립트에서 노드를 교체하는 방법

WBOY

풀어 주다： 2022-01-04 15:23:50

원래의

4228명이 탐색했습니다.

JavaScript에서는 replacementChild() 메서드를 사용하여 노드를 교체할 수 있습니다. 이 메서드의 기능은 특정 하위 노드를 다른 노드로 바꾸는 것입니다. 구문은 다음과 같습니다. "node.replaceChild"(새노드,이전노드)".

자바스크립트에서 노드를 교체하는 방법

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

노드를 JavaScript로 바꾸는 방법

JavaScript replacementChild() 메서드는 하위 노드를 다른 노드로 바꿀 수 있습니다. 사용법은 다음과 같습니다.

nodeObject.replaceChild(new_node, old_node)

로그인 후 복사

매개변수 new_node는 지정된 새 노드이고 old_node는 대체된 노드입니다. 교체가 성공하면 교체된 노드가 반환되고, 교체가 실패하면 null이 반환됩니다.

예제 1

위의 예를 기반으로 스크립트를 다시 작성하고 새로운 2단계 제목 요소를 만들고 빨간색 상자의 1단계 제목 요소를 바꿉니다.

var ok = document.getElementById("ok");  //获取按钮元素的引用
ok.onclick = function () {  //为按钮注册一个鼠标单击事件处理函数
    var red = document.getElementById("red");  //获取红色盒子的引用
    var h1 = document.getElementsByTagName("h1")[0];  //获取一级标题的引用
    var h2 = documeng.createElement("h2");  //创建二级标题元素并引用
    red.replaceChild(h2, h1);  //把一级标题替换为二级标题
}

로그인 후 복사

시연 결과 1단계 제목을 새로 생성된 2단계 제목으로 바꾼 후 원래 1단계 제목에 포함된 제목 텍스트가 더 이상 존재하지 않는 것으로 나타났습니다. 이는 노드 교체 작업이 요소 이름을 교체하는 것이 아니라 포함된 모든 하위 노드와 포함된 모든 콘텐츠를 교체하는 것임을 보여줍니다.

마찬가지로 대체 노드에 하위 노드도 포함되어 있으면 하위 노드가 대체 노드에 함께 삽입됩니다. replacementChild() 메서드를 사용하여 문서의 기존 노드를 다른 기존 노드로 바꿀 수 있습니다.

예제는 다음과 같습니다.

<html>
<head>
<meta charset="utf-8">
<title>123</title>
</head>
<body>
<ul id="myList"><li>Coffee</li><li>Tea</li><li>Milk</li></ul>
<p id="demo">单击按钮替换列表中的第一项。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var textnode=document.createTextNode("Water");
var item=document.getElementById("myList").childNodes[0];
item.replaceChild(textnode,item.childNodes[0]);
}
</script>
<p>首先创建一个文本节点。<br>然后替换第一个列表中的第一个子节点。</p>
<p><strong>注意:</strong>这个例子只将文本节点的文本节点“Coffee”替换为“Water”,而不是整个LI元素,这也是替换节点的一种备选。</p>
</body>
</html>

로그인 후 복사

출력 결과:

자바스크립트에서 노드를 교체하는 방법