본문 바로가기
🧠TIL/JavaScript

JavaScript _ DOM & EVENT

by jinyyya 2022. 11. 6.

DOM

  • 브라우저에서의 JavaScript (웹 페이지에서 복잡한 기능을 구현하는 스크립트 언어)

문서 객체 모델

  • 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다.
    • HTML / CSS를 조작할 수 있다.
  • 문서가 구조화되어 있으며 각 요소는 객체로 취급한다.
  • 단순한 속성 접근 혹은 메서드 활용뿐만 아니라 프로그래밍 언어적 특성을 활용한 조작도 가능하다.
  • 웹 페이지는 일종의 문서 (document) 이다.
  • DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다.
  • DOM은 웹 페이지의 객체 지향 표현이며, JavaScript와 같은 스크립트 언어를 이용해 DOM을 수정할 수
    있다.

 

DOM의 주요 객체

window

  • DOM을 표현하는 창
  • 가장 최상위 객체
  • 작성 시 생략이 가능하다.

document

  • 브라우저가 불러온 웹 페이지
  • 페이지 콘텐츠의 진입점 역할을 하며, <body> 등과 같은 수많은 다른 요소들을 포함하고 있다.
  • document는 window의 속성

DOM 조작

  • DOM 조작 순서
  • 선택 (Select) -> 조작 (Manipulation)  

 

선택 관련 메서드

document.querySelector(selector)
  • 제공한 선택자와 일치하는 element를 한 개 선택한다.
  • 제공한 CSS selector를 만족하는 첫 번째 element 객체를 반환한다. (없으면 null 반환)

 

document.querySelectorAll(selector)
  • 제공한 선택자와 일치하는 여러 element를 선택한다.
  • 매칭 할 하나 이상의 셀렉터를 포함하는 유효한 CSS selector를 인자 (문자열)로 받는다.
  • 제공한 CSS selector를 만족하는 NodeList를 반환한다.
    • NodeList
      • index로만 각 항목에 접근이 가능하다.
      • 배열의 forEach 메서드 및 다양한 배열 메서드를 사용할 수 있다.
      • querySelectorAll()에 의해 반환되는 NodeList는 DOM의 변경 사항을 실시간으로 반영하지 않는다.

 

조작 관련 메서드

생성

document.createElement(tagName)
document.createElement('div') // div tag의 HTML 요소가 생성
  • 작성한 tagName의 HTML 요소를 생성하여 반환한다.

 

입력

Node.innerText
// button tag의 HTML 요소가 있다고 가정
const btnTag = document.querySelector('button')
btnTag.innerText = '버튼'   // <button>버튼</button>
  • Node 객체와 그 자손 텍스트 콘텐츠를 표현한다.
  • 사람이 읽을 수 있는 요소만 남긴다.

 

추가

Node.appendChild()
// ul tag의 HTML 요소가 있다고 가정
const ulTag = document.querySelector('ul')
const liTag = document.createElement('li')

ulTag.appendChild(liTag)

// <ul>
//   <li></li>
// </ul>
  • 한 Node를 특정 부모 Node의 자식 NodeList 중 마지막 자식으로 삽입한다.
  • 한 번에 하나의 Node만 추가할 수 있다.
  • 만약 주어진 Node가 이미 문서에 존재하는 다른 Node를 참조한다면 현재 위치에서 새로운 위치로
    이동한다.

 

삭제

Node.removeChild()
  • DOM에서 자식 Node를 제거한다.

 

속성 조회 및 설정

Element.getAttribute(attributeName)
// button tag의 HTML 요소가 있고, 그의 타입이 submit이라고 가정
const btnTag = document.querySelector('button')
btnTag.getAttribute('type')   // submit
  • 해당 요소의 지정된 값을 반환한다.

 

Element.setAttribute(name, value)
// button tag의 HTML 요소가 있다고 가정
const btnTag = document.querySelector('button')
btnTag.setAttribute('type', 'submit')   // btnTag의 type 속성 값이 submit으로 설정됨
  • 지정된 요소의 값을 설정한다.
  • 속성이 이미 존재한다면 값을 갱신하고, 존재하지 않으면 지정된 이름과 값으로 새 속성을 추가한다.

Event 란?

  • Event란 프로그래밍하고 있는 시스템에서 일어나는 사건 (action) 혹은 발생 (occurrence)인데, 우리가
    원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것

Event object

  • 네트워크 활동이나 사용자와의 상호작용 같은 사건의 발생을 알리기 위한 객체
  • DOM 요소는 Event를 받고, 받은 Event를 처리할 수 있다.

 

Event handler - addEventListener()

EventTarget.addEventListener(type, listener[, options])
  • 지정한 Event가 대상에 전달될 때마다 호출할 함수를 설정한다.
  • type
    • 반응할 Event 유형을 나타내는 대소문자 구분 문자열
    • input click submit 등
  • listener
    • 지정된 타입의 Event를 수신할 객체
    • JavaScript function 객체 (콜백 함수) 여야 한다.
    • 콜백 함수는 발생한 Event의 데이터를 가진 Event 기반 객체를 유일한 매개변수로 받는다.

 

Event 취소

event.preventDafault()
  • 현재 Event의 기본 동작을 중단한다.
  • HTML 요소의 기본 동작을 작동하지 않게 막는 역할을 한다.

댓글

티스토리툴바