[JS] 자바스크립트 DOM

DOM

DOM(Document Object Module)

html문서의 태그들을 javascript가 이용할 수 있도록 만들어진 객체의 집합

즉, 모든 html의 요소들은 객체가 되어 사용될 수 있다.

document

document 는 현재 html을 객체화 한것이다.

console.dir(title);

위 코드를 찍어보면 현재 html의 페이지의 모든 요소를 포함하고 있는것을 알수 있다.

document 을 이용하여 html의 모든 요소를 객체로 사용할 수 있다.

document 함수

document 함수를 사용하여 html 요소를 객체로 만들기

// in html
<h1 id="title">This is title.</h1>

// in js
// document에서 id가 title인 요소들을 객체로 가지고온다.
const title = document.quertSelector(".title")
// or const title = document.getElementById("title")


console.log(title);
// <h1 id="title">This works!</h1>

// title이라는 객체의 내장함수를 통해서 요소들을 변경할 수 있다.
title.innerHTML = "HI! From JS";
title.style.color = "red";
// html의 <h1 id="title">태그 안의 content가 HI! From JS로 변경이 되고 빨간색으로 바뀐다.

// title객체를 통해서 할 수 있는것들 출력(객체의 키 출력), 아래 이미지 참고
console.dir(title);

// document객체에 대하여 사용할 수 있는 
console.dir(title);

console.dir(DOM) 출력화면

자세히 보면 innerHTML도 보인다. className 과 id 를 통해서 클래스명과 id도 바꿀수 있고 style 을 통해서 css도 변경할 수 있다.

이처럼 console.dir(DOM)(DOM은 따로 객체를 선언해서 넣어준다.)을 이용하면 해당 DOM(객체)에 대해 사용할 수 있는 키와 메서드들을 확인할 수 있다.