문서 객체 모델 DOM
(Document Object Model)
DOM 은 현재 웹페이지의 문서 모델을 의미.
- 사용자가 웹페이지를 통해 보게 되는 콘텐츠에 접근하거나 변경할 수 있을 뿐 아니라, 사용자의 동작에 반응할 수도 있게된다.
- DOM의 최상위 객체인 document 객체는 HTML 전체 페이지를 표현한다.
DOM 요소 선택과 조회
document 프로퍼티
DOM의 최상위 객체인 document 객체는 DOM을 정의하는 프로퍼티를 가지고 있다.
예를 들어 google.com의 document 객체는 아래와 같은 프로퍼티를 가지고 있습니다.
//ex) google.com document.title // "Google" document.domain // 현재 문서의 도메인 document.URL // "http://www.google.com/#q=yed" document.lastModified // "2014-09-04 15:33:37"
DOM 요소 접근 및 선택
get 메서드
// id가 "content"인 요소를 찾는다.
let content = document.getElementById("content");
// class가 "tag"인 모든 요소를 NodeList 객체로 묶어서 리턴한다.
const tags = document.getElementsByClassName("tag");
// 태그이름을 가지는 요소들을 모두 선택한다.
const lists = document.getElementsByTagName("li");사용 예제
// DOM Query를 Caching하여 사용하기 (참조저장)
let el = document.getElementById("foo");
el.className = "bar";
// Nodelist 객체에서 요소 선택하기
let elements = document.getElementsByClassName("tag");
if (elements.length >= 1) {
let firstItem = elements[0];
}DOM 요소 Query
// CSS 선택자를 이용하여, 일치하는 요소들의 첫번째 요소를 리턴한다.
const TagList = document.querySelector("li.tag");
// CSS 선택자와 일치하는 요소의 NodeList를 리턴한다.
const callouts = document.querySelectorAll('.callout');노드 탐색 Traversing
let content = document.getElementById("content");Property
content.parentNode : 현재 요소노드의 부모 노드
content.previousSibling : 이전 형제 요소
content.nextSibling : 다음 형제 요소
content.firstChild : 현재 요소의 첫번째 자식 노드
content.lastChild : 현재 요소의 마지막 자식 노드
DOM 요소 조작
DOM에 텍스트 및 마크업 요소를 추가하거나 제거하는 방법을 확인해 볼 수 있다.
요소 조회
선택한 요소의 컨텐츠를 조회할 수 있는 두가지 프로퍼티가 있다.
textContent : 선택한 요소에서 HTML 요소를 제거한 순수한 텍스트 데이터의 값
innerHTML : 선택한 요소의 HTML 태그를 그대로 제공. 따라서 보안에 취약하다. 사용자로부터 전달받은 콘텐츠를 추가할때는 사용하지 않는 것이 좋다.
const content = document.getElementsByTagName('p')[0];
/* 조회 */
content.textContent; // Simple HTML Text
content.innerHTML; // Simple <b>HTML</b> Text요소 수정
선택한 요소의 내용을 수정할 때는 textContent 및 innerHTML 값에 새로운 값을 대입한다.
/* 수정 */
content.textContent = "Modified HTML file";
content.innerHTML = "Modified <i>HTML</i> file";새 요소 만들기
document.creatElement() 메서드를 이용해 새로운 요소를 만들 수 있다. 이렇게 만들어진 요소는 DOM에 추가하는 메서드를 사용해 추가하기 전까지는 DOM에 추가되지 않고 메모리에만 존재한다.
document.createElement() : 노드 생성
// 노드 생성
const p1 = document.createElement('p');
const p2 = document.createElement('p');textContent : 노드에 새로운 컨텐츠를 대입
// 노드에 새로운 컨텐츠를 대입
p1.textContent = "foo";
p2.textContent = "bar";만들어진 요소를 DOM에 추가하기
javascript를 이용해 만들어진 요소는 insertBefore() / appendChild() 메서드를 이용해 DOM에 추가할 수 있습니다.
appendChild() : 요소를 부모 요소의 자식 요소로 추가한다다.
/* appendChild() */
// 요소를 부모 요소의 자식 요소로 추가합니다.
// 이미 요소가 존재할 경우 마지막 자식요소로 추가됩니다.
parent.appendChild(element);insertBefore() : 부모 요소의 자식 요소로 선택한 요소를 삽입한다. 이때 삽입할 위치를 선택할 수 있다.
/* insertBefore() */
// 부모 요소의 자식 요소로 선택한 요소를 삽입합니다. 이때 삽입할 위치를 선택할 수 있습니다.
// el - 삽입할 요소
// position - 삽입할 위치
parent.insertBefore(el, position)예시
// 요소를 추가할 부모 요소
const content = document.getElementById("content");
// 요소 추가
content.appendChild(p2);
// 부모 요소의 첫 번째 자식 선택
const firstChild = content.childNodes[0];
// p1 자식 요소를 두번째 매개변수로 선택한 자식요소의 앞에 삽입합니다.
content.insertBefore(p1, firstChild);또한 document.createTextNode() 메서드는 새로운 텍스트 노드를 생성합니다.
createTextNode() : 새로운 텍스트 노드를 생성
/* createTextNode() */
// 새로운 텍스트 노드를 생성합니다.
document.createTextNode("text");예시
// ul 태그 아래에 새로운 li 요소를 생성하는 과정
let myText = document.createTextNode("앨리스");
let newLIEl = document.createElement("li");
newLIEl.appendChild(myText);
let ulPos = document.getElementsByTagName("ul")[0];
ulPos.appendChild(newLIEl);요소 삭제하기
DOM에서 요소를 제거하기 위해서는 removeChild() 메서드를 이용한다.
removeChild() : 요소를 제거
/* removeChild */
// target 요소를 parent에서 삭제한다.
parent.removeChild(target);예시
// ul 태그 아래에 존재하는 두번째 li 요소를 삭제하는 과정
let itemToRemove = document.getElementsByTagName("li")[1];
let ulContainer = document.getElementsByTagName("ul")[0];
ulContainer.removeChild(itemToRemove);DOM 속성 조작
DOM에 요소의 속성
class,attribute등을 추가하거나 제거하는 방법을 확인해 볼 것이다. 요소의 속성을 조작함으로써 문서의 콘텐츠 및 디자인을 동적으로 변경할 수 있다. 더불어HTML5에 추가된 data 속성의 조작에 대해서도 알아볼 것이다.
요소 스타일링
요소의 스타일을 바꾸고 싶다면 우선 CSS 클래스를 만들고, 만들어진 클래스를 스타일을 적용하고자 하는 요소에 지정하는 방식으로 사용한다.
lement.classList : 요소의 클래스를 나열
lement.classList.add("className") : 클래스 추가
lement.classList.remove("className") : 클래스 제거
lement.classList.item( Number ) : 콜렉션의 인덱스를 이용하여 클래스 값을 반환
iv.classList.toggle("visible"); : 클래스 값 토글
속성 조작하기
getAttribute() : 어트리뷰트 값을 가져온다.
hasAttribute() : 어트리뷰트 값을 가지고 있는지 검사한다.
setAttribute() : 어트리뷰트에 값을 대입한다.
removeAttribute() : 어트리뷰트를 제거한다.
className : 클래스값을 가져오거나 변경한다.
id : 아이디값을 가져오거나 변경한다.
let foo = document.getElementById("foo");
// 요소가 class 어트리뷰트를 가지고 있는지 검사한 후, 어트리뷰트 값을 가져온다.
if (foo.hasAttribute("class")) {
let attr = foo.getAttribute("class");
}
// class 값을 변경한다. 존재하지 않으면 생성한다.
foo.className = "bar";
foo.setAttribute("class", "baz");
// class 속성을 제거한다
foo.removeAttribute("class");data 속성
data 속성은HTML5에 추가된 속성이다.data 속성을 이용하면HTML 요소에 임의의 데이터를 간단하게 추가할 수 있으며,javascript나CSS에서 손쉽게 해당 데이터를 조작할 수 있다.
<button data-action="foo">
Say Hello
</button>const bar = document.querySelectorAll('[data-action="foo"]');
console.log(bar[0].dataset.action) // "foo"