본문 바로가기
PROGRAMMING/JavaScript

[JS] DOM 조작 (선택, 변경)

by 안녕나는현서 2021. 11. 12.
728x90

JavaScript의 필요성

  • 브라우저 화면을 '동적'으로 만들기 위함
  • 브라우저를 조작할 수 있는 유일한 언어

 

브라우저에서 할 수 있는 일

- DOM 조작 (Document Object Model)

  • 문서(HTML, XML)를 조작
  • 문서를 구조화, 구조화된 구성 요소는 하나의 객체
    • 주요 객체
    • window: DOM을 표현하는 창, 가장 최상위 객체 (작성 시 생략가능)
    • document: 페이지 컨텐츠의 Entry Point 역할, <body>등과 같은 다른 요소 포함
    • navigator, location, history, screen
  • 단순한 속성 접근, 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작 가능
  • 파싱 (Parsing)
    • 구문 분석, 해석
    • 브라우저가 문자열을 해석하여 DOM Tree로 만드는 과정

 

- BOM 조작 (Browser Object Model)

  • JavaScript가 브라우저와 소통하기 위한 모델
  • 브라우저의 창이나 프레임을 추상화해서 프로그래밍적으로 제어할 수 있도록 제공하는 수단
    • 버튼, URL 입력창, 타이틀 바 등 브라우저 윈도우 및 웹 페이지 일부분 제어 가능
    • window.open(), window.print(), window.confirm()
  • window 객체는 모든 브라우저로부터 지원받으며 브라우저의 창을 지칭

 

- JavaScript Core (ECMAScript)

  • 프로그래밍 언어로 사용

 

DOM 조작

  • Document는 문서 한 장(HTML)에 해당하고 이를 조작
  • DOM 조작 순서: 선택(Select) → 변경(Manipulation)

 

- DOM 관련 객체의 상속 구조

  • EventTarget: Event Listner를 가질 수 있는 객체가 구현하는 DOM 인터페이스
  • Node: 여러 가지 DOM 타입들이 상속하는 인터페이스
  • Element
    • Document안의 모든 객체가 상속하는 가장 범용적인 기반 클래스
    • 부모인 Node와 그 부모인 EventTarget의 속성을 상속
  • Document
    • 브라우저가 불러온 웹 페이지
    • DOM 트리의 진입점
  • HTMLElement
    • 모든 종류의 HTML 요소
    • 부모 element의 속성 상속

 

DOM 선택

- DOM 선택 메서드

  • Document.querySelector(selector)
    • 제공한 선택자와 일치하는 element 하나 선택
    • 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환 (없다면 null)
  • Document.querySelectorAll(selector)
    • 제공한 선택자와 일치하는 여러 element를 선택
    • 매칭 할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자(문자열)로 받음
    • 지정된 셀렉터에 일치하는 NodeList를 반환
  • getElementById(id)
  • getElementByTagName(name)
  • getElementByClassName(names)

* querySelector(), querySelectorAll()을 사용하는 이유

: id, tag선택자, class를 모두 사용 가능, 더 구체적이고 유연하게 선택 가능

  ex) document.querySelector('#id'), document.querySelector('.name')

 

 

- DOM 선택 메서드별 반환 타입

  1. 단일 element: querySelector(), getElementById()
  2. HTML Collection: getElementByTagName(), getElementByClassName()
  3. NodeList: querySelectorAll()

* HTML Collection / NodeList

  1. 공통점
    • 둘 다 배열과 같이 각 항목에 접근하기 위한 index 제공 (유사 배열)
    • Live Collection으로 DOM의 변경사항 실시간으로 반영
      (querySelectorAll()에 의해 반환되는 NodeList는 Static Collection으로 실시간 반영x)
  2. HTMLCollection
    • name, id, index 속성으로 각 항목에 접근 가능
  3. NodeList
    • index로만 각 항목에 접근 가능
    • 배열에서 사용하는 다양한 메서드 사용 가능 (ex: forEach)

 

DOM 변경

- DOM 변경 메서드

  • document.createElement()
    • 작성한 태그 명의 HTML 요소를 생성하여 반환
  • element.append()
    • 특정 부모 Node의 자식 NodeList 중 마지막 자식 다음에 Node 객체나 DOMString을 삽입
    • 여러 개의 Node객체, DomString을 추가 가능
    • 반환 값 없음
  • node.appendChild()
    • 특정 부모 Node의 자식 NodeList 중 마지막 자식 다음에 Node 객체를 삽입
    • 한 번에 오직 하나의 Node만 추가 가능
    • 만약 주어진 Node가 이미 문서에 존재하는 다른 Node를 참조한다면 새로운 위치로 이동
    • 추가된 Node 객체 반환

 

- DOM 변경 속성 (property)

  • node.innerText
    • Node 객체와 그 자손의 텍스트 컨텐츠(DOMString)를 표현
    • 줄 바꿈을 인식하고 숨겨진 내용을 무시하는 등 최종적으로 스타일링이 적용된 모습으로 표현
  • element.innerHTML
    • 요소(element)내에 포함된 HTML 마크업을 반환
    • XSS 공격에 취약
liTag.innerText = '<li>안녕</li>'
// '<li>안녕</li>'이 그대로 li태그 안에 텍스트로 들어감
liTag.innerHTML = '<li>안녕</li>'
// '안녕'만 li태그 안에 텍스트로 들어감

* XSS (Cross-site Scripting)

  • 공격자가 웹 사이트 클라이언트 측 코드에 악성 스크립트를 삽입해 공격하는 방법
  • 피해자의 브라우저가 악성 스크립트를 실행하며 공격자가 엑세스 제어를 우회하고 사용자를 가장할 수 있도록 함

 

- DOM 삭제 메서드

  • ChildNode.remove()
    • Node가 속한 트리에서 해당 Node를 제거
  • PerentNode.removeChild(ChildNode)
    • DOM에서 자식 Node를 제거하고 제거된 Node 반환
    • Node는 인자로 들어가는 자식 Node의 부모 Node

 

- DOM 속성 메서드

  • Element.setAttribute(name, value)
    • 지정된 요소의 값을 설정
    • 속성이 이미 존재하면 값을 갱신, 존재하지 않으면 지정된 이름과 값으로 새 속성 추가
  • Element.getAttribute(attributeName)
    • 해당 요소의 지정된 값(문자열)을 반환
    • 인자(attributeName)는 값을 얻고자 하는 속성의 이름

 

Event

  • 네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체
  • 마우스 클릭, 키보드 누르기 등 사용자 행동으로 발생할 수도 있음
  • 특정 메서드를 호출 (Element.click())하여 프로그래밍적으로도 만들어낼 수 있음
  • 이벤트의 역할: '~하면 ~한다' (ex: 클릭하면, 경고창을 띄운다.)

 

- Event handler : addEventListener()

  • EventTarget.addEventListener()
    • 지정한 이벤트가 대상에 전달될 때마다 호출할 함수 설정
    • 이벤트를 지원하는 모든 객체(Element, Document, Window 등)를 대상으로 지정 가능
  • target.addEventListener(type, listner[, options])
    • type: 반응할 이벤트 유형 (대소문자 구분 문자열)
    • listener: 지정된 타입의 이벤트가 발생했을 때 알림을 받는 객체, EventListner 인터페이스 혹은 JS function 객체(콜백 함수)여야 함

 

- Event 취소

  • Event.preventDefault()
    • 현재 이벤트의 기본 동작(a태그: 클릭 시 링크로 이동/ form태그: form데이터 전송)을 중단
    • 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지 않고 그 이벤트를 취소
    • 취소할 수 없는 이벤트도 존재: event.cancelable 사용해 확인 가능
728x90
저작자표시 비영리 변경금지

'PROGRAMMING > JavaScript' 카테고리의 다른 글

[JS] AJAX, Concurrency model, Promise, Axios  (0) 2021.11.14
[JS] 배열 관련 메서드  (0) 2021.11.12
[JS] 함수  (0) 2021.11.12
[JS] 조건문, 반복문  (0) 2021.11.12
[JS] 식별자, 변수, 타입, 연산자  (0) 2021.11.12

관련글

댓글

티스토리툴바