[HTML] DOM

 

What is Dom?

문서 객체 모델(DOM, Document Object Model)은 HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스입니다.

문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공합니다.

DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있습니다. 여러 가지 함수를 활용해서 소셜 미디어에서 새롭게 생성되는 게시물을 저장하고 분류하는 작업을 구현할 수 있습니다.

dom을 이용하면 웹페이지의 일부 요소만을  변경할 수 있습니다.

 

Selection of the dom element

dom의 element를 다루기 위해서는 element를 선택하는 방법을 정해야 합니다.

DOM 요소를 선택하는 방법은 다음과 같습니다.

• 태그 이름(tag name)을 이용한 선택

var selectedItem = document.getElementsByTagName("li"); // 모든 <li> 요소를 선택함.
for (var i = 0; i < selectedItem.length; i++) {
    selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.
}

• 아이디(id)를 이용한 선택

var selectedItem = document.getElementById("nameid"); // 아이디가 "nameid"인 요소를 선택함.

selectedItem.style.color = "red"; // 선택된 요소의 텍스트 색상을 변경함.

• 클래스(class)를 이용한 선택

var selectedItem = document.getElementsByClassName("namecalss"); // 클래스가 "namecalss"인 모든 요소를 선택함.
for (var i = 0; i < selectedItem.length; i++) {
    selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.
}

• CSS 선택자(selector)를 이용한 선택

var selectedItem = document.getElementsByName("elename"); // name 속성값이 "elename"인 모든 요소를 선택함.
for (var i = 0; i < selectedItem.length; i++) {
   selectedItem.item(i).style.color = "red"; // 선택된 모든 요소의 텍스트 색상을 변경함.
}

• HTML 객체 집합(object collection)을 이용한 선택

var title = document.title; // <title> 요소를 선택함.

document.write(title);

 

what is node?

Dom은 노드라고 불리는 계층적 단위에 정보를 저장하고 있습니다.

node tree

노드 트리(node tree)는 노드들의 집합으로  노드와의 관계 보여줍니다.

• 노드 트리의 가장 상위에는 단 하나의 루트 노드(root node)가 존재합니다.
• 루트 노드를 제외한 모든 노드는 단 하나의 부모 노드(parent node)만을 가집니다.
• 모든 요소 노드는 자식 노드(child node)를 가질 수 있습니다.
• 형제 노드(sibling node)란 같은 부모 노드를 가지는 모든 노드를 가리킵니다.
• 조상 노드(ancestor node)란 부모 노드를 포함해 계층적으로 현재 노드보다 상위에 존재하는 모든 노드를 가리킵니다.
• 자손 노드(descendant node)란 자식 노드를 포함해 계층적으로 현재 노드보다 하위에 존재하는 모든 노드를 가리킵니다.

 

 How to use Dom

document 메서드를 사용해서 다양한 DOM 속성을 활용할수 있습니다.

 

• node의 생성

create 메소드를 사용하면 새로운 요소를 만들 수 있습니다.

const newNode = document.createElement(div);          // 새로운 <div> 요소를 생성함.

 

• node의 추가

append 메소드를 사용하면 요소를 부모 노드에 추가할 수 있습니다.

document.body.append(newNode)//Create로 생성한 newNode를 트리구조로 연결합니다.

create로 생성된 newNode는 기존의 노드와는 부모 노드가 다른 노드입니다. 때문에 부모 노드를 연결해 주어야 합니다.

 

• node의 조회

querySelector메소드를 사용하면 요소의 값을 조회할 수 있습니다.

const newNode = document.querySelector('.nodedata')
//class이름이 nodedata인 html요소를 조회 합니다.

querySelector사용 시 가져올 수 있는 요소의 수는 단 하나입니다.

여러 개의 요소를 한 번에 가져오기 위해서는 querySelectorAll요소를 사용합니다.

const newNodes = document.querySelectorAll('.nodedata')
//클래스 이름이 nodedata 인 모든 HTML 요소를 유사 배열로 받아옵니다.

 

• node의 제거

remove 메소드를 사용하면 요소의 값을 삭제할 수 있습니다.

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 요소를 삭제할 수 있다.

 

 

특정 노드의 값을 제거 하고 싶을 경우에는 아래와 같은 메서드를 사용할 수 있다.

• removeChild() : 기존의 노드 리스트에서 특정 노드를 제거함.
• removeAttribute() : 속성의 이름을 이용하여 특정 속성 노드를 제거함.

const container = document.getElementById("container");      // 아이디가 "container"인 요소를 선택함.
const containerItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택함.
container.removeChild(containerItem);                   // 지정된 요소를 삭제함.

 

그 외 추가적인 document 매소드

http://www.tcpschool.com/javascript/js_dom_document

코딩교육 티씨피스쿨