[Web] DOM API 연습하기

* DOM API 연습하기

- 실습1

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

링크 바로가기

힌트) ul에 자식 element를 추가하기

- 추가

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

var li = document.createElement("li");

var str = document.createTextNode("mango");

li.appendChild(str);

ul.appendChild(li);

- 삭제

ul.removeChild(li);

- 실습2: insertBefore

orange와  banana 사이에 새로운 과일을 추가하시오.

링크 바로가기

var li = document.createElement("li");

var str = document.createTextNode("mango");

li.appendChild(str);

var banana = document.querySelector("li:nth-child(3)"); //바나나 위치 찾기

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

ul.insertBefore(li, banana);

- 실습3: insertAdjacentHTML

orange와 banana 사이에 새로운 과일을 추가하시오.

var banana = document.querySelector("li:nth-child(3)"); //바나나 위치 찾기

banana.insertAdjacentHTML("beforebegin", "<li>mango<li>");

- 실습4

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

링크 바로가기

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

var apple = document.querySelector("li:nth-child(1)"); //사과 위치 찾기

var strawberry = document.querySelector("li:nth-child(5)"); //딸기 위치 찾기

//사과 삭제

ul.removeChild(apple); //삭제하지 않아도 위치가 옮겨진다.

//사과 다시 추가

ul.insertBefore(apple, strawberry);

- 실습5

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

링크 바로가기

//모든 노드를 찾을 때는 querySelectorAll 사용하기

var red = document.querySelectorAll(".red");

var ul = document.querySelector("ul"); //기준점 정하기

for(var i=0; i<red.length; i++) {

  ul.removeChild(red[i]);

}

- 실습6

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

링크 바로가기

//section 아래 블루

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

 

for (var i=0; i<blue.length; i++) {

  //가장 가까이에 있는 노드 찾기

  var section = blue[i].closest("section");

  var h2 = section.querySelectorAll("h2");

  

  for (var i=0; i<h2.length; i++) {

    section.removeChild(h2[i]);

  }

}

- forEach 사용해보기