JavaScript, Vue

JavaScript : DOM

Disciple428 2024. 4. 16. 20:19
  • ECMA Script

Ecma international이 정의하는 표준화된 스크립트 프로그래밍 언어 명세

스크립트 언어가 준수해야 하는 규칙, 세부사항 등을 제공하고 있다.

 

자바 스크립트는 ECMA Script 표준을 따르는 프로그래밍 언어다.

ECMA Script는 언어의 핵심을 정의하고 자바 스크립트는 ECMA Script 표준을 따라 구현된 언어다.

 

  • DOM (The Document Object Model)

웹 페이지를 구조화된 객체로 제공하여 프로그래밍 언어가 페이지 구조에 접근할 수 있는 방법을 제공 → 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.

⇒

DOM에서 모든 요소, 속성, 텍스트는 하나의 객체로서 모두 document 객체의 하위 객체로 구성된다.

브라우저는 HTML 문서를 해석하여 DOM tree 라는 객체 트리로 구조화한다.

(객체 간에 상속 구조를 띠고 있음)

 

  • 브라우저가 웹 페이지를 불러오는 과정

⇒ 웹 페이지는 웹 브라우저를 통해 해석되어 웹 브라우저 화면에 나타난다.

 

  • DOM 핵심

문서의 요소들을 객체로 제공하여 다른 프로그래밍 언어에서 접근하고 조작할 수 있는 방법을 제공하는 API ⇒ 다른 곳에서도 조작할 수 있도록 해준다!

 

  • document 객체

웹 페이지 객체

DOM tree의 진입점

페이지를 구성하는 모든 객체 요소를 포함한다.

 

  • DOM 조작 시 주의해야 할 것

웹 페이지를 동적으로 만듦 = 웹 페이지를 조작

조작 순서 ⇒

  1. 조작하고자 하는 요소를 선택 (또는 탐색)
  2. 선택된 요소의 콘텐츠 또는 속성을 조작

 

  • 선택 메서드
  1. document.querySelector( ) 괄호 안의 선택자(CSS selector)와 일치하는 첫 번째 element 객체를 선택하고 반환한다. (없으면 null을 반환)
  2. document.querySelectorAll( ) 괄호 안의 선택자(CSS selector)와 일치하는 여러 element 객체를 선택하고 이를 NodeList 로 반환한다.

 

  • DOM 조작
  1. 속성 조작 → 클래스 속성 조작 / 일반 속성 조작
  2. HTML 콘텐츠 조작
  3. DOM 요소 조작
  4. 스타일 조작

 

  • 클래스 속성 조작

classList property

요소의 클래스 목록을 DOMTokenList (유사 배열) 형태로 반환한다.

 

1.classList 메서드

element.classList.add( ) = 지정한 클래스 값을 추가

element.classList.remove( ) = 지정한 클래스 값을 제거

element.classList.toggle( ) = 클래스가 존재하면 제거하고 false를 반환, 존재하지 않으면 클래스를 추가하고 true를 반환

 

2. 일반 속성 조작 메서드

element.getAttribute( ) = 해당 요소에 지정된 값을 반환(조회)

element.setAttribute(name, value) = 지정된 요소의 속성 값을 설정, 속성이 이미 있으면 기존 값을 갱신하고 속성이 없으면 지정된 이름과 값으로 새 속성을 추가한다.

element.removeAttribute( ) = 요소에서 지정된 이름을 가진 속성을 제거

 

  • HTML 콘텐츠 조작

textContent property

요소의 텍스트 콘텐츠를 표현한다.

 

  • DOM 요소 조작 메서드

document.createElement( tagName ) = 작성한 tagName의 HTML 요소를 생성하여 반환

Node.appendChild( ) = 한 노드를 특정 부모 노드의 자식 노드리스트 중 마지막 자식으로 삽입하고 추가한 노드 객체를 반환

Node.removeChild( ) = DOM에서 자식 노드를 제거하고 제거된 노드를 반환

 

  • style 조작

style property

해당 요소의 모든 style 속성 목록을 포함하는 속성

 

  • Node

DOM의 기본 구성 단위

DOM 트리의 각 부분은 노드라는 객체로 표현된다.

ex)

Document Node = HTML 문서 전체를 나타내는 노드

Element Node = HTML 요소를 나타내는 노드

Text Node = Element Node 내의 텍스트 콘텐츠를 나타내는 노드

Attribute Node = HTML 요소의 속성을 나타내는 노드

 

  • NodeList

DOM 메서드를 사용해 선택한 Node 목록

배열과 유사한 구조

index로만 각 항목에 접근 가능

자바 스크립트의 배열 메서드 사용 가능

querySelectorAll( ) 에 의해 반환되는 노드 리스트는 DOM의 변경사항을 실시간으로 반영하지 않음

 

  • Element

Node의 하위 유형 (= 모든 element는 노드이지만, 모든 노드가 element인 것은 아님)

DOM 트리에서 HTML 요소를 나타내는 특별한 유형의 Node

p, div, span, body 등의 HTML 태그들이 element 노드를 생성한다.

노드 속성과 메서드를 모두 가지고 있으며 추가적으로 요소 특화된 기능을 가지고 있다.

 

  • Parsing (구문 분석, 해석)

브라우저가 문자열을 해석하여 DOM tree 로 만드는 과정

 

자바 스크립트의 궁극적인 목적 ⇒ 브라우저 문서 조작