JS DOM

KODYwiththeK·2022년 12월 11일

자바스크립트 제로베이스 프론트엔드 스쿨

JavaScript

목록 보기

20/32

JS DOM

Class: 제로베이스
Created: December 6, 2022 6:53 PM
Type: Javascript
강의 명: 초심자도 빈틈없이 학습하는 자바스크립트

DOM

문서계층구조

웹페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게 브라우저가 렌더링 엔진을 이용해서 그림처럼 tree 구조로 만든 객체 모듈을 의미한다.

문서 객체 모델
HTML, XML 문서의 인터페이스
문서의 구조화된 표현을 제공

DOM API

DOM Application Programming Interface

어떤 것을 연결해주는 서비스 제공
HTML 구조 또는 CSS 조작할 수 있도록 기능을 제공하는 함수 집합
자바스크립트가 웹을 동적으로 동작시키기 위해 이용하는 것.

Node

HTML 문서 트리를 구성하는 단위

노드 종류

Node type	노드 분류	설명	Node Name	Node Value
1	Element	태그 하나	태그 이름	Null
2	Attribute(속성)	태그 속성	태그 속성	속성 값
3	Text	태그 안 내용	# text	내용
4	Comment(주석)	주석	# comment	내용
5	Document(문서)	문서 전체	# document	내용

Node.ELEMENT_NODE
Node.ATTRIBUTE_NODE
Node.TEXT_NODE
Node.CDATA_SECTION_NODE
Node.PROCESSING_INSTRUCTION_NODE
Node.COMMENT_NODE
Node.DOCUMENT_NODE
Node.DOCUMENT_TYPE_NODE
Node.DOCUMENT_FRAGMENT_NODE
Node.NOTATION_NODE

Node tree

HTML 문서의 정보는 노드 트리(node tree)라고 불리는 계층적 구조에 저장됨. 이러한 노드 트리는 노드들의 집합이며, 노드 간의 관계를 보여준다.

DOM Element

Element는 node의 특정 타입 즉, Node.ELEMENT_NODE인 것이다.

element는 HTML에서 태그로 적은 노드들을 지칭한다. 예를 들어, <html>, <div>, <title> 과 같은 태그로 나타낸 것들은 전부 element인 것이다. 주석이나 text node와 같은 것들은 HTML 태그로 표현된 것이 아니므로 element가 아니다.

DOM 활용

ID, name, className을 이용하여 찾기

<body>
  <h1 id="title">DOM 문서구조</h1>
  <ul>
    <li class="link-class" name="link-name">네이버</li>
    <li class="link-class" name="link-name">카카오</li>
  </ul>

  <script>
    /* id 이용 */
    console.log(document.getElementById("title").textContent)
    // ID 값이 title인 element의 텍스트 내용을 출력하는 내용
    // 출력 : DOM 문서구조

    /* name */
    let nameArr = document.getElementsByName('link-name');
    console.log(nameArr[0].textContent)
    // 출력 : 네이버
 
    /* class */
    let classArr = document.getElementsByClassName("link-class");
    for(let i in classArr) {
      console.log(classArr[i].textContent);
    }
    // 출력 : 네이버 카카오
  </script>
</body>

노드와 속성 추가

createElement(name)
createTextNode(text)
createAttribute(name)
createcomment(text)
appendChild(node)

⇒ 새로운 노드를 해당 노드의 자식 노드 리스트(child node list)의 맨 마지막에 추가합니다.

<body>
  <h1 id="title">DOM 문서구조</h1>
  <ul id="link">
    <li id='google'></li>
    <li class="link-class" name="link-name">네이버</li>
    <li class="link-class" name="link-name">카카오</li>
  </ul>

  <script>
    **/* <li>라인</li> */**
    let tag = document.createElement("li"); //li 요소 생성해서 tag에 할당
    let text = document.createTextNode("라인"); //text 요소 생성햐소 text에 할당
    tag.appendChild(text); // li 요소 안에 text 넣음
		tag.setAttribute('class', 'line'); // class속성 추가
    document.getElementById('link').appendChild(tag) // document 상 배치

    **/* <a href="http://www.google.com">구글</a> */**
    let linkid = document.getElementById('google'); //찾기
    let link = document.createElement("a"); //element 추가
    link.setAttribute("href", "http://www.google.com"); //속성 추가
    link.innerText = '구글' //텍스트 추가
    linkid.appendChild(links) // id 값으로 찾은 linkid에 link에 담은 속성을 추가
  </script>
</body>

참고자료

https://wit.nts-corp.com/2019/02/14/5522

DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공합니다.

웹페이지가 만들어지는 과정

웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 “Critical Rendering Path”라고 한다.

이 과정은 여러 단계로 나누어져 있지만, 이 단계들을 대략 두 단계로 나눌 수 있다.

첫 번째 단계에서 브라우저는 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정
두 번째 단계에서 브라우저는 해당 렌더링을 수행

첫 번째 과정을 거치면 “렌더 트리”가 생성.
렌더 트리는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성.
브라우저는 렌더 트리를 생성하기 위해 다음과 같이 두 모델이 필요.

DOM(Document Object Model) – HTML 요소들의 구조화된 표현
CSSOM(Cascading Style Sheets Object Model) – 요소들과 연관된 스타일 정보의 구조화된 표현.

DOM 생성 과정

DOM은 원본 HTML 문서의 객체 기반 표현 방식.

둘은 비슷하지만, DOM이 가진 근본적 차이는, 단순 텍스트로 구성된 HTML 문서 내용과 구조가 객체 모들로 변환되어 다양한 프로그램에서 사용될 수 있다는 것이 차이.

DOM의 개체 구조는 “노드 트리”로 표현됩니다. 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇가지는 잎들을 가질 수 있는 나무와 같은 구조로 이루어져 있기 때문.

DOM이 아닌 것은 무엇인가?

DOM이 HTML 문서와 1대1로 매핑되는 것 처럼 보이지만, 좀 더 자세히 알아보며 그 차이를 이해해야 한다.

1. DOM은 원본 HTML이 아니다

DOM이 HTML 문서로부터 만들어지긴 했지만, 항상 정확하게 같지는 않다.

(차이점 1) : HTML이 유효하지 않을 경우 DOM은 오로지 유효한 HTML 문서에 대한 인터페이스이다. HTML을 파싱하며 DOM을 생성하는 과정에서, 브라우저는 HTML에서 문제가 있는 것들을 고칠 수도 있다. 예를 들어, 아래의 HTML과 같이 <head> 와 <body> 가 빠진 유효하지 않은 HTML의 경우, DOM은 head와 body를 추가하여 유효한 HTML로 고치게 된다.
(차이점 2) : DOM이 자바스크립트에 의해 수정되었을 경우DOM은 정적인 것이 아니고, 동적으로 변경될 수 있다. JS가 DOM에 수정을 가할 수 있는데, DOM에 노드를 추가하거나, 수정하느 등의 작업을 할 수 있다. 그러나 JS가 DOM을 변경한다고 하여서 HTML이 변경되는 것은 아니다.

2. DOM이 브라우저에서 보여지는 것은 아니다.

브라우저 화면에서 보여지는 것은 렌더트리이며, 렌더트리는 DOM과 CSSOM을 합쳐서 구성하게 된다. DOM과 렌더트리의 차이는 렌더트리는 화면에 페인트될 것으로 구성되어있다는 것이다.

렌더트리는 오로지 무엇이 렌더링될지에 대해 관심을 갖기 때문에 보여지지 않는 부분은 렌더트리에서 제외가 된다.display: none 속성이 있는 element는 DOM에는 있지만, 보여지지 않기 때문에 렌더트리에는 빠진다.

단, visibility: hidden은 마찬가지로 화면에 보이지는 않지만, 렌더트리에는 포함된다. 따라서, visibility: hidden으로 숨겨진 element는 보이지는 않지만, 실제 화면에서 그 공간을 차지하고는 있다.

3. DOM이 devtool(개발자 도구)에 있는 것과 같은 것이 아니다.

devtool은 DOM에 가까운 것을 제공한다. 그러나, 데브툴은 DOM에 없더라도, 우리에게 정보를 주기 위해 추가로 넣는 것들이 있다.

그 예로는 CSS의 pseudo element가 있따. pseudo-element는 CSSOM과 렌더트리로부터 ::before와 ::after 셀렉터로 만들어지게 된다. 그러나, DOM에는 속하지 않는다. DOM은 HTML로부터 만들어지는 것이기 때문에, 그 Element와 관련된 스타일은 포함하지 않기 때문이다.

pseudo-element가 DOM의 구성은 아니지만, devtool은 그것을 보여주게 된다. 그러므로, pseudo-element가 devtool에서 보여진다 하더라도, JS로 그 엘리먼트를 target할 수는 없는 것이다.

요약정리

첫째로 뷰 포트에 무엇을 렌더링 할지 결정하기 위해 사용되며,둘째로는 페이지의 콘텐츠 및 구조, 그리고 스타일이 자바스크립트 프로그램에 의해 수정되기 위해 사용됩니다.DOM은 원본 HTML 문서 형태와 비슷하지만 몇 가지 차이점이 있습니다.

항상 유효한 HTML 형식입니다.
자바스크립트에 수정될 수 있는 동적 모델이어야 합니다.
가상 요소를 포함하지 않습니다. (Ex. ::after)
보이지 않는 요소를 포함합니다. (Ex. display: none)

브라우저의 동작 원리

https://d2.naver.com/helloworld/59361

KODYwiththeK

일상 속 선한 영향력을 만드는 개발자를 꿈꿉니다🧑🏻‍💻

JS DOM

JavaScript

JS DOM

DOM

문서계층구조

DOM API

Node

노드 종류

Node tree

DOM Element

DOM 활용

ID, name, className을 이용하여 찾기

노드와 속성 추가

참고자료

웹페이지가 만들어지는 과정

DOM 생성 과정

DOM이 아닌 것은 무엇인가?

1. DOM은 원본 HTML이 아니다

2. DOM이 브라우저에서 보여지는 것은 아니다.

3. DOM이 devtool(개발자 도구)에 있는 것과 같은 것이 아니다.

요약정리

브라우저의 동작 원리

JS 문법 - 모듈

웹 프론트 언어로서 자바스크립트

0개의 댓글

관련 채용 정보