[JS] DOM 심화

DOM

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

# createElement

# createTextNode

var ul = document.querySelector("ul");
var newItem = document.createElement("li");
var newText = document.createTextNode("mango");
 
newItem.appendChild(newText);
ul.appendChild(newItem);

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

# insertBefore

var ul = document.querySelector("ul");
var newItem = document.createElement("li");
var newText = document.createTextNode("mango");
newItem.appendChild(newText);
 
var banana = document.querySelector("li:nth-child(3)");
ul.insertBefore(newItem,banana);

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

# insertAdjacentHTML

var banana = document.querySelector("li:nth-child(3)");
banana.insertAdjacentHTML("beforebegin","<li>mango</li>")

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

# removeChild

var apple = document.querySelector("li:first-child");
var grape = document.querySelector("li:nth-child(4)");
var ul = document.querySelector("ul");
 
grape.insertAdjacentHTML("beforebegin","<li>"+apple.innerText+"</li>");
ul.removeChild(apple);

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

var reds = document.querySelectorAll(".red");
 
reds.forEach(function(v){
  v.remove();
});

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

var bluenodes = document.querySelectorAll(".blue");
 
bluenodes.forEach(function(v,i){
  var section = bluenodes[i].closest("section");
  var bluenode = section.querySelector("h2");
  section.removeChild(bluenode);
});
Colored