728x90
반응형
JavaScript [9] - DOM
DOM
- 문서 객체 모델(Document Object Model)
- 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공
- 문서 구조, 스타일, 내용 등을 쉽게 변경할 수 있게 도움
- HTML 콘첸트를 추가, 제거, 변경하고, 동적으로 페이지에 스타일을 추가하는 등
HTML/CSS를 조작 가능
- HTML 문서를 구조화하여 각 요소를 객체(object)로 취급
- 단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작이 가능
DOM Tree
- DOM은 문서를 논리 트리로 표현
- DOM에서 모든 것은 Node
- 즉, HTML요소, 속성, 텍스트 모든 것이 노드
- 각 노드는 부모 자식 관계를 형성하고 이에 따라 상속 개념도 동일하게 적용됨
Node
- DOM의 구성요소 중 하나
- HTML 문서의 모든 요소를 나타냄
- 각각의 HTML 요소는 DOM Node로서 특정한 노드 타입을 가짐
- Document Node => HTML 문서 전체를 나타내는 노드
- Element Node => HTML 요소를 나타내는 노드 ex) <p>
- Text Node => HTML 텍스트, Element Node 내의 텍스트 컨텐츠를 나타냄
- Attribute Node => HTML요소의 속성을 나타내는 노드
DOM의 주요 객체
- window
- document
window object
- DOM을 표현하는 창
- 가장 최상위 객체(작성 시 생략 가능)
- 탭 기능이 있는 브라우저에서는 각각의 탭을 각각의 window 객체로 나타냄
document object
- 브라우저가 불러온 웹 페이지
- 페이지 컨텐츠의 진입점 역할을 하며, <body> 등과 같은 수많은 다른 요소들을 포함하고 있음
- [참고] document는 윈도우의 속성이다.
DOM 조작
- document.querySelector(selector)
- 제공한 선택자와 일치하는 element 한 개 선택
- 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환(없다면 null 반환)
- document.querySelectorAll(selector)
- 제공한 선택자와 일치하는 여러 element를 선택
- 매칭할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자로 받음
- 제공한 CSS selector를 만족하는 NodeList를 반환
console.log(document.querySelector('#title'))
// <h1 id="title">DOM 조작</h1>
console.log(document.querySelectorAll('.text'))
// NodeList(2) [p.text, p.text]
console.log(document.querySelector('.text'))
// <p class="text">querySelector</p>
console.log(document.querySelectorAll('body > ul > li'))
// NodeList(2) [li, li]- [참고] NodeList
- DOM 메서드를 사용해 선택한 노드의 목록
- 배열과 유사한 구조를 가짐
- Index로만 각 항목에 접근 가능
- 배열의 forEach 메서드 및 다양한 배열 메서드 사용 가능
- querySelectorAll()에 의해 반환되는 NodeList는 DOM의 변경사항을 실시간으로 반영하지 않음
조작 관련 메서드 (생성)
- document.createElement(tagName)
- 작성한 tagName의 HTML요소를 생성하여 반환
조작 관련 메서드 (입력)
- HTMLElement.innerText
- Node 객체와 그 자손의 텍스트 콘텐츠(DOMString)를 표현
(해당 요소 내부의 raw text) - 사람이 읽을 수 있는 요소만 남김
- 즉, 줄 바꿈을 인식하고 숨겨진 내용을 무시하는 등 최종적으로 스타일링이 적용된 모습으로 표현됨
- Node 객체와 그 자손의 텍스트 콘텐츠(DOMString)를 표현
조작 관련 메서드 (추가)
- Node.appendChild()
- 한 Node를 특정 부모 Node의 자식 NodeList 중 마지막 자식으로 삽입
- 한 번에 오직 하나의 Node만 추가할 수 있음
- 추가된 Node 객체를 반환
조작 관련 메서드 (삭제)
- Node.removeChild()
- DOM에서 자식 Node를 제거
- 제거된 Node를 반환
//h1 요소(element)를 만들고
const title = document.createElement('h1')
//텍스트를 추가하고
title.innerText = 'DOM 조작'
// 선택자로 div 태그를 가져와서
const div = document.querySelector('div')
// div 태그에 자식 요소로 추가
div.appendChild(title)
// div의 h1 요소 삭제
div.removeChild(title)속성 조회 및 설정
- Element.getAttribute(attributeName)
- 해당 요소의 지정된 값을 반환
- 인자(attributeName)는 값을 얻고자 하는 속성의 이름
- Element.setAttribute(name, value)
- 지정된 요소의 값을 설정
- 속성이 이미 존재하면 값을 갱신, 존재하지 않으면 지정된 이름과 값으로 새 속성을 추가
// a tag 생성 및 컨텐츠 추가
const aTag = document.createElement('a')
aTag.innerText = '구글'
// a 태그의 href 속성 추가
aTag.setAttribute('href', 'https://www.google.com')
console.log(aTag.getAttribute('herf'))
// div 태그의 자식 태그로 a 태그 추가
const div = document.querySelector('div')
div.append(Child(aTag))
// h1 tag 선택 및 클래스 목록 조회
const h1 = document.querySelector('h1')
console.log(h1.classList)
// 클래스가 존재한다면 제거하고 false를 반환,
// 존재하지 않으면 클래스를 추가하고 true를 반환
h1.classList.toggle('blue')
console.log(h1.classList)그 외
- Element.setAtteibute(name, value)
- 해당 속성이 이미 존재하는 경우 갱신 즉, 새로운 값을 추가 또는 수정이 아닌, 주어진 value로 새롭게 설정
- 만약 기존 속성은 유지한 채로, 새로운 값을 추가하고자 한다면
- Element.classList, Element.style 등을 통해 직접적으로 해당 요소의 각 속성들을 제어할 수 있음
728x90
반응형
'JavaScript' 카테고리의 다른 글
| [JavaScript] 2_간단한 회원관리 프로그램 만들기...(코드 작성) (0) | 2024.06.21 |
|---|---|
| [JavaScript] 1_간단한 회원관리 프로그램 만들기...(함수정리, 요구사항) (0) | 2024.06.21 |
| JavaScript[8] - 객체 (0) | 2023.04.25 |
| JavaScript[7] - 배열 메서드 심화 (2) | 2023.04.24 |
| JavaScript[6] - this와 배열 메서드 기초 (0) | 2023.04.20 |
