DOM
요소 조작
수색…
요소 복제
요소는 cloneNode 메소드를 호출하여 복제 할 수 있습니다. cloneNode 전달 된 첫 번째 매개 변수가 true 인 경우 원본의 자식도 복제됩니다.
var original = document.getElementsByTagName("li")[0];
var clone = original.cloneNode(true);
요소 추가하기
이 예제에서는 "new text"라는 텍스트를 가진 새로운 list 요소를 만들고 첫 번째 정렬되지 않은 목록과 첫 번째 list 요소를 선택합니다.
let newElement = document.createElement("li");
newElement.innerHTML = "new text";
let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");
요소를 삽입 할 때 우리는 부모 요소 아래 에서, 그리고 그 부모 요소의 특정 자식 요소 바로 전에 그것을 수행합니다.
parentElement.insertBefore(newElement, nextSibling);
새로운 요소는
parentElement아래와nextSibling바로 앞에 삽입됩니다.
parentElement 의 마지막 자식 요소로 요소를 삽입하려는 경우 두 번째 인수는 null 수 있습니다.
parentElement.insertBefore(newElement, null);
새 요소는
parentElement아래 마지막 자식으로 삽입됩니다.
대신 appendChild() 사용하여 자식을 부모 노드의 자식 노드에 간단히 추가 할 수 있습니다.
parentElement.appendChild(newElement);
새 요소는
parentElement아래 마지막 자식으로 삽입됩니다.
요소 교체하기
이 예제에서는 "new text"라는 텍스트를 가진 새로운 list 요소를 만들고 첫 번째 정렬되지 않은 목록과 첫 번째 list 요소를 선택합니다.
let newElement = document.createElement("li");
newElement.innerHTML = "new text";
let parentElement = document.querySelector("ul");
let nextSibling = parentElement.querySelector("li");
요소를 대체하려면 replaceChild 를 사용합니다.
parentElement.replaceChild(newElement, nextSibling);
nextSibling이 DOM에서 제거됩니다. 그 자리에 이제newElement있습니다.
요소 제거
요소는 remove() 를 호출하여 제거 할 수 있습니다. 다른 방법으로는 부모 removeChild() 를 호출 할 수 있습니다. removeChild() 는 remove() 보다 더 나은 브라우저 지원을 제공합니다.
element.remove();
element및 모든 자식 노드는 DOM에서 제거됩니다.
parentElement.removeChild(element);
element및 모든 자식 노드는 DOM에서 제거됩니다.
어쨌든이 노드에 대한 참조가있는 한 나중에 노드에서이 노드를 DOM에 삽입 할 수 있습니다.
추가 및 삽입 메소드
이제 JavaScript에 jQuery에있는 Append 및 Prepend 메소드가 있습니다.
append 와 prepend 의 주된 장점은 appendChild 및 insertBefore 와는 달리 HTML 요소 또는 일반 텍스트 (텍스트 노드로 변환 됨)를 여러 개 사용할 수 있습니다.
추가하려면 1 div, 1 텍스트 노드 및 1 스팬
document.body.append(document.createElement('div'),"Hello world",document.createElement('span'))
이렇게하면 페이지가 다음 구조로 변경됩니다.
<body>
.....(other elements)
<div></div>
"Hello World"
<span></span>
</body>
본문에 같은 것을 앞에 붙이기
용도
document.body.prepend(document.createElement('div'),"Hello world",document.createElement('span'))
이렇게하면 페이지가 다음 구조로 변경됩니다.
<body>
<div></div>
"Hello World"
<span></span>
.....(other elements)
</body>
브라우저 지원은
Chrome 54 이상
Firefox 49 이상
Opera 39 이상
MDN에서 자세한 내용보기