-
DOM 조작하기concept/HTML, CSS, DOM 2020. 10. 11. 21:00
CREATE
createDocumentFragment()
createDocumentFragment() 메소드는 기존 document 객체에 비해 비교적 "가벼운" 임시 Node 객체를 만들어 줍니다.
즉, 가벼운 document 객체를 임시로 하나 만드는 것입니다. 이후 DocumentFragment 객체에 추가하고 싶은 작업을 진행을 한 번에 진짜 document에 추가할 수 있습니다.
// codestates라는 텍스트가 담긴 div 생성 let codestates = document.createElement('div'); codestates.textContent = 'codestates'; // 가상의 document 생성 let fragment = document.createDocumentFragment(); // 가상의 document에 codestates element 추가 fragment.appendChild(codestates); // 진짜 document에 가상의 document 추가 document.body.appendChild(fragment);이 메소드는 문서의 일부를 추출하고 일부 내용을 변경, 추가 또는 삭제 한 다음 문서에 다시 삽입하려는 경우에 유용합니다. document 객체보다 documentFragment 객체가 더욱 "가볍기" 때문에 성능 개선에 사용됩니다.
APPEND
difference between append and prepend in javascript dom
prepend () 메서드는 선택한 요소의 시작 부분에 지정된 내용을 삽입합니다. append () 메서드는 선택한 요소의 끝에 지정된 내용을 삽입합니다.
간단하게 비교해서 배열 메소드의 unshift와 비슷한 기능을 하는 것이 prepend, push와 비슷한 기능을 하는 것이 append라고 생각하면 이해하기 쉬울 것입니다!
difference between appendChild and append in javascript dom
append가 appendChild보다 넓은 범위를 커버합니다. 하지만 append가 조금 더 최근에 만들어진 메소드이기 때문에 작동되지 못하는 브라우저가 있을 수 있습니다. (예를 들어 Internet explorer)
append() 의 브라우저 호환성
appendChild()의 브라우저 호환성
같은 엘리먼트를 appendChild 하면, 기존 엘리먼트를 복사하는 것일지 고민해보세요.
결론부터 말씀드리면 복사가 아닌 이동입니다. 코드를 통해서 살펴볼까요? 먼저 이렇게 HTML 파일을 생성해보겠습니다.
<div class="a"> 여기는 A방 입니다. <span> 몬스터 </span> </div> <div class="b"> 여기는 B방 입니다. </div>
웹페이지에는 이렇게 보이게 되겠죠?
여기서 DOM을 활용해 몬스터를 이동시켜볼게요.
const monster = document.querySelector('span'); const roomB = document.querySelector('.b'); roomB.appendChild(monster);이렇게 자바스크립트로 DOM을 작성한 후, 웹페이지를 다시 한 번 볼까요?
자, 이렇게 몬스터가 B방으로 이동한 것을 볼 수 있습니다! 결론은 한 노드가 문서상의 두 지점에 동시에 존재할 수 없다는 것을 의미합니다. 그래서 만약 노드가 이미 부모를 가지고 있다면 우선 삭제되고 새로운 위치로 이동합니다.
READ
querySelector의 부모는 꼭 document 객체여야만 할까?
document 하위의 어떤 객체든 자식 엘리먼트를 가지고 있다면 querySelector의 부모가 될 수 있습니다. 다음 링크를 통해 체험해보실 수 있습니다.
UPDATE
difference between textContent and innerHTML
엘리먼트를 수정하는 방법에는 대표적으로 2 가지가 있는데, 간단하게 정리하자면 다음과 같습니다.
textContent : node의 모든 element와 텍스트 콘텐츠를 반환합니다.
innerHTML : 이름 그대로 element 내에 포함 된 모든 HTML을 반환합니다.
글로만 봐서는 개념이 조금 모호하시죠? 실제 HTML에 대입해서 확인해 볼까요?
다음과 같이 textContent는 모든 공백까지 합한 텍스트를 string 타입으로 출력, innerHTML은 HTML 요소를 모두 string 타입으로 출력합니다.
innerHTML의 보안상 단점 (mdn innerHTML security issue)
innerHTML은 HTML 자체를 반환, 접근할 수 있는 메소드죠. 만일 이런 페이지가 있다고 칩시다.
이 때 텍스트 창에 입력된 값을 활용해서 변환을 하게 되는 경우에서 innerHTML 을 사용하게 된다면 Javascript 악성 코드를 삽입할 수 있는 구멍을 마련하게 되는 것이나 마찬가지입니다.
위의 입력창에 <script>alert('공격!!!')</script> 다음과 같은 코드를 입력해서 보내준다면 script 태그가 인식되어 alert 내용이 바로 실행이 되겠죠?
이렇게 innerHTML 메소드는 태그 자체를 활용할 수 있기 때문에 보안상 단점(XSS 공격에 취약) 이 있게 됩니다.
DELETE
element와 node의 차이 (difference between element and node in javascript dom)
DOM 이 무엇의 약자인가요? Document Object Model 입니다.
즉 수많은 객체들로 이루어진 document인 것인데, 그 위에 존재하는 모든 객체들을 포괄하는 이름이 Node입니다.
Element는 Node의 타입 중 하나입니다. 예를 들어 div, body, window 같은 특정한 타입을 말합니다.
즉, Node 의 종류 안에 Element가 있는 것입니다.
children과 childNodes의 차이 (difference between children and childNodes in javascript dom)
현재 노드에서 그 자식 노드에 접근하기 위해서는 children(텍스트 노드 제외)또는 childNodes(텍스트 노드 포함) 메소드를 사용합니다.
예시를 보여드리기 위해, 다음과 같이 HTML 파일을 작성했습니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>check</title> </head> <body> <div>반갑습니다</div> <div>코드스테이츠에</div> <span>오신 것을</span> <div>환영합니다</div> </body> </html>그리고 콘솔창에 각각 document.body.children 과 document.body.childNodes를 찍은 결과입니다.
보이는 것과 같이 children은 자식 노드 중 태그 노드를 리턴하고 있고, childNodes는 태그 노드 뿐만 아니라 텍스트도 노드로 취급해서 함께 리턴하고 있는 것을 볼 수 있습니다.
removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom)
쉽게 말해서
삭제할노드.remove()
삭제할노드의_부모노드.removeChild(삭제할노드)
이렇게 생각하실 수 있습니다.
다음 링크에서 체험해보시는 것을 권장드립니다. remove() removeChild()
tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist)
Nodelist는 배열이 아니라, 노드의 콜렉션입니다. 그래서 배열 메소드들을 사용할 수 없으며, Nodelist에 사용가능한 메소드들은 Nodelist.item(), Nodelist.entries(), Nodelist.forEach(), Nodelist.keys(), Nodelist.values() 가 있습니다.
즉 배열 메소드를 사용할 수 없기 때문에 reduce는 사용이 불가하지만, forEach는 Nodelist의 메소드이기도 하기 때문에 사용이 가능합니다. (링크)
tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)
다만 Nodelist를 배열로 바꿀 수 있는 방법은 있습니다. 그 방법은 여기 를 참고해주세요!
'concept > HTML, CSS, DOM' 카테고리의 다른 글
styled-components VS emotion 과연 어떤 차이가 있을까? (2) 2023.12.07 scrollHeight, clientHeight, offsetHeight (0) 2022.11.10 DOM 이해하기 (0) 2020.10.09 HTML 기본 틀 (0) 2020.07.01 CSS 질문 정리 (0) 2020.04.08