[JavaScript] DOM

DOM이란｜

자바스크립트를 통해 웹페이지(문서)를 동적으로 제어해주는 인터페이스를 말한다.

 

약자를 풀어서 해석해보면

Document : 웹페이지를 구성하는 요소들(Element : body,div, ···)

Object : 객체

Model : 모델

문서들을 객체로 만들어서 자바스크립트가 제어하도록 하는 장치를 DOM이라 한다.

 

브라우저는 HTML 코드를 해석하고 → 요소들을 트리 형태로 만든 문서(DOM)를 → 화면에 보여준다.(렌더링) 

 

 

 

 

 

DOM의 목적｜

웹 페이지에 접근하여 페이지를 수정하고 이벤트 처리를 정의할 수 있다.

 

 

 

 

 

DOM 접근 메소드｜

메소드를 사용해 제어할 요소를 찾을 수 있다.

메소드 & 속성	설명
document.getElementById()	특정 id를 가진 요소를 선택한다.
document.getElementByName()	특정 name을 가진 요소를 선택한다.
document.getElementByTagName()	특정 tag name을 가진 요소를 선택한다. (동일한 태그 이름 모두 선택 가능)
document.getElementByClassName()	특정 class name을 가진 요소를 선택한다.
document.querySelector()	CSS selector에 해당하는 첫 번째 요소를 선택한다.
document.querySeletorAll()	CSS selector에 해당하는 모든 요소를 선택한다.
document.createElement()	새로운 요소를 생성한다.
addEvenListener(event, function)	이벤트를 등록한다. (권장)
element.innerHTML = 'x'	새로운 element의 내용을 'x'로 설정한다.
element.className = 'x'	새로운 element에 'x'라는 클래스를 추가한다.
element.attribute	element의 속성에 접근한다.
element.style.property	element의 스타일 속성에 접근하거나 설정한다.
title.appendChild(element)	요소의 자식으로 새로운 요소를 추가한다.
document.write()	문서에 텍스트나 HTML을 동적으로 쓴다. (제어가 어려워 권장하지 않음)

 

 

 

 

 

DOM 예제｜
Javascript로 p 태그를 생성하고 class name을 dom으로 한다. 해당 요소에 "DOM" 텍스트를 넣어 h1요소 내부에 추가한다.

function addP() {
  const title = document.getElementById('h1-title')   //'h1-title'이라는 특정 요소의 id 선택
  const p = document.createElement('p')               //'p'라는 새로운 요소를 생성

    p.className = "dom";                              //요소에 class name 설정
    p.innerHTML = "DOM";                              //요소 안에 텍스트 입력

  title.appendChild(p);                               //새로운 요소 추가
}
 
 addP();

 

 

 

비밀번호 일치여부

keyup 이벤트를 추가하고 value 속성으로 password 일치여부를 확인한다. 일치하지 않으면 .alert 클래스에 문구를 넣는다.

const password = document.getElementById('password');
const rePassword = document.getElementById('re-password')

function matchPassword() {
  const alert = document.querySelector('.alert');       //요소를 반환

  const passwordValue = password.value;
  const rePasswordValue = rePassword.value;
  const match = passwordValue === rePasswordValue;      //value 속성으로 pw=repw 일치여부 확인

  if (!match) {
    alert.innerHTML = "비밀번호가 일치하지 않습니다.";   //일치하지 않을 경우 문구 설정
  } else {
    alert.innerHTML = "";                               //일치할 경우 ""문구 설정
  }
  }

password.addEventListener('keyup', matchPassword)       //'keyup' 이벤트 등록
rePassword.addEventListener('keyup', matchPassword)