🍁DOM
JavaScript
- Core
Core는 언어 기본 기능이다.
- BOM
BOM은 태그를 일부 태그만을 조작한다.
DOM에 비해서 기능이 부족한 편이다.
트리 구조를 지원하지만, 고정(정적) 방식이다.
- DOM
DOM은 모든 태그를 조작할 수 있다.
기능이 풍부한 편이다.
트리 구조를 문서 내용 기반으로 지원한다.
[JavaScript] BOM과 DOM: HTML 계층 구조
🍁BOM과 DOM CSS는 태그를 조작할 때 선택자(HTML 태그 검색)로 접근을 하고 나서 조작했다. 마찬가지로 JavaScript에서도 HTML 태그를 검색하여 접근한 뒤에 조작한다. 이는 HTML 계층 구조를 활용하여 Ja
isaac-christian.tistory.com
이번 시간에는 DOM에 대해 알아보도록 하자.
DOM이란?
JavaScript DOM, Java DOM, C# DOM 등등 언어마다 DOM이 존재한다.
이처럼 DOM은 어떤 사용법을 모아 놓은 규격(Interface)이다.
JavaScript DOM이라고 하면 규칙을 자바스크립트에서 실제로 구현한 기능이라고 보면 된다.
DOM은 식별자로 name, id, class를 인식할 수 있어 태그를 찾을 수 있는 범위가 넓다.
BOM 기능에서 확장된 기능을 제공하므로, BOM이 할 수 있는 기능을 DOM에서도 할 수 있다.
CSS 조작은 BOM에서는 할 수 없으며, DOM에서만 할 수 있다.
현재는 DOM Level 3(DOM Level 1 > DOM Level 2 > DOM Level 3)까지 나왔지만, 버전을 따지면서 사용하는 기능은 아니다.
🍁DOM에서 제공하는 태그 검색 도구 (함수)
- 1. id 검색
- 2. class 검색
- 3. name 검색
- 4. 태그명 검색
- 5. CSS 선택자 검색
document.getElementById('id'); //id 검색
document.getElementsByClassName('class'); //class 검색
document.getElementsByName('name'); //name 검색
document.getElementsByTagName('tag'); //태그명 검색
document.querySelector('CSS selector'); //CSS 선택자 검색 (단수 반환)
document.querySelectorALL('CSS selector'); //CSS 선택자 검색 (복수 반환)CSS 선택자 검색 기능은 2014년에 ES6에서 생긴 기능이다.
DOM은 BOM과 한 몸이기 때문에 document로부터 확장해서 구축할 수 있게 만들어져 있다. 따라서 DOM을 사용할 때에는 DOM과 BOM을 분리시킬 수 없고, 100% BOM으로부터 시작된다.
BOM과 다르게 DOM에서 어떻게 태그를 검색할 수 있는지 알아보자!
기본 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input { display: block; margin-bottom: 5px; }
</style>
</head>
<body>
<h1>DOM</h1>
<form name="form1">
<h2 id="title">Control</h2>
<div>
<input type="text" name="txt1" id="txt1" class="txts">
<input type="text" name="txt2" id="txt2" class="txts">
<input type="text" name="txt3" id="txt3" class="txts">
<input type="button" value="버튼" name="btn1">
</div>
</form>
</body>
</html>
id 검색
//id 검색
//BOM
document.form1.txt1.value = 'BOM';
//DOM
document.getElementById('txt1').value = 'DOM';
alert(document.form1.txt1 === document.getElementById('txt1'));
태그를 검색할 때 BOM으로 찾던, DOM으로 찾던 검색된 결과(결과 객체(태그))는 동일한 객체이다.
이는 찾는 방식이 다르다고 해서 검색 결과 객체는 다르지 않다는 말이다.
진성 비교 연산자로 자료형까지 같은지를 물어보면 true를 반환하는 것으로 확인할 수 있다.
이처럼 id로 검색하게 되면 계층구조를 생각할 필요 없이 바로 검색할 수 있기 때문에 편리하다.
BOM은 name 태그를 붙일 수 있는 경우에만 접근이 가능해서 h2 태그는 접근할 수 없었는데, DOM은 id에서 검색이 되기 때문에 h2 태그에도 접근할 수 있다.
BOM에서 굳이 h2 태그를 접근할 수 있는 방법을 만들지 않았던 이유는 제목 태그는 텍스트이기 때문에 클릭 이벤트를 걸 수 없고, 마우스 이벤트만을 걸 수 있는데, 제목에 마우스 일반적으로 이벤트를 걸 일이 없기 때문이다.
검색할 수 있는 범위가 늘어나긴 했지만, 찾아서 할 일이 없기 때문에 할 수 있는 일이 광범위하게 늘어난 것은 아니다.
class 검색
//class 검색
var txts = document.getElementsByClassName('txts');
for (var i=0; i<txts.length; i++) {
txts[i].value = i;
}
class 식별자로 검색을 하면 배열을 반환한다.
name 검색
document.getElementsByName('txt1')[0].value = 'DOM';
name은 유일한 값도 넣을 수 있고, 여러 개의 값도 넣을 수 있으므로 class 식별자로 검색했을 때와 같이 배열을 반환한다.
배열에는 value라는 속성이 없기 때문에 [0]과 같이 하나를 꼭 꺼내야만 한다. 그러나 이렇게 찾을 바에는 id로 검색하는 게 더 낫기 때문에 DOM에서는 name 검색을 거의 하지 않는다.
또한 name으로는 제목 태그를 찾을 수도 없다. 이는 호환성을 위해 만든 기능이라고 생각하면 된다.
태그명 검색
var list = document.getElementsByTagName('input');
for (var i=0; i<list.length; i++) {
//alert(list[i]);
list[i].value = list[i].name;
}
각 name의 속성을 출력하며, name이 없으면 null이 출력된다.
CSS 선택자 검색
document.querySelector('#txt1').value = 100;
document.querySelector('h1').align = 'center';
document.querySelector('input:nth-child(3)').value = 300;
alert(document.querySelectorAll('.txts').length);
jquery가 css 선택자를 자연스럽게 사용할 수 있기 때문에 인기를 끌었다. 원래 다른 라이브러리에서 제공하던 기능이었는데, 사람들이 많이 사용하자 ES6때 추가되었다.
id와 class로 검색하는 메서드가 20년 넘게 써왔기 때문에 아직까지도 압도적으로 많이 쓰이고 있으며, 그다음으로는 CSS selector로 검색하는 방법을 많이 사용한다.
