[부스트코스]{3. 웹 앱 개발: 예약서비스 1/4}(2. DOM API 활용 - FE)_2. DOM API 연습하기

 

다음의 HTML 코드를 이용하여 실습해보자.

http://jsbin.com/mebuha/1/edit?html,js,output

JS Bin

 

 

 

실습 1) strawberry 아래에 새로운 과일을 하나 더 추가하시오.

 

코드 

var mango = document.createElement("li"); //새로운 li요소를 생성한다.
var mangoText = document.createTextNode("mango"); //text를 생성한다.
mango.appendChild(mangoText); //mango 요소에 text를 삽입한다.

var parent = document.querySelector("ul"); //새로운 li를 삽입할 부모 ul을 찾는다.
parent.appendChild(mango); //parent에 mango를 append한다.

 

결과

 

 

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

 

코드

var mango = document.createElement("li");
var mangoText = document.createTextNode("mango");
mango.appendChild(mangoText);

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

var banana = document.querySelector("li:nth-child(3)"); //ul의 자식 중 banana는 세번째이다.

parent.insertBefore(mango,banana); //banana 요소 전에 mango를 insert한다.

 

결과

 

 

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

 

개념

element.insertAdjacentHTML(position, text);

position
'beforebegin'	element 앞에
'afterbegin'	element 안에 가장 첫번째 child
'beforeend'	element 안에 가장 마지막 child
'afterend'	element 뒤에
text(인자)는 HTML 또는 XML로 해석될 수 있는 문자열이고(html code), (DOM) tree에 삽입할 수 있다.

 

 

코드

var orange = document.querySelector("li:nth-child(2)");
orange.insertAdjacentHTML('afterend',"<li>mango</li>"); //orange 다음에 iinsert하기

 

결과

 

 

실습 4) apple을 grape 와 strawberry 사이로 옮기시오.

 

코드

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

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

parent.insertBefore(apple, strawberry); //element를 move시킨다.

 

결과

 

 

---

 

 

다음의 HTML 코드를 이용하여 실습해보자.

http://jsbin.com/redetul/1/edit?html,css,js,output

JS Bin

 

 

실습 5) class 가 'red'인 노드만 삭제하시오.

 

코드

var reds = document.querySelectorAll("li.red");
//li중 class가 red인 요소 모두 ALL 찾기

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

for(var i=0; i<reds.length;i++){ 
  parent.removeChild(reds[i]); //부모 밑의 자식 삭제
}

 

결과

 

---

 

 

다음의 HTML 코드를 이용하여 실습해보자.

https://jsbin.com/ricopa/1/edit?html,css,js,output

JS Bin

 

 

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

 

코드

var bluenode = document.querySelectorAll("section .blue"); //section 아래의 blue class 찾기
for (var i=0; i<bluenode.length; i++){
  var section=bluenode[i].closest("section"); //가장 가까운 "section" 태그 찾기
  var h2 = section.querySelector("h2"); //section의 h2 요소 찾기
  section.removeChild(h2); //부모 "section" 의 자식 "h2" 삭제하기
}

*주의: querySelector는 한개의 요소만 반환 querySelectorAll는 요소들의 list로 반환 _ 반환 type 조심

 

결과

 

 

 

 

 

 

 

 

 

 

#부스트코스 강의

https://www.edwith.org/boostcourse-web/lecture/20124/

[LECTURE] 2) DOM APIs 실습 : edwith