[TIL] 내일배움캠프 React 과정 2022.12.01

DOM 기초 특강

나도 DOM 이해할 수 있어~~!

웹 페이지가 뜨는 과정

1. www.naver.com (클 → 서)

2. HTML 문서를 수신(서 → 클)

3. 브라우저가 HTML 파일을 해석(parsing)

브라우저에는 기본적으로 랜더링 엔진이 있는데 랜더링 엔진이 HTML 문서에 코드 한 줄, 한 줄 보면서 ‘해석'한다.

4. DOM Tree를 구성

5. HTML에 CSS가 포함돼있으면 CSSOM Tree를 구성

6. DOM Tree랑 CSSOM Tree를 묶어서 Render Tree

… 이하 과정 생략

DOM이란?

Document(HTML 파일)를 Javascript가 해석할 수 있는 Object 형태로 Modeling 한 것!

DOM은 브라우저에 내장되어있기 때문에 우리는 HTML의 내용을 javascript로 접근 및 제어할 수 있다.

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

DOM에 접근 및 제어해보기

돔 트리의 최상단 노드는 항상 document

document.getRootNode(); // #document

childNodes와 parentNode 이해하기

한 가지 생각해 볼 점은 childNodes는 뒤에 s가 붙고 parentNode는 붙지 않는다. 밑으로 내려갈 경우에는 자식들이 여러 개이고 그중에 선택할 수 있지만 다시 위로 올라갈 때는 부모가 하나이기 때문이다. 따라서 childNodes는 뒤에 인덱스 번호를 붙이고, parentNode는 인덱스 번호를 붙일 필요가 없다.

근데.. html 파일 태그 사이사이에 있는 text라는 녀석을 뭘까?

text는 말 그대로 텍스트 문자열을 의미하며 줄바꿈까지 이에 포함된다고 한다.

text라는 존재를 직접 확인해 보고 싶어서 div와 hi 사이에 빈 문자열도 들어갈 수 없도록 딱 붙여 버렸다.

그랬더니 정말 div와 text 사이에 있던 text(좌측에 2번)가 사라졌다! body childNodes의 text는 대부분 줄 바꿈을 의미한다고 이해해도 될 듯하다.

document 관련 api

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);

querySeletor를 사용할 때 주의할 점은 클래스 명인지 id 명인지를 구분하기 위해 ('.text') 혹은 ('#text')로 작성해야 한다는 점이다.

ul 태그의 두 번째 리스트를 가져오고 싶을 때

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";

추가 공부

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

// createTextNode
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!");
}

// 너무나도 많이 해봤던, addEventListener

// 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";
});

innerText와 innerHTML의 차이점

document.querySelector('h1').innerHTML = '<div>테스트</div>'

document.querySelector('h1').innerText = '<div>테스트</div>'

자료 출처: 원장님의 강의 자료!

링크는 올려도 되는지 모르겠어서 안 올림

저작자표시

[TIL] 내일배움캠프 React 과정 2022.12.01_DOM