DOM API

29 Apr 2021

Reading time ~4 minutes

DOM API 실습

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>부트스트랩</title>
</head>
<body>
  <div>
    <ul>
      <li id="list1">1. 웹 프로그래밍 기초</li>
      <li id="list2">2. DB연결 웹 애플리케이션</li>
      <li id="list3">3. 웹 애플리케이션 개발 1/4</li>
    </ul>
  </div>
  <button id="insertBeforeButton">ul 자식 노드 추가</button>
</body>
</html>

DOM 탐색 속성

childNodes - 엘리먼트의 자식 노드의 노드 리스트 반환(텍스트 노드, 주석 노드 포함)

var ul = document.querySelector("ul");
var ulChildNodes = ul.childNodes


for (var index = 0; index < ulChildNodes.length; index++) {
  // 개행이 포함되어 textNode 포함
  console.log(ulChildNodes[index].nodeName); // "#text" "LI" "#text" "LI" "#text" "LI" "#text"
}

firstChild - 엘리먼트의 첫 번째 자식 노드를 반환

var body = document.querySelector("body");
var bodyFirstNode = body.firstChild;

// 개행이 되었므로 textNode가 선택
console.log(bodyFirstNode.nodeName); // "#text"

firstElementChild - 첫 번째 자식 엘리먼트를 반환

var body = document.querySelector("body");
var bodyFirstElementChild = body.firstElementChild;
console.log(bodyFirstElementChild.nodeName); //"DIV"

parentElement - 엘리먼트의 부모 엘리먼트 반환

var div = document.querySelector("div");
var divParentElement = div.parentElement;

console.log(divParentElement.nodeName); // "BODY"

nextSibling - 동일한 노드 트리 레벨에서 다음 노드를 반환

var list1 = document.getElementById("list1");
var nextSiblingNode = list1.nextSibling;

// 개행문자로 인해 textNode 선택
console.log(nextSiblingNode.nodeName); //"#text"

nextElementSibling - 동일한 노드 트리 레벨에서 다음 엘리먼트 반환

var list1 = document.getElementById("list1");
var nextSiblingElement = list1.nextElementSibling;

console.log(nextSiblingElement.textContent); // "2. DB연결 웹 애플리케이션"

DOM 조작 메소드

removeChild - 엘리먼트의 자식 노드 제거

  var ul = document.querySelector("ul");
  
  ul.removeChild(ul.firstElementChild);

appendChild - 마지막 자식 노드로 자식 노드를 엘리먼트에 추가

  var ul = document.querySelector("ul");
  
  var liNode = document.createElement("LI");
  var textNode = document.createTextNode("4. 웹 애플리케이션 개발 1/4");
  
  liNode.appendChild(textNode);
  
  ul.appendChild(liNode);

insertBefore - 기존 자식노드 앞에 새 자식 노드를 추가

ul태그의 첫번째 자식으로 집어넣기

  var ul = document.querySelector("ul");
  
  var liNode = document.createElement("LI");
  var textNode = document.createTextNode("4. 웹 애플리케이션 개발 1/4");
  liNode.appendChild(textNode);

  ul.insertBefore(liNode, ul.firstElementChild);

li 두번째 요소에 집어넣기

  var ul = document.querySelector("ul");
  var li = document.querySelector("li:nth-child(2)");
  
  var liNode = document.createElement("LI");
  var textNode = document.createTextNode("4. 웹 애플리케이션 개발 1/4");
  liNode.appendChild(textNode);

  ul.insertBefore(liNode, li);

cloneNode - 노드를 복제

  var ul = document.querySelector("ul");

   ul.appendChild(ul.firstElementChild.cloneNode(true));

(중요)

replaceChild - 엘리먼트의 자식 노드 바꿈

  var ul = document.querySelector("ul");
  var oldNode = document.querySelector("li:nth-child(2)");
  var newNode = document.createElement("li");
  var textNode = document.createTextNode("텍스트 노드 변경");
  newNode.appendChild(textNode);
  
   ul.replaceChild(newNode, oldNode);

HTML을 문자열로 처리해주는 DOM 속성 / 메소드

innerText - 지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환

  var list1Text = document.getElementById("list1").innerText;
  
  document.getElementById("list2").innerText = list1Text;
  // 결과 : 두번째 리스트 내용을 첫번재 리스트 내용으로 변경

innerHTML - 지정된 엘리먼트의 내부 html을 설정하거나 반환

  var ul = document.querySelector("ul");
  var list1Html = document.getElementById("list1").innerHTML;
  
  ul.innerHTML = list1Html; //결과 : 첫번째 리스트만 남기고 제거됨

insertAdjacentHTML() - HTML로 텍스트를 지정된 위치에 삽입

beforebegin : element 앞에
afterbegin : element 안에 가장 첫번째 child
beforebegin : element 안에 가장 마지막 child
afterend : element 뒤

  var list3 = document.getElementById("list3");
  
  list3.insertAdjacentHTML("afterend", "<li>4. 웹애플리케이션 개발 2/4</li>");

AJax 연동코드

function ajax(data) {
 var oReq = new XMLHttpRequest();
 oReq.addEventListener("load", function() {
   console.log(this.responseText); // type = String
   var jsonobj = JSON.parse(this.responseText);
   console.log(jsonobj.key);
   var outside = document.querySelector("li");
   outside.innerHTML = ("<span>" + fruit + "</span>")

 });    
 oReq.open("GET", "http://www.example.org/getData?data=data");//parameter를 붙여서 보낼수있음. 
 oReq.send();
}

DOM API 실습

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>
</head>
<body>
  <h1>selector test</h1>
  
  <ul>
    <li class="red">apple</li>
    <li class="red">orange</li>
    <li>banana</li>
    <li>grape</li>
    <li>strawberry</li>
  </ul>

</body>
  <script src="js/index.js"></script>
</html>

«실습1»

DOM API를 사용해서, strawberry 아래에 새로운 과일을 하나 더 추가, 추가 된 이후에는 다시 삭제하시오.

var ul = document.querySelector("ul");

var liNode=document.createElement("li");
var textNode=document.createTextNode("아무과일");
liNode.appendChild(textNode);

ul.appendChild(liNode)

var ul = document.querySelector("ul");

var rmNode=document.querySelector("li:nth-child(6)");
ul.removeChild(rmNode)

«실습2»

insertBefore메서드를 사용해서, orange와 banana 사이에 새로운 과일을 추가

var ul = document.querySelector("ul");
var li = document.querySelector("li:nth-child(3)");

var liNode=document.createElement("li");
var textNode=document.createTextNode("아무과일");
liNode.appendChild(textNode);

ul.insertBefore(liNode, li);

«실습3»

실습2를 insertAdjacentHTML메서드를 사용해서, orange와 banana 사이에 새로운 과일을 추가하시오.

var li = document.querySelector("li:nth-child(2)");
li.insertAdjacentHTML("afterend", "<li>아무과일</li>");

«실습4»

apple을 grape 와 strawberry 사이로 옮기시오.

var ul = document.querySelector("ul");
var rmNode = document.querySelector("li:nth-child(1)");

var apple = rmNode.innerHTML;
var grape = document.querySelector("li:nth-child(4)");

ul.removeChild(rmNode);
grape.insertAdjacentHTML("afterend", apple);

ar strawberry = document.querySelector("li:nth-child(5)");
var apple = document.querySelector("li:nth-child(1)");
var ul = document.querySelector("ul");

ul.insertBefore(apple, strawberry)

«실습5»

class 가 ‘red’인 노드만 삭제하시오.

var red = document.querySelectorAll("li .red");
red.forEach(function(x){
    x.innerHTML="";
})

var red = document.querySelectorAll("li .red");
var ul=document.querySelector("ul");
for(var i=0; i<reds.length; i++){
    ul.removeChild(res[i]);
}
})

«실습6»

section 태그의 자손 중에 blue라는 클래스를 가지고 있는 노드가 있다면, 그 하위에 있는 h2 노드를 삭제하시오.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <h1>selector test</h1>
  
    
<section>
  <h2> red section </h2>
  <ul>
    <li class="red">apple</li>
    <li class="red">orange</li>
    <li>banana</li>
    <li>grape</li>
    <li>strawberry</li>
  </ul>
</section>
  
  <Br>
  
<section>
  <h2> blue section </h2>
  <ul>
    <li class="green blue">apple</li>
    <li class="red">orange</li>
    <li>banana</li>
    <li>grape</li>
    <li>strawberry</li>
  </ul>
</section>

</body>
</html>

var bluenode = document.querySelectorAll("section .blue");

for(var i=0; i<bluenode.length; i++){
    var section = bluenode[i].closest("section");
    var h2 = section.querySelector("h2");
    section.removeChild(h2);
}

WebProgramming