1. DOM이란?
DOM은 Document Object Model의 약자로, 문서의 구조화된 표현을 통해 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다. 이를 이용하여 우리는 문서 구조, 스타일, 내용 등을 변경할 수 있다. DOM은 프로그래밍 언어와 독립적으로 디자인되어있다. 주로 js를 많이 사용하는 편이지만 파이썬이나 c언어 등으로도 가능하다.
Document Object Model. 즉, 문서 객체 모델이라는 것인데 여기서 문서 객체란 , 와 같은 html 문서의 태그들을 JS가 이용할 수 있는 형태로 만드는 것이다. 정리하자면 DOM이란 객체 지향 모델로써 구조화된 문서를 표현하는 형식이자 HTML 문서의 모든 요소에 접근하는 방법을 정의한 API이다.
2. DOM의 구조
DOM은 tree 형태의 자료구조를 갖고 있다. 각 객체 하나하나를 node라 부르며, 이는 부모 노드(parent node)와 자식 노드(child node)로 나뉜다.
-
DOM 주요 개념
요소 선택 : JavaScript 문법을 사용하여 특정 요소를 선택할 수 있다. 예를 들어 특정 id를 가진 요소나 태그 이름으로 요소를 선택할 수 있다.
요소 조작 : 선택한 요소를 수정, 생성하여 DOM을 변경할 수 있다. 이를 통해 웹페이지의 내용이나 스타일을 동적으로 변경할 수 있다.
이벤트 처리 : 사용자 상호작용에 응답하기 위한 기능이다. 예를 들어 버튼 클릭이나 마우스 hover와 같은 이벤트를 감지하고 처리한다. -
주요 property 및 method
-document.getElementById(id): 지정된 ID를 가진 요소를 찾아 반환
-document.getElementsByClassName(className): 지정된 클래스 이름을 가진 모든 요소를 찾아 HTMLCollection으로 반환
-document.getElementsByTagName(tagName): 지정된 태그 이름을 가진 모든 요소를 찾아 HTMLCollection으로 반환
-document.querySelector(selector): 지정된 CSS 선택자에 해당하는 첫 번째 요소를 반환
-document.querySelectorAll(selector): 지정된 CSS 선택자에 해당하는 모든 요소를 NodeList로 반환
-document.createElement(tagName): 새로운 HTML 요소를 생성
-document.createTextNode(text): 텍스트 노드를 생성
-document.body: 요소에 대한 참조를 제공
-document.title: 웹 페이지의 제목을 가져오거나 설정(출처 : https://velog.io/@lukaid/DOM)
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title >
<script type= "text/javascript">
</script>
</head>
<body>
<h1 id ="header_1" name= "" > WOW </h1 >
<div >
<h1 id = "header_2">Nice Header</h1 >
</div >
<hr >
<h1 id = "clock"></h1>
</body>
</html>
document 객체에 접근하여 h2 태그 생성
var header = document.createElement('h2');document 객체에 접근하여 TextNode 생성 후, 'hello' 라는 문자를 넣음.
var textNode = document.createTextNode('Hello DOM');위에서 생성한 h2 태그에 자식노드(아까 그 TextNode)를 추가
header.appendChild(textNode); body 객체에 접근 후, header라는 자식 노드 추가
document.body.appendChild(header); 
