Javascript 의 " DOM "

DOM Tree

 

 

웹 페이지의 작동 원리는 이렇다

 

1. 사용자가 브라우저에 ' www.naver.com ' 주소를 입력한다. (💡 사용자 = 브라우저 = 클라이언트, 같은 의미 )
-  클라이언트가 서버에게 요청(request)

2. HTML 문서를 서버로부터 수신.
- 네이버서버는 사용자에게 응답(response)
- 그 응답은 바로 HTML 문서

3. 브라우저가 HTML 파일을 해석 (parsing 파싱)
- 브라우저의 렌더링 엔진이 서버가 준 HTML 문서를 렌더링
- 렌더링 엔진이 HTML 문서에 코드를 한줄, 한줄 보면서 해석

4. 자바스크립트가 알아들을 수 있는 방식으로, 해석한 내용을 토대로 DOM Tree를 구성. (위의 사진처럼 )

5. DOM Tree 랑 CSSOM Tree를 묶어 Render Tree를 구성.
- 렌더 트리(Render Tree)는 HTML, CSS 및 Javascript 문서를 파싱하여 브라우저에서 실제로 렌더링되는
  최종 문서 모델을 나타내는 객체의 계층 구조.

 

 

 

그래서 한마디로 DOM 은 Document (HTML 파일)를 Javascript가 알아먹을 수 있는 Object 형태로 Modeling 한 것 이다.

( 브라우저에 기본적으로 내장되어 있는 API 중 하나 )

💡 API 란?

API는 다른 시스템에서 제공하는 기능을 사용할 수 있도록 도와주는 중간자 역할을 한다.
브라우저의 경우 역시, 기본적으로 DOM과 관련된 API를 제공함으로써
브라우저의 DOM 객체에 접근할 수 있도록 도와준다.

 

 

 

모든 DOM의 node들은 '속성' 과 '메서드' 를 갖고있다.

💡 DOM 의 node?

DOM에서 Node란 웹 페이지를 구성하는 모든 HTML 태그와 텍스트,
그리고 속성 등을 하나의 블록으로 취급하는 것.

이러한 블록들은 서로 계층 구조로 연결, 각 블록은 자식 노드, 부모 노드, 형제 노드와 관계를 가진다.
아래 사진의 DOM 요소 하나 하나를 (네모, 동그라미) 노드라고 할 수 있다.

 

💡  DOM 요소의 속성과 메서드의 구분

DOM의 Node 객체에서 속성과 메서드를 구분하는 가장 쉬운 방법은 
Node 객체의 속성은 값을 가지고, 메서드는 동작을 수행한다.

즉, Node 객체의 속성은 해당 객체의 특성을 나타내는 값을 가져오거나 설정하는데 사용되며,
메서드는 해당 객체가 수행하는 작업을 나타내는 함수이다.

ex) Node 객체의 nodeName 속성은 해당 노드의 이름을 나타내는 문자열 값을 반환.
     반면, appendChild( ) 메서드는 해당 노드의 자식 노드를 추가하는 메서드이며, DOM 트리에서 해당 노드의
     위치를 변경하는 동작을 수행한다.

// example1(메서드의 예)
person.getName();

// example2(함수의 예)
testLogging();

 

 

 

🚩 document 관련 api

 

 

1. Finding

/** 찾아봅시다 */

// 해당 id명을 가진 요소 하나를 반환합니다.
document.getElementById("id명")

// 해당 선택자를 만족하는 요소 하나를 반환합니다.
document.querySelector("선택자")

// 해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.
document.getElementsByClassName("class명")[인덱스]

// 해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환합니다.
document.getElementsByTagName("태그명")[인덱스]

// 해당 선택자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환합니다.
document.querySelectorAll("선택자명")[인덱스]

// 새로운 노드를 생성합니다.
const div = document.createElement('div');
document.body.append(div);
document.body.append(div);

 

 

2. changing

/** property(=속성)을 바로 바꿔버려잇! */

// 이 둘은 차이가 있어요!
element.innerHTML = new html content
element.innerText = new text

// style을 바꿔요.
element.style.property = new style

//method를 통해 클래스를 추가해봐요.
element.setAttribute(attribute, value)

// 어랏? 그럼 이런것도 가능??
element.setAttribute("style", "background-color:red;");

// ....
element.style.backgroundColor = "red";

// input 필드의 변신

 

 

3. 나머지..

// createElements
const para = document.createElement("p");
para.innerText = "This is a paragraph";
document.body.appendChild(para);

// createTextNode(elements는 아니구여, 그냥 글자...)
let textNode = document.createTextNode("Hello World");
document.body.appendChild(textNode);

// write. 조심 또 조심!
document.write("Hello World!");

document.write("<h2>Hello World!</h2><p>Have a nice day!</p>");

// 골로 가는 코드
function myFunction() {
  document.write("Hello World!");
}

// version 01
element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

// version 02
element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});