DOM 이란?
DOM (Documment Object Model = 문서 객체 모델)
HTML의 태그(요소)들을 웹 브라우저의 메모리에 올려서 자바스크립트로 사용하기 위해 만들어진 웹 문서
한마디로, 웹 페이지를 다루는 인터페이스
더 쉽게 설명하자면... (사실 내가 이해가 안돼서 더 찾아봄ㅋㅋ)
HTML은 화면에 보이는 구조를 단순 텍스트로 구성한 것이고,
DOM은 이 HTML 문서의 내용이랑 구조를 객체 모델로 바꿔서 다양한 프로그램에서 사용할 수 있게 하는거다.
웹브라우저에서 HTML 파일을 받아 DOM으로 만들면 자바스크립트를 통해 여러 가지 조작이 가능(API제공)하다.
DOM 요소의 접근 방법
매서드 | 설명 |
document.getElementByld("id명") | 해당 id명을 가진 요소 하나를 반환한다. |
document.querySelector("선택자") | 해당 선택자를 만족하는 요소 하나를 반환한다. |
document.getElementByClassName("class명")[순서] | 해당 class 명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소 반환한다. |
document.getElementByTagName("태그명")[순서] | 해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소를 반환한다. |
document.querySelectorAll("선택자명")[순서] | 해당 선택자를 만족하는 모든 요소들을 배열에 인덱스에 맞는 요소를 반환한다. |
예제
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
</style>
</head>
<body>
<div>
<button id="idname" class="classname">버튼</button>
</div>
</body>
</html>
const button;
button = document.getElementById("idname");
button = document.querySelector("#idname");
button = document.getElementsByClassName("classname")[0];
button = document.getElementsByTagName("button")[0];
button = document.querySelectorAll(".classname")[0];
하;;; 매일 할 일 다 끝내고 했더니 오늘은 시간이 넘 촉박했다ㅠㅠ 일단 내고 다시 공부해야할듯..
내일부터는 그냥 일어나자마자 이거먼저 해야겠다.
참고 자료
https://velog.io/@j_user0719/DOM-Virtual-DOM
https://opentutorials.org/course/1567/24
'WEB' 카테고리의 다른 글
[Javascript] 로컬 스토리지 (0) | 2022.03.07 |
---|---|
[Javascript] 이벤트 리스너 (0) | 2022.03.06 |
[Javascript] 자바스크립트 함수 선언 & 호출 (0) | 2022.03.04 |
[Javascript] 객체 & 배열 (0) | 2022.03.03 |
[Javascript] 조건문 / 반복문 (0) | 2022.03.02 |