DOM (Document Object Model, 문서 객체 모델)

1. DOM ( Document Object Model )

• HTML 문서나 XML 문서에 접근하기 위한 일종의 인터페이스
• 문서 내의 모든 요소의 목적과 특징을 정의하고, 각각의 요소에 접근하는 방법을 제공

 

 

1.1. DOM 객체 가져오기

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

💡 getElementsByTagName(tagname)
    : 태그이름이 tagname과 일치하는 element 배열 얻기

      

      

      

    
    

      <javascript />
    
var selectedItem = document.getElementsByTagName("li"); // 모든 <li> 요소를 선택

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

 

1.1.2. 아이디(id)를 이용한 선택

💡 getElementById(id)
    : 태그의 id 속성이 id과 일치하는 element 객체 얻기

      

      

      

    
    

      <javascript />
    
var selectedItem = document.getElementById("even"); // 아이디가 "even"인 요소를 선택

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

 

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

💡 getElementsByClassName(classname)
    : 태그의 class 속성이 classname과 일치하는 element 배열 얻기

      

      

      

    
    

      <javascript />
    
var selectedItem = document.getElementsByClassName("odd"); // 클래스가 "odd"인 모든 요소를 선택

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

 

1.1.4. name 속성(attribute)을 이용한 선택

💡 getElementsByClassName(name)
    : 태그의 name 속성이 name과 일치하는 element 배열 얻기

      

      

      

    
    

      <javascript />
    
var selectedItem = document.getElementsByName("first"); // name 속성값이 "first"인 모든 요소를 선택

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

 

1.1.5. CSS 선택자(selector)를 이용한 선택

💡 querySelectorAll(selector)
    : selector에 일치하는 모든 element 배열 얻기

      

      

      

    
    

      <javascript />
    
var selectedItem = document.querySelectorAll("li.odd"); // 클래스가 "odd"인 요소 중에서 <li> 요소만을 선택

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

 

💡 querySelector(selector)
    : selector에 일치하는 첫번째  element 객체 얻기

      

      

      

    
    

      <javascript />
    
var selectedItem = document.getElementsByTagName("li"); // 모든 <li> 요소를 선택

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

 

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

      

      

      

    
    

      <javascript />
    
var title = document.title; // <title> 요소를 선택
document.write(title);

 

 

1.2. 노드 조작하기

1.2.1. 노드 생성

createElement(tagName) : element node 생성
createAttribute(text) : text node 생성
createTextNode(node) : text node 생성

      

      

      

    
    

      <javascript />
    
function createNode() {
    var criteriaNode = document.getElementById("text"); //  아이디가 "text"인 요소를 선택
    var newNode = document.createElement("p");          // 새로운 <p> 요소 생성
    newNode.innerHTML = "새로운 단락!!";
    document.body.insertBefore(newNode, criteriaNode);  // 새로운 요소를 기준이 되는 요소 바로 앞에 추가
}

 

1.2.2. 노드 추가

appendChild(node) : 객체에 node를 child로 추가
insertBefore(new, cirterial) : 새로운 노드를 특정 노드 바로 앞에 추가
insertData(offset, newData) : 텍스트 노드의 텍스트 데이터에 새로운 텍스트 추가

      

      

      

    
    

      <javascript />
    
function appendNode() {
    var parent = document.getElementById("list");  // 아이디가 "list"인 요소를 선택
    var newItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택
    parent.appendChild(newItem);                   // 해당 요소의 맨 마지막 자식 노드로 추가
}

 

1.2.3. 노드  삭제

removeChild(childnode) : 객체의 자식 노드를 제거
removeAttribute() : 속성의 이름을 이용하여 특정 속성 노드를 제거

      

      

      

    
    

      <javascript />
    
var parent = document.getElementById("list");      // 아이디가 "list"인 요소를 선택
var removedItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택
parent.removeChild(removedItem);                   // 지정된 요소를 삭제

 

1.2.4. 노드 복제

cloneNode(true) : 특정 노드를 복제

      

      

      

    
    

      <javascript />
    
function cloneElement() {
    var parent = document.getElementById("list");     // 아이디가 "list"인 요소를 선택
    var originItem = document.getElementById("item"); // 아이디가 "item"인 요소를 선택
    parent.appendChild(originItem.cloneNode(true));   // 해당 노드를 복제하여 리스트의 맨 마지막에 추가
}

 

1.2.5. 노드 값 변경

nodeValue 프로퍼티 이용
setAttribute() : 노드의 속성값을 변경

      

      

      

    
    

      <javascript />
    
var para = document.getElementById("text"); // 아이디가 "text"인 요소를 선택
function changeText() {
    para.firstChild.nodeValue = "텍스트 변경 완료!";
}

 

1.2.6. 노드 교체

replaceChild() : 특정 노드 그 자체를 다른 노드로 교체

      

      

      

    
    

      <javascript />
    
var parent = document.getElementById("parent"); // 부모 노드를 선택
var first = document.getElementById("first");
var third = document.getElementById("third");

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

 

 

1.3. 객체의 속성 설정

setAttribute(name, value) : 객체의 속성 지정
* 웹 브라우저가 지원하지 않는 태그의 속성도 사용 가능
* . 으로 접근 : 웹 브라우저가 지원하는 속성만 변경 가능

getAttribute(name) : 객체의 속성 값을 가져옴

      

      

      

    
    

      <html />
    
<div></div>

<script>
    const elem = document.querySeletor(‘div’);

    elem.setAttribute(‘id’, wrap); 
    // <div id=“wrap”></div> 

    elem.getAttribute(‘id’);
    // wrap 

    elem.hasAttribute(‘id’);
    // true (특성 속성이 있는지, 없는지)
    
</script>

 

1.4. innerHTML, innerText

innerHTML : 문자열을 HTML 태그로 삽입
innerText : 문자열을 text node로 삽입

      

      

      

    
    

      <html />
    
<p id="name">홍길동</p>

<script>
    document.getElementById('name').innerHTML="의적"
</script>