😝 오늘의 토픽 DOM
먼저 JavaScript의 입장에서 HTML은 어떻게 보일까?
단순히 의미없는 문자열로 보이지 않을까??
그럼 무슨 작업을 할 수 있지???
기껏해야 문자열에 사용할 수 있는 메소드 slice, substr, length...
그래서! HTML을 JavaScript가 이해할 수 있는 자료형으로 바꿔줘야할 필요성이 대두!
DOM(Document Object Model)!! 쉽게 말해 HTML같은 문자열만 그득한 문서를 JavaScript가 이해할 수 있는 객체로 바꿔주는 것! 이러한 과정을 PARSE라고 한다.
그럼 어떤 객체로 바꿔주는데?? 객체에도 종류가 많잖어..
Node객체!! 요소 하나하나를 Node로 생각하면 쉬울듯?
Node객체
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="node">
<div>안녕 나는 요소야</div>
<button>클릭</button>
<div>
<div>하하하</div>
호호호
</div>
</div>
</body>
</html>JavaScript가 저 HTML을 조작하려면 어떻게 해??
class나 id 그리고 요소이름을 통해 대표적으로 document.querySelector를 통해 해당 요소를 특정한다.
저 메소드는 누가 제공해? DOM이!
const node = document.querySelector('.node')이렇게 특정화를 하고,
node.nodeType // 1 node.nodeName // div
즉 우리가 선택한 노드는 타입이 1이고, 이름은 div라는 것이지!
node.parentNode는 body
node.parentNode.childNodes는 NodeList(7) [text, div.node, text, comment, text, script, text]
이밖에도 많지만 Node객체로 변환해주면서, DOM은 이들의 관계나 속성에 조작을 가할 수 있는 메소드나 프로퍼티를 제공한다. JavaScript가 이해할 수 있도록 책임져야지!!
Node객체도 종류가 많아! 많대..
-Document Nodes
-Element Nodes
등등
이건 추후에 다뤄봅세
어쨋든 다시 DOM은 JavaScript가 이해할 수 있게 HTML을 Node객체로 변환해주는 것!
DOM은 브라우저에서 보이는 것이냐?
아니! 브라우저 뷰 포트에 보이는 것은 렌더 트리로 DOM과 CSSOM의 조합인거야.
CSSOM은 대충 감이 온다. CSS도 한낱 문자열이니 얘도 바꿔줘야지.
그래서 왜 보이는 것이 아니냐?
HTML에 p Element를 display: none한다고 사라지냐?
화면에서는 사라지겠지 그런데 남아있잖아. 그래서 보여지는 게 아니라는 것!
p Element에 이름붙여서 호출하면 나올걸?
요약정리
DOM은 HTML 문서에 대한 인터페이스입니다. 첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,
둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다.
DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다.
항상 유효한 HTML 형식입니다.
자바스크립트에 수정될 수 있는 동적 모델이어야 합니다.
가상 요소를 포함하지 않습니다. (Ex. ::after)
보이지 않는 요소를 포함합니다. (Ex. display: none)
참조:
https://wit.nts-corp.com/2019/02/14/5522
https://www.youtube.com/watch?v=CFgXIJ3RZ50
✍🏻🙆🏻♂️
