less than 1 minute read

  • JS로 문서를 수정할 땐 DOM 조작

  • cloneNode 로 해당 요소를 깊은 복사(본인과 자손 요소 전부 복사)함

  • 노드 생성/삽입/삭제 메서드로 DOM 수정

  • 문자열을 삽입, 삭제할 땐 문자열을 ‘그대로’ 넣으면 됨

  • ‘구식’ 메서드는 하위호환을 위해 존재하며 node 반환. 덜 유연해서 지양

  • html 에 HTML 넣으면 메서드 elem.insertAdjeacentHTML/insertAdjacentText/insertAdjacentElement(where, html) 은 where 값에 따라 특정 위치에 HTML 삽임

  • DocumentFragment 는 특별한 DOM 노드 타입으로 문서에 있는 다른 노드를 추가해서 문서 어딘가에 삽입하면 DocumentFragment는 사라지고 추가된 노드만 남음

  • document.write(html) 은 페이지 로딩이 끝나기 전에 html을 삽입해주는 메서드이며 문서 로딩 끝난 상태에서 이 메서드 호출 시 기본 문서 내용이 지워짐 (오래된 스크립트에서 볼 수 있음)

  • 브라우저는 HTML을 ‘읽는(파싱하는)’ 도중에 document.write(HTML) 를 만나면 텍스트 형식의 HTML을 원래 페이지에 있었던 것 처럼 해석해서 중간에 DOM 조작을 하지 않기 때문에 속도 빠름