문서 객체모델 (DOM)

문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스
이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공

DOM의 계층 구조

Document 객체

• Document 객체는 웹 페이지 그 자체
• 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드 시 Document 객체부터 시작

HTML 요소 선택

• document.getElementsByTagName(태그이름)
  태그 이름의 요소를 모두 선택
• document.getElementById(아이디)
  아이디의 요소를 선택
• document.getElementsByClassName(클래스이름)
  클래스에 속한 요소를 모두 선택
• document.getElementsByName(name속성값)
  Name속성값을 갖는 요소 모두 선택
• document.createElement(HTML요소)
  HTML 요소 생성
• document.write(텍스트)
  HTML 출력 스트림을 통해 텍스트를 출력
  

이벤트 핸들러 추가

마우스 클릭 이벤트와 연결될 이벤트 핸들러 코드를 추가

document.getElementById(아이디).onclick = function(){ 실행할 코드 }

노드간의 관계를 이용한 접근

1. parentNode : 부모 노드
2. childNodes : 자식 노드 리스트
3. firstChild : 첫 번째 자식 노드
4. lastChild : 마지막 자식 노드
5. nextSibling : 다음 형제 노드
6. previousSibling : 이전 형제 노드

노드 정보 가져오기

1. nodeName
2. nodeValue
3. nodeType

nodeValue

예시

nodeType

노드 리스트

• 노드 리스트는 getElementsByTag Name() 메소드나 childNodes 프로 퍼티의 값으로 반환되는 객체
• 모든 노드를 리스트 형태로 저장
• 리스트의 각 노드는 0부터 시작하 는 인덱스를 이용하여 접근
  
  

노드의 추가

1. appendChild()

<h1>appendChild() 메소드</h1>

<h2 id="item">JavaScript</h2>

<div id="list">
  <p>HTML</p>
  <p>CSS</p>
  <p>JQuery</p>
</div>

<button onclick="appendNode()">노드 추가!</button>

<script>
  function appendNode() {
    var parent = document.getElementById("list");

    var newItem = document.getElementById("item");

    parent.appendChild(newItem);
  }
</script>

2. insertBefore()

새로운 노드를 특정 자식 노드 바로 앞에 추가
부모노드.insertBefore(새로운자식노드, 기준자식노드);
1. 새로운 자식 노드 : 자식 노드 리스트(child node list)에 새롭게 추가할 자식 노드를 전달
2. 기준 자식 노드 : 새로운 노드를 삽입할 때 기준이 되는 노드로, 이 노 드 바로 앞에 새로운 노드가 추가

<h1>insertBefore() 메소드</h1>

<h2 id="item">JavaScript</h2>

<div id="list">
  <p>HTML</p>
  <p id="criteria">CSS</p>
  <p>JQuery</p>
</div>
<button onclick="appendNode()">노드 추가!</button>

<script>
  function appendNode() {
    var parent = document.getElementById("list");
    var criteriaItem = document.getElementById("criteria");
    var newItem = document.getElementById("item");

    parent.insertBefore(newItem, criteriaItem);
  }
</script>

3. insertData()

텍스트 노드의 텍스트 데이터에 새로운 텍스트를 추가
텍스트노드.insertData(오프셋, 새로운데이터);
1. 오프셋(offset) : 오프셋 값은 0부터 시작하며, 기존 텍스트 데이터의 몇 번째 위치부터 추가할지를 전달
2. 새로운 데이터 : 새로이 삽입할 텍스트 데이터를 전달

노드의 생성

1. createElement() 요소 노드 생성

var criteriaNode = document.getElementById("text");

var newNode = document.createElement("p"); // 새로운 p태그 생성
newNode.innerHTML = "새로운  단락입니다."; // 내용 채우고
document.body.insertBefore(newNode,  criteriaNod
e);        // 새로운  요소를 기준이 되는 요소 바로 앞에 추가함.

2. createAttribute() 속성 노드 생성

이미 존재하는 요소 노드에 속성 노드를 생성하고자 할 때는 setAttributeNode()로 적용한다.

var text = document.getElementById("text");
var newAttribute = document.createAttribute("style"); // 새로운  style 속성 노드를 생성함.
newAttribute.value = "color:red"; // value 추가
text.setAttributeNode(newAttribute); //

3. createTextNode() 텍스트 노드 생성

var elementNode = document.getElementById("text"); 

var newText = document.createTextNode("새로운  텍스트에요! ");    // 새로운  텍스트 노드를 생성함.
elementNode.appendChild(newText); // 해당 요소의 자식 노드로 추가함.

노드의 제거

1. removeChild()

var parent = document.getElementById("list"); // 부모 선택
var removedItem = document.getElementById("item"); // 지우려는 대상

parent.removeChild(removedItem); //부모에서 삭제 

2. removeAttribute()

var text = document.getElementById("text");

text.removeAttribute("style"); //해당 요소의 style 속성 삭제 

제거함.

텍스트 노드의 값 변경

firstChild의 nodeValue를 변경하는 것이 포인트

<h1>텍스트 노드의 값 변경</h1>
<p id="text">이 텍스트를 변경하고 싶어요!</p>
<button onclick="changeText()">텍스트 변경!</button> 

<script>
var para = document.getElementById("text"); // 아이디가 "text"인 요소를 선택함. 

function changeText() {
para.**firstChild.nodeValue** = "텍스트 변경 완료!";
} </script>

속성 노드의 값 변경

setAttribute('key', 'value')

<h1>속성 노드의 값 변경</h1>
<p>속성 노드의 값을 변경하고 싶어요!</p>
<button onclick="changeAttribute()">속성 변경!</button> 

<script>
var para;

function changeAttribute() {
// 모든 <p> 요소중에서 첫 번째 요소에 클래스 속성값으로 "para"를 설정함.
  
document.getElementsByTagName("p")[0].setAttribute("class","para");
// 클래스가 설정되면  해당 클래스에 설정되어  있던  스타일이 자동으로 적용됨.
} </script>

요소 노드의 교체

기존의 요소 소드를 새로운 요소 노드로 교체
부모노드.replaceChild(새로운 자식노드, 기존 자식 노드)
* 기존 자식 노드 : 자식 노드 리스트에서 제거된다.

요소노드의 교체 예제

<h1>요소 노드의 교체</h1> 
<div id="parent">
<p id="first">첫 번째 요소입니다.</p> 
<p>두 번째 요소입니다.</p>
</div>
<p id="third">세 번째 요소입니다.</p>

<button onclick="changeNode()">요소 노드 교체!</button> 

<script>
var parent = document.getElementById("parent");// 부모노드 선택

var first = document.getElementById("first"); //자식
var third = document.getElementById("third"); //자식

function changeNode() {
parent.replaceChild(third, first);
// first 요소를 삭제하고,  그 대신 third 요소를 삽입함. 

}
</script>

텍스트노드의 데이터 교체

텍스트노드.replaceData(오프셋, 교체할문자수, 새로운데이터);
* offset : 몇번째 문자부터 교체할지 결정

요소의 fistChild를 변경해야한다.

<h1>텍스트 노드의 데이터  교체</h1>
<p id="text">지금  시간은 오후  3시입니다.</p>
<button onclick="changeText()">텍스트 교체!</button> 

<script>
var text = document.getElementById("text").**firstChild**; // 아이디가 "text"인 요소의 텍스트 노드를 선택함.

function changeText() {
text.replaceData(7,  4, "저녁  7"); // 텍스트 교체 
} </script>