[JavaScript] 자바스크립트

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

ruriruriya

[JavaScript] 자바스크립트 - DOM이란? 본문

🖌️Web/JavaScript

[JavaScript] 자바스크립트 - DOM이란?

루리야ㅑ 2024. 4. 21. 13:51

자바스크립트의 DOM(Document Object Model)이란? HTML 및 XML 문서의 프로그래밍 인터페이스이다.
DOM은 문서의 구조적 표현을 제공하고 프로그램이 문서 구조, 스타일 및 내용을 변경할 수 있도록 한다.

웹 페이지를 브라우저에서 렌더링할 때, 브라우저는 HTML 문서를 DOM으로 변환한다.

이 DOM은 문서의 모든 요소, 속성 및 텍스트를 노드로 나타내는 계층적인 트리 구조이다.

DOM의 주요 개념

1. 노드

DOM의 기본 요소로, 문서의 모든 부분(요소, 속성, 텍스트 등)이 노드이다. 각 노드는 다른 노드와 관계를 가지며, 이런 관계는 트리 구조로 표현된다.

2. 요소 노드

HTML 태그에 해당하는 노드로 <.div>, <p>,<span> 등이 있다. 요소 노드는 속성 노드와 텍스트 노드를 포함할 수 있다.

3. 속성 노드

요소의 속성을 나타내며, 요소 노드에 연결된다.

4. 텍스트 노드

HTML 요소 내의 실제 텍스트를 포함하는 노드이다.

DOM 조작

자바스크립트를 사용하여 DOM 을 조작하여 요소를 추가/삭제/수정하거나 이벤트 핸들러를 연경하는 등, 동적으로 페이지의 내용을 변경하거나 사용자의 상호작용에 반응할 수 있다.

[요소 추가]

// 새로운 <p> 요소 생성
var newParagraph = document.createElement("p");
var paragraphText = document.createTextNode("안녕하세요, DOM!");
newParagraph.appendChild(paragraphText);

// <body> 태그 안에 새로운 <p> 요소 추가
document.body.appendChild(newParagraph);

[요소 스타일 변경]

// 특정 요소 선택
var myElement = document.getElementById("myElement");
// 요소의 스타일 변경
myElement.style.color = "red";

[이벤트 리스너 추가]

var button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("버튼이 클릭되었습니다!");
});

저작자표시 비영리 변경금지

'🖌️Web > JavaScript' 카테고리의 다른 글

[JavaScript] 자바스크립트 - 화살표 함수(Arrow Function) (0)	2024.04.23
[JavaScript] 자바스크립트 - 모듈 (0)	2024.04.21
[JavaScript] 자바스크립트 - 구조 분해 할당(Destructuring Assignment) (0)	2024.04.21
[JavaScript] 자바스크립트 - 클래스와 인스턴스 그리고 필드 (0)	2024.04.15
[JavaScript] 자바스크립트 - Set과 Map 그리고 배열과 객체와의 차이점 (0)	2024.04.15

'🖌️Web/JavaScript' Related Articles