개술

ChildNode 인터페이스에는 상위 레벨의 Node 객체가 있을 수 있는 특정 방법이 포함되어 있습니다.
ChildNode는 원래 인터페이스이며 이 유형의 객체를 만들 수 없습니다.Element, DocumentType 및 CharacterData 객체에 의해 구현됩니다.
그것은 다음과 같은 네 가지 방법을 가지고 있다.

（1）ChildNode.before(nodes)

이것은 실험 기술입니다. 이 기술의 규범이 아직 안정되지 않았기 때문에, 호환성 표를 검사하여 각종 브라우저에서 사용하십시오.또한 실험 기술의 문법과 행위는 규범이 바뀌면서 미래 버전의 브라우저에서 바뀔 수 있음을 주의해야 한다.
ChildNode.before 방법은 이 하위 노드의 부모 노드의 하위 노드 목록에 노드나 DOMstring 객체 그룹을 삽입합니다.DOMstring 객체는 해당 Text 노드로 삽입됩니다.
다음 예는 다음과 같습니다.

var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.before(span);

console.log(parent.outerHTML);
// "
"

우리span 탭은 나중에 만들어졌지만 p 탭 앞에 삽입될 수 있습니다.

（2）ChildNode.after(nodes)

위의 예와 마찬가지로 뒤에서 삽입할 뿐이다.그것도 시험 중의 기능이다.
예:

var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.after(span);

console.log(parent.outerHTML);
// "
"

현재의 스핀 라벨은 p 라벨 뒤로 간다.

（3）ChildNode.remove

ChildNode.remove () 방법은 자신이 속한 트리에서 대상을 삭제할 수 있습니다.
이 방법은 차일드 노드지만.remove, 그러나 사실 하위 노드에 강제로 사용하지 않아도 되고 일반 노드에서도 사용할 수 있다. 예를 들어 아래의 예:

Here is div-01
Here is div-02
Here is div-03


var el = document.getElementById('div-01');
el.nextElementSibling.remove(); // Removes the div with the 'div-02' id

우리는 이 방법이 목표 대상이 DOM 나무에 있는 노드를 제거할 수 있다는 것을 알기만 하면 된다.

（4）ChildNode.replaceWith

ChildNode.replaceWith() 메서드는 상위 노드의 하위 노드 목록에 있는 이 하위 노드를 Node 또는 DOMstring 객체 세트로 바꿉니다.DOMstring 객체는 해당 Text 노드로 삽입됩니다.
즉, 이 방법은 하위 노드 중의 어떤 노드 원소를 직접 교체할 수 있다.
그러나 유감스럽게도 지금도 실험 중인 방법일 뿐이다.
우리는 그래도 가장 먼저 그 예를 들어 이번에는 작은 변화만 있을 뿐이다.

var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.replaceWith(span);

console.log(parent.outerHTML);
// "
"

이번에 우리는 하위 노드의 p 라벨을 바로span으로 바꿨다. 이것이 바로 그 사용 방법이다.

총결산

이 절에서 말한 네 가지 방법은 유감스럽게도remove 하나만 사용할 수 있다.