✔ 자바스크립트의 DOM 에 대해 정리합니다. JavaScript
👍 여기서는 DOM 정의, 문서 객체의 생성, 문서 객체 제어, 스타일링 하는 방법을 정리한다.
| DOM (Document Object Model) |
:) 웹 페이지에 대한 인터페이스이다. 기본적으로 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고
조작할 수 있도록 API를 제공한다.
1. DOM 은 정확히 무엇을 말하나?
브라우저의 랜더링 엔진은 텍스트 파일로 생성된 웹 문서를 브라우저 화면에 보이도록 하기 위해서
이 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 올리는데 이를 DOM이라 한다.
쉽게 말해서 브라우저의 랜더링 엔진이 브라우저가 이해할 수 있도록 텍스트와 같은 형식의 파일들을
읽고 분석해서 브라우저가 이해할 수 있도록 하는 것을 DOM 이라 한다.
좁은 의미로는 document 객체의 집합을 의미한다.
2. DOM tree
DOM tree 는 브라우저가 HTML 문서를 로드 한 후에 파싱하여 생성하는 모델을 의미한다.
아래의 그림처럼 모든 요소와 요소의 어트리뷰트(속성), 텍스트를 각각의 객체로 만들고 이들
객체는 상하 관계의 구조로 구성된다.
DOM 에서 모든 요소, 어트리뷰트(속성), 텍스트는 하나의 객체이며 Document 객체의 자식이다.
[DOM tree 는 네 종류의 노드로 구성]
(Node 에 대해서)
: tree 구조에서 최상위 객체를 포함한 모든 각각의 객체를 Node 라고 한다.
1) 문서 노드 (Document Node)
: 트리의 최상위에 존재하며 이 문서 노드를 통해 각각의 요소 노드, 어트리뷰트 노드,
텍스트 노드에 접근할 수 있다.
2) 요소 노드 (Element Node)
: 모든 HTML 요소를 말한다. 이 요소 노드는 상하 관계를 가지며 이 상하 관계를 통해
정보를 구조화 한다. 어트리뷰트 노드와 텍스트 노드에 접근하려면 요소노드를 통해
접근할 수 있다.
3) 어트리뷰트 노드 (Attribute Node)
: HTML 요소의 속성들을 표현한다. 이 어트리뷰트 노드는 지정된 요소의 자식이 아닌
해당 요소의 일부로 표현된다. 어트리뷰트를 추가하거나 수정하려면 해당 요소 노드를
찾아 접근하면 된다.
4) 텍스트 노드 (Text Node)
: HTML 요소의 텍스트를 표현한다. 이 노드는 요소 노드의 자식이며 자신의 자식 노드를 가질 수 없다.
다시 말해서, 텍스트 노드는 DOM tree의 가장 끝부분에 해당하는 노드이다.
3. DOM 사용하기
DOM 을 통해 요소를 추가, 수정, 삭제 등의 조작을 하기 위해서는 다음과 같이 한다.
- 조작하고자 하는 요소를 선택한다.
- 선택된 요소의 콘텐츠 또는 어트리뷰트를 조작한다.
3.1 문서 객체 (요소) 생성하기
문서 객체를 자바스크립트를 통해 생성할 수 있다.
HTML로 요소를 생성하는 것을 정적으로 생성한다고 하고
자바스크립트를 통해 요소를 생성하는 것을 동적으로 생성한다고 한다.
동적으로 생성하기 위해서는 document.createElement () 를 사용한다.
3.1.1) 요소 생성하기
- document.createElement (생성할요소)
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
window.onload = function() {
const createDiv = document.createElement('div');
}
</script>
</head>
<body>
</body>
</html>
|
(결과)
: 생성할 요소를 인자로 넣으면 요소가 일단 생성될 준비가 되었다. 하지만
웹문서를 열어보면 아무것도 출력되지 않는다. 왜냐면 생성할 요소를
정의만 했지, 아직 body 요소에 연결하지 않아서다.
요소를 Body 태그에 연결하고 내용을 넣어보자!
(결과)
body 태그와 연결하기 위해서는 document.body.appendChild(생성할 요소); 처럼
작성한다. 만약 다른 요소에 연결하고 싶으면 document.body 자리에
연결하고 싶은 요소를 넣어준다.
정리하자면, 부모요소.appendChild(자식요소) 의 형태로 작성해주면 된다.
생성한 요소에 내용을 넣으려면 .textContent / .innerText / .innerHTML 중
하나를 사용하고 값으로 문자열 형태로 내용을 넣어주면 된다.
.textContent / .innerText
: 텍스트를 요소에 추가해준다.
.innerHTML
: HTML 형태를 요소에 추가해준다. HTML 태그를 추가할 때 사용된다.
(결과)
3.2 문서 객체 (요소 ) 조작하기
문서 객체(요소) 를 조작하기 위해서는 우선 문서 객체를 선택해야한다. 문서 객체를
선택하는 방법은 여러가지가 있지만 여기서는 document.querySelector 를 통해 문서
객체를 선택하는 방법을 정리하겠다.
- document.querySelector(선택자)
: 선택자로 가장 처음 선택되는 문서 객체를 가져옴
- document.querySelectorAll(선택자)
: 선택자를 통해 선택되는 문서 객체를 배열로 가져옴
3.2.1) 요소 선택하기 - document.querySelector()
: 요소를 선택하기 위해서는 body 태그에 선택할 요소가 존재해야한다. 선택할 요소를
document.querySelector(선택자) 와 같이 작성해준다.
|
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function() {
let header1 = document.querySelector('#header-1');
let header2 = document.querySelector('#header-2');
}
</script>
</head>
<body>
<!-- body태그 구성-->
<h1 id="header-1">Header</h1>
<h1 id="header-2">Header</h1>
</body>
</html>
|
document.querySelector() 여기 인자로 tag name, id, class 의 형태로 작성해준다.
그러면 인자에 해당하는 요소를 body 태그안에서 탐색하게 된다.
탐색된 요소를 사용하려면 변수에 할당한다.
3.2.2) 요소 선택하기 - document.querySelector()
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function() {
const li = document.querySelectorAll('ul li');
for (let i = 0; i < li.length; i++) {
li[i].innerText = `메뉴 ${i + 1}`;
}
};
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
|
여러 요소를 선택할 때 document.querySelector() 사용한다. document.querySelector()는
선택된 요소를 배열의 형태로 반환해준다. 따라서 위와 같이 반복문을 돌려서 텍스트를
넣을 수 있다.
3.2.3) 선택 요소에 스타일링
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload = function () {
const h1 = document.querySelector('h1');
const ul = document.querySelector('ul');
const li = document.querySelectorAll('ul li');
h1.style.color = 'green';
ul.style.width = '400px';
ul.style.margin = '0 auto';
for (let i = 0; i < li.length; i++) {
li[i].innerText = `메뉴 ${i + 1}`;
li[i].style.display = 'inline-block';
li[i].style.padding = '8px';
li[i].style.padding = '8px';
li[i].style.color = '#fff';
li[i].style.background = '#000';
}
};
</script>
</head>
<body>
<h1>메뉴</h1>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
|
(결과)
지금까지 DOM 을 다루는 방법에 대해 정리해보았다.
자바스크립트로 동적으로 요소를 생성해서 텍스트를
넣어보고 스타일링도 했다.
근데 되도록이면 요소는 HTML 안에, 스타일링은
style 안에 작성하는 것이 좋다고 한다.
위와 같이 DOM 을 다루는 것은 동적으로 content 를
바꾸거나, 이벤트를 처리할 때 사용된다고 한다.
'Frontend study > JavaScript' 카테고리의 다른 글
| deep JavaScript - 1. 변수와 스코프 (0) | 2022.02.28 |
|---|---|
| JavaScript - 10. Event (0) | 2022.02.27 |
| JavaScript - 8. 객체 (0) | 2022.02.27 |
| JavaScript - 7. 함수 (0) | 2022.02.27 |
| JavaScript - 6. 배열 (0) | 2022.02.27 |
