코드스테이츠 소프트웨어엔지지어링 부트캠프 +20일

CSS연습했다. 기본기의 필요성이 느껴진다

 

DOM

Node와 Element의 차이 

Node는 태그 노드와 텍스트 노드 전체를 가리키고, Element는 텍스트 노드를 제외하고, 흔히 생각하는 태그(<br>같은)만 가리킨다.

즉 Node는 Element의 상위개념인 것이다. 태그만 검색하고 싶을 때는 Element가 붙은 메소드를 선택해야 한다.

 

childNode와 children의 차이

childNodes는 노드를 선택한다. 태그노드 ,텍스트노드를 모두 가리킨다.

children은 텍스트 노드를 제외한 태그만 가리킨다.

 

remove와 removeChild의 차이

remove()는 노드를 메모리에서 삭제하고 종료한다.

removeChild()는 노드를 삭제하는 것이 아니라 DOM트리에서 해제 시킨다. 메모리에 해당 노드는 그대로 존재한다.

최종적으로 관계를 끊은 해당 노드의 참조를 반환한다.

 

removeChild()를 이용하여 삭제한 경우, 엄밀히 말하면  메모리에서 삭제시킨것이 아니라 DOM트리에서 해제만 시킨것이기 때문에 얼마든지 재사용 할 수 있다.

const good = document.querySelector('#good')
const kkk = good.parentNode.removeChild(good) // good을 DOM트리에서 끊어내지만 메모리에는 남아있음
document.body.prepend(kkk) // 재사용

 

자식요소 추가

• prepend() : 자식요소의 맨 앞에 요소 추가
• append() : 자식요소의 맨 뒤에 요소 추가
• insertBefere(A,B) : B요소 앞에 A요소를 추가한다.

복제

• cloneNode(boolean) : 동일한 기능을 수행하는 노들르 복제한다. 인자에 boolean값은 옵션인데, true를 넣으면 자식노드도 복제하고 false를 넣으면 해당요소만 복제한다.
• importNode(외부문서,boolean) : 외부문서의 노드를 복제한다. 인자에 boolean값은 옵션인데, true를 넣으면 자식노드도 복제하고 false를 넣으면 해당요소만 복제한다. 외부문서의 원본은 사라지지 않는다.