DOM
-
문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의
인터페이스이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. -
웹문서를 브라우저에 렌더링 하려면 웹 문서를 로드한 후, 데이터를 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재해야한다. 이를 프로그래밍언어로 해당 데이터를 다루고
DOM이 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
DOM은 네종류의 노드로 구성된다.
- 문서노드(Document Node)
- 요소 노드 (Element Node)
- 어트리뷰트 노드(Attribute Node)
- 텍스트 노드(Text Node)
- 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고(파싱하여) 이들을
트리 구조로 구성한 것이 DOM이다. - DOM은 HTML 요소를 Object처럼 조작 할 수 있는 Model이다. 따라서
웹 페이지를 동적으로 움직일수 있게만들 수 있다. - DOM은
document객체에 구현되어있기 때문에 js어디에서나 호출이 가능하다.
DOM 다루기 : (기본 CRUD만 다루고 간단한 예제만 작성.)
- CREATE : HTML 태그 생성.
const creatDIV = document.createElement('div');- APPEND : CREATE로 생성한 태그를 원하는 곳에 이어붙임
document.body.append(createDiv); // 붙일곳.append(생성한요소)- READ : DOM으로 HTML의 정보를 읽을 때는 querySelector메서드를 이용한다.
- querySelectorAll은 Array-like-object형태로 가져온다.
- get~.. 을 활용하는 메서드들도 있다. 개발자 마다 쓰는 방향이 다르기 때문에 편한거로 쓰면된다.
const readElement = document.querySelector(".tClass") //여러개라도 첫번째(상위)의 요소만 가져옴
const readElement = document.querySelector("#tId")
const readElements = document.querySelectorAll(".tClass") // 해당 클래스를 가진 모든 요소를 가져옴- UPDATE : 해당 요소에 class, 추가
creatDiv.classList.add("tclass");
creatDiv.setAttribute("href",https://asdasd);- DELETE : 원하는 요소를 삭제하거나 어티리뷰트를 삭제함.
creatDiv.classList.remove();
creatDIV.innerHTML = ""; // 해당되는 모든 요소를 지움.- ETC
document.getElementById(id) // id로 하나의 요소를 선택한다.
document.querySelector(cssSelector) // CSS 셀렉터를 이용해 요소를 선택한다
document.getElementsByClassName(class) //HTMLCollection을 반환 -> 실시간으로 Node상태를 반영하므로 for문 사용시 주의해야함.
위와 같이 조작하고자 하는 요소를 선택 하고 요소의 콘텐츠 또는 어트리뷰트를 조작하여 웹 페이지를 조작 할수 있다.innerHTML
-
innerHTML은 크로스 사이트 스크립팅 공격에 취약하다는 보안상의 허점 때문에 사용을 지양한다.
-
innerHTML 속성은 문자열 자체를 수정할 수 있기 때문에,
-
Cross-site scripting, 줄여서 XSS라고 불린다. 웹사이트 관리자가 아닌 사람이 웹페이지에 악성 스크립트를 삽입하는 공격 방식을 사용한다.
-
innerHTML보다 removeChild로 자식 요소를 지정해서 삭제하는 메서드를 사용한다.
-
NODE, element 차이
-
DOM > Node > element
- Dom은 Node로 이루어져 있고 각각의 Node는 부모 Node, 자식 Node를 가지고 있다.
- element는 Node를 이루고 있는 하위 요소들이다.
- 아래의 그림처럼 Element 에 HTMLElement가 있고 그아래에 또 다른 element가 있듯이 생각하면 된다.
DocumentFragment
- 메모리에서만 정의되고, 기본적으로 DOM과 동일하게 작동하지만 HTML의 DOM트리에는 영향을 주지않음.
DocumentFragment 사용, 일반적인 방식과 차이
const DF = document.createDocumentFragment(); const elDiv = document.createElement("div"); elDiv.textContent = "hi" DF.appendChild(elDiv); console.log(DF.textContent) //hi document.body.appendChild(DF) console.log(DF.textContent) // ""
- body에 붙이면 만들었던 DocumentFragment의 값들은 이전된다.
- HTML구조를보면 body바로 아래에 div가 붙은걸 확인할수 있다.
const DF2 = document.createElement("span"); const elDiv = document.createElement("div"); elDiv.textContent = "hi" DF2.appendChild(elDiv); console.log(DF2.textContent) //hi document.body.appendChild(DF2) console.log(DF2.textContent) // hi
- body에 붙이면 만들었던 값들이 유지가된다.
- HTML 구조를 보면 span아래 div가 붙는다.
성능상의 장점
-
DocumentFragment를 이용하여 append를 할시 메모리상에서만 일어나기 때문에 브라우저를 다시 렌더링(Reflow, Repaint) 하지 않는다. 즉
마지막 body에 append할때만 다시 렌더링 한다. -
첫번째 방법과다르게 element에 append를 한다면 append할때 마다 화면을 다시 그린다. 성능의 차이가 날수밖에 없다. span에 append를 했지만 불필요한 span이 body에 붙고 span을 지우려면 지운다음 다시 렌더링을 해야하기 때문이다.
