[2024.04.16] JavaScript DOM

DOM

• 웹 브라우저에서의 JavaScript: 웹 페이지의 동적인 기능을 구현
  

• 1. HTML script 태그
     
• 2. 브라우저 Console
     
• 3. js 확장자 파일
     
     

• DOM (The Document Object Model): 웹 페이지(Document)를 구조화된 객체로 제공하여 프로그래밍 언어가 페이지 구조에 접근할 수 있는 방법을 제공 => 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함.

• DOM API: 다른 프로그래밍 언어가 웹 페이지에 접근 및 조작할 수 있도록 페이지 요소들을 객체 형태로 제공하며 이에 따른 메서드 또한 제공

• DOM 특징: 1) DOM에서 모든 요소, 속성, 텍스트는 하나의 객체. 2) 모두 document 객체의 하위 객체로 구성됨 (document 위에 window 객체가 있긴 한데, 이 객체는 생략이 가능)

• DOM tree: 브라우저는 HTML 문서를 해석하여 DOM tree라는 객체 트리로 구조화. 객체 간 상속 구조가 존재
  

• 브라우저가 웹 페이지를 불러오는 과정: 웹 페이지는 웹 브라우저를 통해 해석되어 웹 브라우저 화면에 나타남

• DOM 핵심: 문서의 요소들을 객체로 제공하여 다른 프로그래밍 언어에서 접근하고 조작할 수 있는 방법을 제공하는 API

document 객체

• 'document' 객체: 웹 페이지 객체. DOM Tree의 진입점. 페이지를 구성하는 모든 객체 요소를 포함

• 브라우저에 접근해서 조작 가능 => DOM(document 객체)의 역할
  

DOM 선택

• DOM 조작 시 기억해야 할 것
  웹 페이지를 동적으로 만들기 == 웹 페이지를 조작하기
  조작 순서>
  1. 조작 하고자 하는 요소를 선택 (또는 탐색)
  2. 선택된 요소의 콘텐츠 또는 속성을 조작

선택 메서드

• document.querySelector(): 요소 한개 선택
  

• document.querySelectorAll(): 요소 여러개 선택
  

DOM 조작

속성 조작

1. 클래스 속성 조작
   'classList' property: 요소의 클래스 목록을 DOMTokenList(유사 배열) 형태로 반환
   
   

2. 일반 속성 조작
   
   

HTML 콘텐츠 조작

• 'textContent' property: 요소의 텍스트 콘텐츠를 표현
  

DOM 요소 조작

style 조작