DOM 이란?
문서 객체 모델 (The Document Object Model, DOM)은 HTML, XML 문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일 내용 들을 변경할 수 있게 돕는다.
DOM은 구조화된 nodes와 property와 method를 갖고 있는 object로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
웹페이지는 일종의 문서다 이 문서는 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM은 동일한 문서를 표현하고 저장하고, 조작하는 방법을 제공한다 DOM은 웹페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다.
DOM 과 자바스크립트
DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 해드, 문서안의 table, table header, table cell 안의 text는 문서를 위한 document object model의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.
초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어있었지만, 나중에는 각각 분리되어 발전해왔다. 페이지 콘텐츠는 DOM에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다.
DOM은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API를 통해 이용가능하다.
DOM에 어떻게 접근할 수 있는가?
DOM을 사용하기 위해 특별히 해야 할 일은 없다. 각각의 브라우저는 자신만의 방법을 DOM을 구현하였으며, 이로 인해 실제 DOM 기준을 따르는지 확인해야 하는 번거로움이 발생했다. 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM 을 항상 사용한다.
스크립트를 작성할 때(인라인 <script> 요소를 사용하거나 웹페이지 안에 있는 스크립트 로딩 명령을 사용하여), 문서 자체를 조작하거나 문서의 children 을 얻기 위해 document 또는 window elements를 위한 API를 즉시 사용할 수 있다. DOM 프로그래밍은 아래처럼 window object로 부터 alert() 함수를 사용하여 alert message를 표시하는 매우 간단한 것일 수도 있고 콘텐츠를 작성하는 복잡한 DOM이 될 수도 있다.
<body onload="window.alert('welcome to my home page!');"></body>DOM의 핵심 Interfaces
DOM에서 가장 많이 사용되는 interfaces를 정리해보자. document와 window object는 DOM 프로그래밍에서 가장 자주 사용하는 obejct이다. 간단하게 설명하자면 window object는 브라우저와 같다고 할 수 있으며, document object는 root document 자체라고 할 수 있다. generic Node interface 로부터 상속받은 Element와 Node, Element interfaces 가 협력하여 각각의 elements에서 사용할 수 있는 수많은 메소드와 프로퍼티를 제공한다.
웹페이지, XML 페이지 스크립팅에서 DOM을 사용하는 공통적인 API 몇개를 살펴보자.
Document.createElement()
HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. tagName을 인식할 수 없으면 HTMLUnknownElement를 대신 반환합니다.
- 구문
let element = document.createElement(tagName[, options]);- 매개변수
- tagName : 생성할 요소의 유형을 가리키는 문자열
- options Optional : is 속성 하나를 가진 ElementCreationOptions 객체. 속성의 값은 customElements.define()을 사용해 정의한 사용자 정의 요소입니다.
- 반환 값
- 새로운 Element
예제
새로운 <div> 엘리먼트를 생성한 후, ID 가 "div1"인 요소를 이전에 추가해 봅시다.
- HTML
<!DOCTYPE html>
<html>
<head>
<title>Working with elements</title>
</head>
<body>
<div id="div1">위의 테스트는 동적으로 추가했습니다.</div>
</body>
</html>- Javscript
document.body.onload = addElement;
function addElement() {
// 새 div 요소 만들기
var newDiv = document.createElement("div");
// 내용물 추가하기
var newContent = document.createTextNode("환영합니다!");
// 새로 생성된 div에 텍스트 노드 추가
newDiv.appendChild(newContent);
// 새로 생성된 요소와 해당 콘텐츠를 DOM에 추가
var currentDiv = document.getElementById("div1");
document.body.insertBefore(newDiv, currentDiv);
}Document.quertSelector()
Document.querySelector()는 제공한 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null를 반환합니다.
매개변수
- selector : 하나 이상의 선택자를 포함한 DOMString, 유효한 CSS 선택자여만 하며 STNTAX_ERR 예외가 발생합니다.
반환값
제공한 CSS 선택자를 만족하는 첫 번재 Element 객체, 결과가 없다면 null 선택자를 만족하는 모든 요소의 목록이 필요하다면 querySelectorAll()을 사용하자.
참고
만약 selector가 ID 선택자인데, 해당 ID를 잘못 사용하여 문서 내에 여러 번 사용했으면 첫 번째로 그 ID를 사용한 요소를 반환합니다.
- 특수문자 이스케이프
- CSS 구문을 따르지 않는, 예컨대 콜론이나 공백을 포함한 선택자나 ID를 사용해야 하면 반드시 백슬래시("")를 사용해 해당 문자를 이스케이프해야 합니다. 백슬래시는 JavaScript의 이스케이프 문자이기 때문에, 백슬래시를 문자로 입력하려면 반드시 두 번 이스케이프해야 합니다. 한 번은 JavaScript 문자열에 필요하고, 또 다른 한 번은 querySelector()에 필요합니다.
<div id="foo\bar"></div> <div id="foo:bar"></div> <script> console.log("#foo\bar"); // "#fooar" ('\b'는 백스페이스 컨트롤 문자) document.querySelector("#foo\bar"); // 일치하는 요소 없음 console.log("#foo\\bar"); // "#foo\bar" console.log("#foo\\\\bar"); // "#foo\\bar" document.querySelector("#foo\\bar"); // 첫 번째 <div> document.querySelector("#foo:bar"); // 일치하는 요소 없음 document.querySelector("#foo\\:bar"); // 두 번째 <div> </script>
예제
- 문서에서
myclass라는 클래스를 사용하는 첫 번째 요소를 반환합니다.
var el = document.querySelector(".myclass");- 클래스가
user-panel main인<div>안의, 이름이login인<input>중 첫번째 요소를 반환합니다.
var el = document.querySelector("div.user-panel.main input[name=login]");Element.setAttribute()
지정된 요소의 속성 값을 설정합니다. 속성이 이미 있는 경우 값이 업데이트 됩니다. 그렇지 않으면 지정된 이름과 값으로 새속성이 추가됩니다.
속성의 현재 값을 얻으려면 getAttribute(), 속성을 제거하려면 removeAttribute()를 호출하세요
문법
Element.setAttribute(name, value);매개변수
- name : DOMString값을 설정할 속성의 이름을 지정합니다.
setAttribute()속성 이름은 HTML 문서의 HTML 요소에서 호출 될 때 자동으로 모두 소문자로 변환됩니다. - value : DOMString 속성에 할당할 값을 포함합니다. 지정된 비 문자열 값은 자동으로 문자열로 변환됩니다.
- 반환값 : undefined
예시
const KBS = document.createElement("div");
console.log(KBS); // <div></div>
KBS.setAttribute("id", "myId");
console.log(KBS); // <div id="myId"></div>remove() 와 removeChild()
remove()
요소를 삭제 , 자식 요소를 참조한다.
function removelFunction() {
var btnEl = document.getElementById("btnId");
btnEl.remove();
}removeChild
부모에게서 자식 객체를 떼어낸다. 떼어낸 자식 객체는 변수에 담을 수 있다. 메모리에 해당 노드는 그대로 존재하며, 부모 노드와 자식 노드의 부모-자식 관계를 끊어 DOM트리에서 해제하는 것입니다.
반환값을 변수에 저장하지 않으면 삭제하는 노드는 참조가 더이상 없기 때문에 GC에 의해 잠시 후 메모리에서 삭제됩니다.
function remove2Function() {
var btnEl = document.getElementById("btnId");
btnEl.removeChild(btnEl.childNodes[0]);
}MDN (DOM) : https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
'Pre Onboarding' 카테고리의 다른 글
| [RTK Query] 캐싱 (0) | 2022.03.03 |
|---|---|
| RTK Query 엔드포인트 url 변수로 변경하기 및 데이터 조작하기 (0) | 2022.02.28 |
| [PreOboadring] CANVAS (0) | 2022.02.24 |
| [PreOnboarding] 번들링과 웹팩 (0) | 2022.02.23 |
| [PreOnboarding] RTK Query를 사용해보자 (0) | 2022.02.23 |
댓글