[JavaScript] DOM(Document Objecet Model)

 DOM

- 웹문서를 브라우저에 렌더링 하려면 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재해야한다.

- DOM은 네종류의 노드로 구성된다.

• 문서노드(Document Node)
• 요소 노드 (Element Node)
• 어트리뷰트 노드(Attribute Node)
• 텍스트 노드(Text Node)

- 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고(파싱하여) 이들을 트리 구조로 구성한 것이 DOM이다.

- DOM은 HTML 요소를 Object처럼 조작 할 수 있는 Model이다. 따라서 웹 페이지를 동적으로 움직일수 있게 만들 수 있다.

- DOM은 document객체에 구현되어있기 때문에 js어디에서나 호출이 가능하다.

console.log(document) // html 요소만 보임.
console.dir(document) // DOM을 객체의 모습으로 출력한다.

- <script>요소를 만나면 웹브라우저는 html해석을 잠시 멈추고 script요소를 먼저 실행한다.

- head에 추가하는 방법과 body가 끝나기 바로전에 추가하는 방법 두가지가 있는데 head에 추가하면 메모리상에 올라가지 않은 html설정에 의해 개발하기 까다로우므로 body가 끝나기전에 하는게 좋다.

 

DOM 다루기 : (기본 CRUD만 다루고 간단한 예제만 작성.)

- CREATE : HTML 태그 생성.

const creatDIV = document.createElement('div');

- APPEND :  CREATE로 생성한 태그를 원하는 곳에 이어붙임

document.body.append(createDiv); // 붙일곳.append(생성한요소)

- READ : DOM으로 HTML의 정보를 읽을 때는 querySelector메서드를 이용한다.

const readElement = document.querySelector(".tClass") //여러개라도 첫번째(상위)의 요소만 가져옴
const readElement = document.querySelector("#tId")

const readElements = document.querySelectorAll(".tClass") // 해당 클래스를 가진 모든 요소를 가져옴

- querySelectorAll은 Array-like-object형태로 가져온다.

- get~.. 을 활용하는 메서드들도 있다. 개발자 마다 쓰는 방향이 다르기 때문에 편한거로 쓰면된다.

- UPDATE : 해당 요소에 class, 추가 

creatDiv.classList.add("tclass");
creatDiv.setAttribute("href",https://asdasd);

- DELETE : 원하는 요소를 삭제하거나 어티리뷰트를 삭제함.

creatDiv.classList.remove();
creatDIV.innerHTML = ""; // 해당되는 모든 요소를 지움.

- innerHTML은 크로스 사이트 스크립팅 공격에 취약하다는 보안상의 허점 때문에 사용을 지양한다.

   innerHTML 속성은 문자열 자체를 수정할 수 있기 때문에,  <script> 태그를 사용해 Javascript 코드를 작성한뒤 실행되도록 할수있다.

   ( Cross-site scripting, 줄여서 XSS라고 불린다. 웹사이트 관리자가 아닌 사람이 웹페이지에 악성 스크립트를 삽입하는 공격 방식)

   innerHTML보다 removeChild로 자식 요소를 지정해서 삭제하는 메서드를 사용한다.

 

document.getElementById(id) // id로 하나의 요소를 선택한다.
document.querySelector(cssSelector) // CSS 셀렉터를 이용해 요소를 선택한다
document.getElementsByClassName(class) //HTMLCollection을 반환 -> 실시간으로 Node상태를 반영하므로 for문 사용시 주의해야함.

---

위와 같이 조작하고자 하는 요소를 선택 하고 요소의 콘텐츠 또는 어트리뷰트를 조작하여 웹 페이지를 조작 할수 있다. 

추가적인 내용

• element와 node의 차이
• children과 childNodes의 차이 - 해당자식 하나에 접근 하위 자식까지접근
• remove와 removeChild의 차이