목차
  1. JavaScript [9] - DOM
  2. DOM
  3. DOM 조작
  4. 조작 관련 메서드 (생성)
  5. 조작 관련 메서드 (입력)
  6. 조작 관련 메서드 (추가)
  7. 조작 관련 메서드 (삭제)
  8. 속성 조회 및 설정
  9. 그 외
728x90
반응형

JavaScript [9] - DOM

DOM

  • 문서 객체 모델(Document Object Model)
  • 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공
    • 문서 구조, 스타일, 내용 등을 쉽게 변경할 수 있게 도움
    • HTML 콘첸트를 추가, 제거, 변경하고, 동적으로 페이지에 스타일을 추가하는 등
      HTML/CSS를 조작 가능
  • HTML 문서를 구조화하여 각 요소를 객체(object)로 취급
  • 단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작이 가능

DOM 구조

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.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
반응형
저작자표시

'Front-end > 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
상단으로

티스토리툴바