2 분 소요

DOM

DOM이란 Document Object Model의 약자로, HTML요소를 Object처럼 조작할 수 있는 Model이다. 이를 통해 동적인 웹페이지를 구현할 수 있게 된다.

HTML에 JavaScript 적용

HTML에 Javascript를 적용하기 위해서는 script 태그를 이용하는데,

이는 script 태그의 삽입 위치와도 연관이 있다. 위 그림처럼 웹 브라우저는 코드 해석을 순차적으로 진행하기 때문에 만약 script태그를 head부분에 삽입할 경우, 이후 사용하는 변수는 인식을 못하기 때문에 변수가 다 선언된 이후, body가 끝나기 전에 삽입해야 한다.

자식, 부모 엘리먼트

웹 페이지에서 개발자 도구를 열고 콘솔 창에 ‘console.dir(document.body)’을 치면 다음과 같은 화면을 볼 수 있다.

여기서 자식(Child)와 부모(Parent)는 무엇일까?

위 그림과 같이 부모 요소란 자식 요소를 담고 있는 요소를 말하고 자식 요소란 부모 요소 안에 있는 요소를 말한다. 이를 통해 부모 요소를 통해 자식 요소로 접근하는 것도 가능하고 자식 요소를 통해 부모 요소로 접근하는 것 또한 가능하다.

이와 같이 돔은 컴퓨터 공학에서의 트리 구조와 흡사하다.

DOM으로 HTML 핸들링

앞서 말한 것과 같이 document 객체에는 많은 속성과 메소드가 존재한다. 이를 통해 우리는 요소 CREATE, APPEND, READ, UPDATE, DELETE 등을 진행할 수 있다.

  • CREATE - createElement

    • 당연한 말이지만, 앞서 말한 것과 같이 돔은 트리 구조와 흡사하기 때문에 생성만으로는 의미가 없다. 따라서 이를 원래 트리와 가지치기해주는 것이 append이다.

    • const createDiv = document.createElement('div')
  • APPEND - append, appendChild 
    •   document.body.append(createDiv)

  • READ - querySelector, querySelectorAll

    • DOM으로 HTML의 요소 접근은 대표적으로 QuerySelector가 있으며, 접근 방법으로는 HTML 태그(ex. “div”), id(ex. “#id”), class(“.class”)가 가장 많이 사용된다.

    • querySelector

      • const readElement = document.querySelector('.class')

      • 위 코드와 같이 tag나 class를 이용해서 불러오게 될 경우, id와 같이 유일한 값이 아니기 때문에 HTML 요소 중 가장 첫번째 요소를 불러오게 된다. 따라서 모두 불러오고 싶다면 querySelectorAll을 사용한다.

        • 여기서 HTML 엘리먼트들은 배열처럼 for문을 사용할 수 있지만 배열이 아닌 유사 배열(Array-like Object)이다.

  • UPDATE - textContent, classList.add

    • CREATE, APPEND, READ를 통해 조회 및 생성을 했다면 UPDATE는 요소 값을 통해 보다 다양한 작업이 가능하다.

    • textContent : 요소에 문자열 입력

      • createDiv.textContent = "Hello World"

    • classList.add : css 스타일 적용 등을 위한 class 추가

      • createDiv.classList.add('good-container')

  • DELETE - remove, removeChild

    • 삭제

      •   createDiv.remove()

    • 여러 개의 자식 요소 삭제

      •   document.querySelector('#parentElement').innerHTML = '';
      • 이 방법은 간편하지만 보안 문제를 가지고 있기 때문에 자식 엘리먼트를 지정하여 삭제해 주는 것이 좋다.

    • 자식 엘리먼트 지정 및 삭제(반복문)

      •   const parentEle = document.querySelector('#parentElement');
  while(parentEle.firstChild) {
    parentEle.removeChild(container.firstChild);
    //계속 첫번째 자식 요소를 삭제함으로써 모든 자식 요소를 삭제한다.
  }

    DOM으로 HTML 핸들링 예제

    이벤트 객체

이벤트 객체란 말 그대로 사용자의 입력을 트리거로 발생한 이벤트 정보를 담은 객체로, onClick, onKeyup, onScroll, onSubmit, onChange, onMouseover ,,, 등 엄청 많다.

이를 통해

btn.onclick = function() {
  //함수 실행 내용
  // ex. alert("버튼을 눌렀습니다.")
}

등과 같이 함수 호출이나 변수 핸들링이 가능하다.

이벤트 객체 참조

본 포스팅은 코드스테이츠 BEB 과정을 수강하며 작성한 글입니다.

참고

The Merge

6 분 소요

The Merge