190127 TIL DOM

Jan 27, 2019 » 1막, TIL (Today I Learned)

AMAZON2 DOM 실습 풀이

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

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

var parent = document.querySelector('ul');
parent.appendChild(mango);

실습2 insertBefore 사용해서 orange와 banana 사이에 새로운 과일 추가

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

var parent = document.querySelector('ul');
var banana = document.querySelector('li:nth-child(3)'); //<- 사실 이것보단 li에 class나 attribute 속성을 넣어주는 게 좋음 

parent.insertBefore(mango, banana); //(망고, 를 -- 앞에 넣겠다.)

실습3 실습2를 insertAdjacentHTML 메서드 사용해서 추가

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

실습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); //insertBefore 는 '이동' 가능 - node 옮길때 유용

실습5 class 가 ‘red’인 노드만 삭제

var reds = document.querySelectorAll('li.red') //querySelectorALL을 하는 것이 중요. ALL~
var parent = document.querySelector('ul');

for (var i = 0; i < reds.length; i++){
    parent.removeChild(reds[i]);
    // 해당 노드를 루프를 돌면서 기준점에서 삭제!
}

//or

reds.forEach((v)=>parent.removeChild(v));

실습6 section 태그의 자손 중 blue를 가지고 있는 클래스가 있다면 하위 h2 삭제

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);
}

//or

Array.from(blueNode) // nodeList를 array로

Array.from(blueNode).forEach(function(v) {
   var section = v.closest('section')
    var h2 = section.querySelector('h2');
    section.removeChild(h2);
});

어제 내가 했던거랑은 완전 천지차이! ㅠㅠ
확실히 근데 한번 해보고 풀이영상 보니까 더 와닿는다.