Node와 Element
Node는 태그 노드와 텍스트 노드 전체를 가리키고, DOM object 중 하나이다.
Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(<a>,<div> 같은)만 가리킵니다.
따라서 태그만 검색하고 싶을 때는 Element가 붙은 메소드를 선택해야합니다.
Element: HTML 태그 기준으로 부모, 자식으로 나눕니다.
Node: 태그, 글 내용까지 포함시키고 부모, 자식으로 나눕니다.
element는 node 타입 중 하나로 node가 element의 상위 개념입니다.
Element는 Node의 자식입니다.
children과 childNodes
children: 텍스트 노드를 제외 합니다. element 속성을 지니고 있습니다.
childNodes: 텍스트나 커멘트 노드와 같은 non-element 적인 노드도 포함합니다. -- HTML 태그, 글까지 포함
childNodes는 nodelist를 리턴하고 이 nodelist는 string이 아닌 object 이므로 인덱스 넘버로 엑세스 할 수 있습니다.
예시:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>check</title>
</head>
<body>
<div class="test1">테스트1</div>
<div class="test1">테스트1</div>
<span class="span">스팬</span>
<div class="test2">테스트2</div>
<span class="span">스팬</span>
</body>
</html>children 출력 결과
document.body.children
HTMLCollection(5)
[div.test1, div.test1, span.span, div.test2, span.span]childNode 출력 결과
document.body.childNodes
NodeList(11)
[text, div.test1, text, div.test1, text, span.span, text, div.test2, text, span.span, text]remove와 removeChild
remove()와 removeChild()는 기본적으로 같은 기능을 합니다.
다만, 사용하는 데 몇가지 사소한 차이점들이 있습니다.
| 차이점 | remove() | removeChild() |
| 인터넷 익스플로러 | 미지원 | 지원 |
| 부모 엘리먼트 | 불필요 | 필요 |
| 반환값 | 없음 | 삭제한 노드 참조 반환 |
| 노드 리스트 삭제 | 미지원 | 미지원 |
| 하위 노드 삭제 | 지원 | 지원 |
remove: 노드를 메모리에서 삭제하고 종료합니다.
removeChild: 노드를 삭제하는 것이 아니라 메모리에 해당 노드는 그대로 존재하지만 부모 노드와의 부모 - 자식 관계를 끊어 DOM 트리에서 해제하는 것입니다. 최종적으로는 관계를 끊은 해당 노드의 참조를 반환합니다.
반환값을 변수에 저장하지않으면 삭제하는 노드의 참조가 더이상 없기 때문에, 자바스크립트 엔진의 GC(Garbage Collection)에 의해 잠시 후 메모리에서 삭제됩니다. 반환된 노드 참조를 변수에 담아 다른 DOM 위치에 붙일 수 있습니다.
let delli = document.querySelector('#friends');
let ret = delli.parentNode.removeChild(delli);
document.body.prepend(ret);removeChild를 사용하면 삭제한 노드의 반환값을 다른 노드에 붙여서 노드의 위치를 이동하는 작업에 사용할 수 있습니다.
노드를 삭제하면 삭제하는 노드 하위에 있는 자식 노드들도 모두 삭제됩니다.
노드들은 부모/자식 관계로 트리 구조로 연결되어 있기 때문에 부모 노드가 삭제되면, 자식 노드도 자동으로 삭제됩니다.
append와 prepend
append() : 컨텐츠를 선택된 요소 내부의 끝 부분에서 삽입합니다.
append(컨텐츠) <- 안의 컨텐츠 : 추가될 DOM 요소, 배열, HTML 문자열, jquery 객체 등
prepend() : 컨텐츠를 선택한 요소 내부의 시작 부분에서 삽입합니다. 각 요소의 첫번째 자식 요소에 값을 추가합니다.
prepend 자체가 '앞에 추가' 라는 뜻입니다.
prepend(컨텐츠) <- 안의 컨텐츠 : 일치하는 요소의 집합, 각 요소의 시작 부분에 삽입할 DOM 요소, 배열, HTML 문자열, jquery 객체 등
<p> 중앙 </p> // 이렇게 태그가 있을경우
//append() 는
<p> 중앙 여기에 값이들어감</p>
//prepend() 는
<p>여기에 값이들어감 중앙 </p>
// 출처: https://sd23w.tistory.com/409 [그러냐]appendChild와 append
append() 와 appendChild() 는 같은 기능을 하는 메서드입니다.
둘의 가장 큰 차이점은 appendChild는 DOM 함수 메서드이고 append는 자바스크립트 함수 메서드 라는 것입니다.
appendChild function은 element가 필요합니다.
document.getElementById("yourId").appendChild("<p></p>"); // 이렇게는 사용할 수 없습니다
var p = document.createElement("p");
document.getElementById("yourId").appendChild(p); // 이렇게 사용해야 합니다결론은 appendChild 를 쓸 수 있는 모든 상황에서는 append도 사용할 수 있지만, 그 반대는 사용할 수 없습니다.
따라서 기능이나 확장성에서 append()가 뛰어나기 때문에 append()를 사용하는 것이 좋다고 합니다.
| 차이점 | append() | appendChild() |
| 타입 | 자바스크립트 메서드 | DOM 메서드 |
| 추가 노드 갯수 | 여러개 허용 나머지 파라미터 사용 가능 element.append(...nodes); |
1개 |
| 문자열 노드 추가 지원 | 가능 DOM 문자열 또는 태그와 조합해 여러개의 텍스트 노드, 또는 엘리먼트 노드를 여러개 만들 수 있음 element.append('문자열'); element.append('문자열',p); |
노드 객체만 가능 |
| 인터넷 익스플로러 | 미지원 | 지원 |
| prepend 지원 | prepend() 메서드로 자식 끝에 추가 지원 | prependChild() 미지원 |
| 반환 값 | 없음(undefined) | 추가된 노드 참조 반환 |
append()의 장점
1. 텍스트 내용이 있는 엘리먼트를 추가할 경우 코드 작성량을 줄일 수 있습니다.
appendChild()를 사용하면 아래와 같은 방법으로 대상 노드에 텍스트 노드가 들어있는 새로 만든 노드를 추가합니다.
let li = document.createElement('li');
let litext = document.createTextNode('무지');
li.appendChild(litext);
let targetul = document.getElementById('friends');
targetul.appendChild(li);append()를 사용하면 텍스트 노드를 생성해 추가하는 과정을 하나로 줄일 수 있습니다.
let li = document.createElement('li');
li.append('무지');
let targetul = document.getElementById('friends');
targetul.append(li);2. append()는 나머지 파라미터를 지원합니다.
나머지 파라미터를 사용하면 CSS 쿼리 선택자로 선택한 모든 엘리먼트 노드들을 원하는 위치로 옮길 수 있습니다.
let items = document.querySelectorAll('.animal');
document.querySelector('#newfriends').prepend(...items);
remove() 와 removeChild() 의 차이
remve() 와 removeChild() 는 기본적으로 같은 기능을 합니다. 다만, 사용하는데 있어서 몇가지 사소한 차이점들이 있습니다. 차이점 remove() removeChild() 인터넷 익스플로러 미지원 지원 부모 엘리먼트
blogpack.tistory.com
https://blogpack.tistory.com/682
append() 와 appendChild()의 차이
append()와 appendChild() 는 같은 기능을 하는 메서드입니다. 기능이나 확장성에서 append() 가 뛰어나기 때문에 append() 를 사용하는 것이 좋습니다. 두 메서드는 다음과 같은 차이가 있습니다. 차이점 ap
blogpack.tistory.com
자바스크립트 엘리먼트 앞 또는 뒤에 요소 이동하기, append(), appendChild(), prepend(), insertBefore()
자바스크립트를 사용하여 요소를 이동시키는 방법에 대하여 알아보려고 합니다.
webisfree.com
'DOM > 기초' 카테고리의 다른 글
| offsetHeight, offsetWidth (0) | 2021.06.29 |
|---|---|
| 같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사할까? (0) | 2021.06.29 |
| createDocumentFragment (0) | 2021.06.29 |
| DOM과 자바스크립트 (0) | 2021.06.29 |
| 이벤트 (Events) (0) | 2021.06.16 |
