자바스크립트로 HTML에 태그에 접근하기 위해서는 DOM이라는 개념을 알아야 한다. 단순히 접근방법에 알기위해서는 맨 밑으로 내려가시면 됩니다.
DOM 이란?
DOM이란 HTML의 태그들(<tag>)을 웹 브라우저의 메모리에 올려서 자바스크립트로 사용하기 위해 만들어진 웹문서 이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다.
DOM을 풀어 쓰자면 Documnet Object Model의 약자이다.
Documnet = 문서
Object = 객체
Model = 모델
즉 문서 객체 모델이라는 뜻이다. 여기서 이 단어를 쪼개서 보자면
여기서 문서 객체란 <html> 이나 <body>같은 html 문서의 태그들을 javaScript가 이용할 수 있는 객체(object)로 만드면 그것을 문서 객체라고 한다.
여기에 Model을 붙였는데 Model은 모형,주형,모듈 이라는 의마기 있는데 여기서는 인식하는 방식이라고 해석할 수있다.
즉 DOM은 웹 라우저가 html 페이지를 인식하는 방식 / 문서객체와 관련 된 객체의 집합에 관한 이야기다.
우리가 자바스크립트를 통해 html에 접근하려면 html의 태그들이 이렇게 객체가 되어야 한다. 그래야 자바스크립트를 통해 각 객체에 접근을 할 수 있기 때문이다. 이 객체를 DOM 에서는 노드(Node)라고 한다.
head, body, title, script,h1 등의 태그 뿐 아니라 태그 안의 텍스트 속성등도 모두 node에 속한다. 우리는 이 노드에 대해 접근해 노드를 변경하거나 수정 또는 생성들을 할 수있다.
javascript로 문서객체를 생성하는데 있어서 두가지 방법이 있다.
정적 문서 객체 생성 : 웹 브라우저가 html 페이지에 적혀 있는 태그를 읽으면 생성(단순히 적혀져 있는 그대로 문서 객체가 생성되는 것을 표현)
동적 문서객체 생성 : 기존의 html 페이지에 없던 문서객체를 javaScript를 이용해서 생성 한다.
(디테일 한 예는 아래의 참조를 확인)
DOM과 HTML의 차이점
DOM은 HTML 문서로부터 생성이 되지만 항상 동일하지 않다.
-
HTML : 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어 있다. (최초에 화면을 그릴때 사용하는 설계도)
-
DOM : 원본 HTML문서의 객체 기반 표현 방식으로서 HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있다. (설계도를 이용하여 실제로 화면에 나타내지는 인터페이스)
DOM 접근 메서드(html 접근)
html 요소들을 이용하기 위해서는 메서드를 통해 특정 태그에 접근해야 한다.
| 메서드 | 설명 |
| document.getElementById("id명") | 해당 id명을 가진 요소 하나를 반환 |
| document.querySelector("선택자") | 해당 선택자를 만족하는 요소 하나를 반환 |
| document.getElementsByClassName("class명")[순서] | 해당 class명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소 반환 |
| document.getElementsByTagName("태그명")[순서] | 해당 태그명을 가진 요소들을 배열에 담아 인덱스에 맞는 요소 반환 |
| document.querySelectorAll("선택자명")[순서] | 해당 선택자를 만족하는 모든 요소들을 배열에 담아 인덱스에 맞는 요소 반환 |
예시)
HTML 예시
<div>
<button id="idname" class="classname">버튼</button>
</div>
JAVA Script
const button;
button = document.getElementById("idname");
button = document.querySelector("#idname");
button = document.getElementsByClassName("classname")[0];// 선택된 요소중 첫번째 요소 => 인덱스 0
button = document.getElementsByTagName("button")[0];
button = document.querySelectorAll(".classname")[0];
const button = document.getElementsByClassName("div")[0] .getElementsByClassName("button")[0];
출처: https://webcoding.tistory.com/entry/JavaScript-자바스크립트로-DOM-접근하기 [심플한 IT, 프로그래밍 블로그]참조
[JavaScript] 자바스크립트로 DOM 접근하기
DOM이란? DOM은 HTML의 태그(요소)들을 웹 브라우저의 메모리에 올려서 자바스크립트로 사용하기 위해 만들어진 웹 문서입니다. 웹브라우저에서 HTML 파일을 받아 DOM으로 만들면 자바스크립트를 ��
webcoding.tistory.com
m.blog.naver.com/magnking/220972680805
[JavaScript] DOM이란 무엇인가?
JavaScript를 공부하다보면 브라우저 기반의 여러 객체들에 대해서 듣게 됩니다. 처음부터 이 객체들이 ...
blog.naver.com
velog.io/@surim014/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
'Base > WEB' 카테고리의 다른 글
| [WEB] D3.js Event, Aninmation 사용법 - 3 (0) | 2020.09.14 |
|---|---|
| [WEB] D3.js 에서 Data 사용법 - 2 (0) | 2020.09.14 |
| [WEB] D3.js 기본 개념 및 사용법 - 1 (0) | 2020.09.14 |
| [WEB] HTML 기본 개념(html,css,script) (0) | 2020.09.13 |
| [WEB] window 환경에서 NGINX 설치 및 포트 수정 (0) | 2020.09.11 |
