DOM APIs 실습

참고 링크 : https://jsbin.com/mebuha/1/edit?html,js,output

• 실습1
  

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

A. 

var melon = document.createElement("li");
var melonText = document.createTextNode("melon")
melon.appendChild(melonText);
 
//실습1
var ul = document.querySelector('ul');
ul.appendChild(melon);
ul.removeChild(melon);

• 실습2

Q. insertBefore 메소드를 사용해서, orange와 banana 사이에 새로운 과일을 추가하시오.

A.

//실습2
var banana = document.querySelector('li:nth-child(3)');
ul.insertBefore(melon, banana);

• 실습3

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

A.

//실습3
banana.insertAdjacentHTML("beforebegin", "<li>mango</li>");

• 실습4

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

A.

//실습4
var apple = document.querySelector('li:nth-child(1)');
var strawberry = document.querySelector('li:nth-child(7)');
 
ul.insertBefore(apple, strawberry);

참고 링크 : https://jsbin.com/redetul/1/edit?html,css,js,output

• 실습5

Q. class가 'red'인 노드만 삭제하시오.

A.

var red = document.querySelectorAll('li.red');
var ul = document.querySelector('ul');
 
//실습5
for(var i = 0; i<red.length; i++) {
  ul.removeChild(red[i]);
}

참고 링크 : https://jsbin.com/ricopa/1/edit?html,css,js,output

• 실습6

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

A.

//실습6
var bluenode = document.querySelectorAll('section .blue');
console.log(bluenode);
 
for(var i = 0; i < bluenode.length; i++) {
  var section = bluenode[i].closest('section');
  console.log(section);
  var h2 = section.querySelector('h2');
  console.log(h2);
  section.removeChild(h2);
}