TIL 6. DOM (1)

rachel's blog·2021년 10월 16일
JavaScriptTIL
0

TIL

목록 보기
6/14
post-thumbnail

HTML : 브라우저가 이해할 수 있는 언어로 문서가 어떤 의미를 지니고 어떤 구조로 이루어져있는지를 나타내는 것 (백지)

CSS :시각적인 요소를 추가하기 위한 언어(물감)

💡 HTML, CSS 연결하는 방법?

  • Inline Style
  • Style tag
  • Link 를 통한 input

Javascript : 웹페이지를 동적으로 만들어주기 위한 언어

  • 프로그래밍의 논리적 특성을 이용해서 동적으로 구현한다.
  • HTML과 연결하는 방법? :
    script tag / .js 외부링크 import

What is DOM?

👉HTML, JS를 연결하기 위한 중간다리 역할
👉웹 페이지에 접근해서 요소를 생성, 내용 추가, 클래스 부여 등등을 할 수 있다.

Document Object Model

문서(html)를 객체화 시킨 모델

  • 웹페이지의 HTML을 계층화 시켜 트리구조로 만든 객체 모델
  • JS를 통해 웹 페이지에 접근 및 수정가능


🔎 왜 하필 객체 형태?

  • DOM은 트리구조로 이루어져 있어서 객체의 형태로 접근하는 것이 가장 편리함

1. 왜 HTML을 접근해야 할까?

브라우저의 랜더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.

🔎여기서 DOM이란?

DOM : Document Object Model 은 HTML 문서의 계층적 구조와 정보를 표현하여 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다.

→ 트리자료구조 : 노드들의 계층 구조 / 부모 노드와 자식 노드로 구성
→ 루트 노드 : 최상위 노드. 부모 노드 없음. 0개 이상의 자식 노드를 갖는다.
→ 리프 노드 : 자식 노드가 없는 노드

노드 객체로 구성된 트리 자료 구조를 DOM이라고 한다!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <ul id="fruits">
        <li class="apple">Apple</li>
        <li class="banana">Banana</li>
        <li class="orange">Orange</li>
    </ul>
    
    <script src="app.js"></script>
</body>
</html>

위의 HTML 구조를 파싱하면 다음과 같은 DOM을 생성한다.

출처: 모던자바스크립트 deep dive _ 679p

✔ DOM은 HTML 문서의 계층적 구조와 정보를 표현
✔ 노드 객체의 종류, 타입에 따라 필요한 기능을 프로퍼티와 메서드 집합인 DOM API로 제공함
✔ 이 DOM API를 통해 HTML의 구조나 내용 또는 스타일 등을 동적으로 조작할 수 있게됨!!

input 요소 노드 객체의 특성 프로토타입을 제공하는 객체
객체 Object
이벤트를 발생시키는 객체 EventTarget
트리자료구조의 노드 객체 Node
브라우저가 랜더링할 수 있는 웹문서의 요소(HTML, XML, SVG)를 표현하는 객체 Element
웹 문서의 요소 중에서 HTML요소를 표현하는 객체 HTMLElement
HTML 요소 중에서 input 요소를 표현하는 객체 HTMLInputElement

2. 요소 노드 취득

2-1. id를 이용한 요소 노드 취득 : getElementById()

Document.prototype.getElementById : id값을 갖는 하나의 요소 노드를 탐색하여 반환
👉getElementById 메서드는 Document.prototype의 프로퍼티 이므로 반드시 'document'를 통해 호출해야 한다.

2-2. 태그 이름를 이용한 요소 노드 취득 : getElementByTagName()

Document.prototype.getElementByTagName : 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환
👉getElementByTagName 메서드는 HTMLCollection 객체 반환_여러 개의 요소 노드 객체를 가짐
함수는 하나의 값만 반환할 수 있다. 따라서 여러 개의 값을 반환하려면 "배열"이나 "객체"와 같은 자료구조에 담아서 반환해야 한다.
👉DOM 컬렉션 객체인 HTMLCollection 객체는 유사 배열 객체이면서 이터러블이다.

2-3. class 이름를 이용한 요소 노드 취득 : getElementsByClassName()

Document.prototype/Element.prototype.getElementsByClassName : 인수로 전달한 class값을 갖는 모든 요소들을 탐색해서 반환
-인수로 전달할 class 값을ㅋ 공백으로 구분해서 여러 개의 class를 지정할 수 있다.

2-4. css선택자를 이용한 요소 노드 취득 : 스타일을 적용하고자 하는 HTML 요소를 특정할 때 사용하는 문법

* { ... } : 전체선택자_ 모든 요소를 선택
P { ... } : 모든 p 태그 요소를 모두 선택
#foo { ... } : 아이디 값이 'foo'인 요소를 모두 선택
.foo { ... } : class 값이 'foo'인 요소를 모두 선택
input[type=text] { ... } : 어트리뷰트 선택자/ input 요소 중에 type 어트리뷰트 값이 'text'인 요소를 모두 선택
div p { ... } : 하위 선택자 / div 요소의 하위 요소 중 p 요소를 모두 선택
div > p { ... } : 자식 선택자 / div 요소의 자식 요소 중 p 요소를 모두 선택
p + ul { ... } : 일반 선택자 / p 요소의 형제 요소 중에 p 요소 뒤에 위치하는 ul 요소를 모두 선택
p ~ ul { ... } : 가상클래스 선택자 / hover 상태인 a 요소를 모두 선택
a:hover { ... } : 가상요소선택자 / p요소의 콘텐츠 앞에 위치하는 공간을 선택
일반적으로 content 프로퍼티와 함께 사용
p::after { ... }

2-5. 하나의 요소 노드를 탐색해서 반환 : querySeletor()

Document.prototype/Element.prototype.querySelector() : 인수로 전달한 CSS 선택자를 만족시키는 하나의 요소 노드를 탐색해서 반환

  • 인수로 전달한 CSS 선택자를 만족시키는 요소 노드가 여러 개인 경우 첫 번째 노드만 반환
  • 인수로 전달한 CSS 선택자를 만족시키는 요소 노드가 존재하지 않는 경우: null
  • 인수로 전달한 CSS 선택자가 문법에 맞지 않는 경우 DOMException 에러 발생

✔ querySelectorAll() : 인수로 전달한 CSS선택자를 만족시키는 모든 요소 노드를 탐색해서 반환
✔ querySelectorAll() : DOM 컬렉션 객체인 NodeList 객체를 반환 / 유사배열객체이면서 이터러블

2-6. 특정 요소 노드를 취득할 수 있는지 확인 : matches()

Element.prototype.matches() : 인수로 전달한 css 선택자를 통해 특정 요소 노드를 취득할 수 있는지 확인함(true/false반환)

3. HTMLCollection, NodeList

📌특징

  • DOM API가 여러 개의 결과값을 반환하기 위한 DOM컬렉션 객체
  • 모두 유사 배열 객체이면서 이터러블
  • for...of문 순회가능, 스프레드 문법 사용해서 배열로 반환 가능
  • live 객체 (단, NodeList는 대부분의 경우 non-live 객체로 동작, 경우에 따라서만 live 객체로 동작함)
    👉따라서 노드 객체의 상태와 상관없이 안전하게 DOM 컬렉션 사용시 HTMLColletion 이나 NodeList 객체를 "배열"로 변환해서 사용하는 것이 좋다. 배열로 사용하면 배열 고차함수를 사용할 수 있어서 장점이 있다.

4. Node 탐색

4-1. 공백 텍스트 노드

HTML 요소 사이의 스페이스, 탭, 줄바꿈(개행)등의 공백(white space) 문자는 빈 텍스트 노드를 생성한다.

4-2. 자식노드 탐색

✔ 4-2-1. Node.prototype.childNodes

  • 자식노드를 모두 탐색, DOM 컬렉션 객체인 NodeList 에 담아 반환
  • childNodes 프로퍼티가 반환한 NodeList에는 요소 노드 뿐만 아니라
    텍스트 노드도 포함가능.

✔ 4-2-2. Element.prototype.children

  • 자식 노드 중 요소 노드만 모두 탐색해서 HTMLCollection 에 반환
  • 텍스트 노드는 포함되지 않는다.

✔ 4-2-3. Node.prototype.firstChild

  • 첫 번째 자식 노드를 반환
  • 텍스트 노드 or 요소 노드 반환

✔ 4-2-4. Node.prototype.lastChild

  • 마지막 자식 노드를 반환
  • 텍스트 노드 or 요소 노드 반환

✔ 4-2-5. Element.prototype.firstElementChild

  • 첫 번째 자식 요소 노드를 반환
  • 요소 노드만 반환

✔ 4-2-6. Element.prototype.lastElementChild

  • 마지막 자식 요소 노드를 반환
  • 요소 노드만 반환

4-3. 요소 노드의 텍스트 노드 검색 : firstChild

  • 요소 노드의 텍스트 노드는 요소 노드의 자식 노드
  • 요소 노드의 텍스트 노드는 firtstChild 프로퍼티로 접근할 수 있다.
  • 요소 노드나 텍스트 노드를 반환
<!DOCTYPE html>
<html>
<body>
	<div id="foo">Hello</div>
    <script>
    	//요소 노드의 텍스트 노드는 firstChild 프로퍼티로 접근할 수 있다.
        console.log(document.getElementById('foo').firstChild); //#text
    </script>
</body>
</html>

4-4. 부모 노드 탐색 : Node.prototype.parentNode

4-5. 형제 노드 탐색

✔ 4-5-1. Node.prototype.previousSibing

  • 부모 노드가 같은 형제 노드 중 자신의 이전 형제 노드 탐색하여 반환
  • 요소 노드 또는 텍스트 노드 반환

✔ 4-5-2. Node.prototype.nextSibling

  • 부모 노드가 같은 형제 노드 중 자신의 다음 형제 노드 탐색하여 반환
  • 요소 노드 또는 텍스트 노드 반환

✔ 4-5-3. Node.prototype.previousElementSibling

  • 부모 노드가 같은 형제 노드 중 자신의 이전 형제 요소 노드를 탐색하여 반환
  • 요소 노드만 반환

✔ 4-5-4. Node.prototype.nextElementSibling

  • 부모 노드가 같은 형제 노드 중 자신의 다음 형제 요소 노드를 탐색하여 반환
  • 요소 노드만 반환

5. 요소 노드의 텍스트 조작

5-1. nodeValue

nodeValue는 접근자 프로퍼티로 setter, getter가 모두 존재함. 따라서 참조와 할당이 모두 가능하다.

  • node 객체의 nodeValue 프로퍼티를 참조하면 노드 객체의 값을 반환한다.
  • 노드 객체의 값 : 텍스트 노드의 텍스트을 반환한다.

5-2. textContent

요소 노드의 textContent 프로퍼티를 참조하면 요소 노드의 콘텐츠 영역 내의 텍스트를 모두 반환한다. (HTML 마크업 무시)

  • 요소 노드의 textContent 프로퍼티에 문자열을 할당하면 요소 노드의 모든 자식 노드가 제거되고 할당한 문자열이 텍스트로 추가된다.

출처: 모던자바스크립트 deep dive

profile
rachel's blog
블로그 이전 : https://rachelslab.tistory.com/
이전 포스트

TIL 5. Database

다음 포스트

TIL 7. DOM (2)

0개의 댓글