[TIL] DOM에 대해 새로알게된 내용

DOM

DOM 이란?

DOM 은 HTML 문서의 내용을 트리형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 함. 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)'라고 함

새로알게된 내용들

• DOM 트리에서 주석과 개행문자도 Text Node임으로 형재node를 찾을때는 고려해야한다.

• addEventListener에서 callback 함수로 event 인자값을 넘겨주는것은 알고 있었지만 함수 파라미터에서 생략해도 callback 함수 내부에서 변수명 event로 호출이 가능한줄은 처음알았다.

li.addEventListener("click", () => console.log(event)) // event가 출력된다.

• textContents, innerText, innerHTML 프로퍼티를 수정할때 보안과 성능을 고려해서 사용하는것이 좋다.

속성명	특징
textContents	1. <script> 및 <style> 요소를 포함한 모든 요소의 내용을 가져온다. 2. 노드의 모든 요소를 반환한다. 3. 값이 HTML로 구문 분석되지 않기 때문에 성능이 더 좋다.
innerText	1. "사람이 읽을 수 있는" 요소만 표시합니다. 2. innerText는 스타일을 인식하고 "숨겨진" 요소의 텍스트를 반환하지 않습니다.
innerHTML	1. 이름에서 알 수 있듯이 HTML을 반환한다. 2. 사용자에게 직접 텍스트를 입력받는 부분에서 Cross-site scripting (XSS) 공격을 당할 수 있다. 3.HTML로 구문 분석해야 하기때문에 textContents보다 느리다.