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
DOM , Virtual DOM
실제로 웹 개발을 하시는 분들 ( 저 포함 😅 ) 중에서도 DOM의 존재를 알고 있지만 막상 설명을 잘 못하신다던가.. 정확하게 DOM 은 이거야! 라고 알고있지 않기도 하다.그래서 이번에는 나중에 누
velog.io
https://opentutorials.org/course/1567/24
DOM - 생활코딩
Dom - (document object model) 자바스크립트는 Dom을 통해서 HTML을 제어한다. 문서에 프로그래밍적으로 엑세스하고 변형하기 위한 프로그래밍 인터페이스. Dom처리의 일반적인 순서 제어할 대상을 찾는
opentutorials.org
'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 |