DOM 이란?
HTML을 이용한 화면에 UI표현하기
브라우저에서 UI를 볼 수 있는 것은 HTML을 분석해서 보여줄 수 있다.
HTML은 요소(Element)들로 구성되어 있습니다.
돔 이란? (Document Object Model)
돔(문서 객체 모델)은 메모리 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해준다. 또한 웹 페이지를 이루는 요소들을 Javascript가 이용할 수 있게 브라우저가 트리구조로 만든 객체 모델을 의미한다.
돔 조작
DOM 트리를 DOM에서 제공해주는 API를 이용해서 조작할 수 있습니다.
API를 이용해서 DOM 구조에 접근하거나 원하는 요소(Element)를 수정하거나 없앨 수 있습니다.
var button = document.querySelector('.button); // DOM 안에 클래스가 button이라는 이름을 가진 요소에 접근
button.onclick = function () {
this.style.backgroundColor = "red";
// DOM 안에 있는 요소의 스타일을 직접 변경(DOM 조작)
}Document Object 이용해 보기
let val;
val = document;
val = document.baseURI; // 웹 페이지의 절대 URI를 반환
val = document.head; // <head> 태그 반환
val = document.body; // <body> 태그 반환
val = document.forms; // <form> 태그 반환
val = document.forms[0].id;
val = document.forms[0].classList;
val = document.forms[0].className;
val = document.scripts; // <script> 태그 반환
const headerContainer = document.getElementById("header-container");
headerContainer.textContent = "Text Content"; // DOM 내부에 Text Content 작성
headerContainer.innerText = "Text Content"; // DOM 내부에 Text Content 작성
headerContainer.innerHTML = "<span>Text Content</span>"; // DOM 내부에 span태그 생성 및 Text Content 작성
console.log(headerContainer);
console.log(val);
// 이것들 말고도 너무나도 많은게 있다.. 필요할 때 찾아보기로 하자..!중요! 컴퓨터는 위에서부터 순차적으로 로드되고 실행 되기에 HTML에서 script 태그를 밑에 적어 주어야 DOM에 접근할 수 있음
위에 script 태그를 적고 DOM에 접근하려 하면 에러가 날것임!
DOM 탐색하기
DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있다.
하지만 무언가를 하기 전엔, 당연히 조작하고자 하는 DOM 객체에 접근하는 것이 선행 되어야 한다.
DOM에 수행하는 모든 연산은 Document 객체에서 시작한다.
Document 객체는 DOM에 접근하기 위한 '진입점'이다.
진입점을 통과하면 어떤 노드에도 접근할 수 있습니다.
let val;
const list = document.querySelector("ul.list-group");
// ul태그중 list-group 클래스를 가진 DOM에 접근
const listItem = document.querySelector("li.list-group-item:first-child");
// li태그 중 list-group-item클래스를 가진 첫 번째 DOM에 접근
console.log("list", list);
console.log("listItem", listItme);
val = list.childNodes; // NodeList 반환, line break도 포함
val = list.childNodes[0]; // line break만 반환
val = list.childNodes[0].nodeName; // text
val = list.childNodes[3].nodeType;
// NodeType 1 - Element, 2 - Attribute (deprecated)예전에 사용 했지만 더이상 사용 X,
// 3 - Text node, 8 - Comment(주석), 9 - Document itself
// 10 - Doctype
// children element nodes 반환
val = list.children; // HTML Collection 반환 (line break X)
val = list.children[1];
list.children[1].textContent = "Hi";
// First Child
val = list.firstChild;
// list.firstChild === list.childNodes[0]
val = list.firstElementChild;
// Last child
val = list.lastChild;
// list.lastChild === list.childNodes[list.childNodes.length - 1];
val = list.lastElementChild;
// child 요소 count
val = list.childElementCount;
// parent node 반환
val = listItem.parentNode;
val = listItem.parentElement;
val = listItem.parentElement.parentElement;
console.log("val", val);
// 이것도 너무나도 많은 것들이 있다.. 필요할 때 다시 찾아보자!
FE