event 실습

https://jsbin.com/hijujoluno/edit?html,js,output

// 실습1.strawberry 아래에 새로운 과일 추가

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

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

parent.appendChild(mango);

//실습2. orange와 banana 사이에 새로운과일 추가

var banana = document.querySelector("li:nth-child(3)"); 
//("li:nth-child(3)") 경우, selector가 변경될경우, 
//코드가 깨질수가 있으므로 (semantic 하지못하다)
//li뒤에 부수적인 text, class 등등을 넣어놓는게 좋다.

parent.insertBefore(mango, banana); //insert->banana앞에 mango삽입

//실습3. 실습2에 insertAdjacentHTML메서드 사용, orange와 banana사이 새로운과일추가

var orange = document.querySelector("li:nth-child(2)");
orange.insertAdjacentHTML('afterend', "<li>망고고</li>");

//실습4. apple을 grape와 strawberry 사이로 옮기기

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

parent.insertBefore(apple, strawberry);
//insertBefore의 특징은 어떤 el를 찾았을때, 복붙이 아니라, 이동시킨다.

https://jsbin.com/qejevowedo/edit?html,js,output

//실습5. class가 red인 node만 삭제하자

var reds = document.querySelectorAll("li.red");
var parent = document.querySelector("ul");
for( var i=0; i<reds.length; i++) {
  parent.removeChild(reds[i]);
}
//해당 node를 loop를 돌면서 기준점에서 삭제

https://jsbin.com/qipahidaco/edit?html,js,output

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

var bluenode = document.querySelectorAll("section .blue");
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);
  
}
closest 위의 node를 빨리찾을수있음

var bluenode = document.querySelectorAll("section .blue");
//bluenode 가 배열은 아니다. 다만 list 

//Array.from()  ///polyfill 코드 참조 (js상단에 위치->array.from활용)

//forEach적용할때 bluenode가 배열로바뀐다.
Array.from(bluenode).forEach((function(value) {
  var section = value.closest("section");
  //console.log(section);
  var h2 = section.querySelector("h2");
  //console.log(h2);
  section.removeChild(h2);
}));