2. DOM API활용 - FE (3)

3) DOM APIs 실습

실습1

지금 나온 DOM API를 사용해서, 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 base = document.querySelector("li:nth-child(3)"); var parent = document.querySelector("ul"); parent.insertBefore(mango, base);

 

실습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()의 특징은 이렇게 이동시켜주는 것입니다. 어떤 element를 찾았을 때 그 element를 copy 하는 것이 아니고 cut&paste를 한 것과 같습니다. 노드를 옮길 때 자주 쓰입니다.

실습5

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

링크 바로가기

var reds = document.querySelectorAll("li.red"); var parent = document.querySelector("ul"); for(var i=0; i<reds.length; i++){   parent.removeChild(reds[i]); }

 

• remove()는 그 노드를 찾아서 바로 삭제가 가능합니다. 편하지만 explorer에서 지원하지 않으므로 주의하여 사용합니다.

실습6

section 태그의 자손 중에 blue라는 클래스를 가지고 있는 노드(section)가 있다면, 그 하위에 있는 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); }   Array.from(bluenode).forEach(function(v){      //다른 방법   var section = v.closest("section");   var h2 = section.querySelector("h2");   section.removeChild(h2); });

 

• closest()를 사용하면 closest의 인자로 받은 값을 위로 올라가면서 찾습니다. closest()를 쓰지 않는다면 while 문이나 재귀호출을 사용하여 parentNode()를 통해 탐색을 해야 합니다. 매우 번거롭습니다.
• bluenode는 배열이 아니라 노드 리스트입니다. 노드 리스트는 Array-like 타입으로 배열처럼 리스트 타입이긴 하지만 배열은 아니라서 forEach()를 못 씁니다. 그래서 Array.from()을 사용합니다.
• Array.from(): 노드 리스트를 배열로 바꿔줍니다. explorer 지원이 안 됩니다. 그래서 Polyfill코드가 필요합니다. Polifill 코드를 자바스크립트 상단에 위치시키고 그 아래에서 Array.from()을 쓰면 됩니다.
  
• Polyfill: 하위 호환성을 위한 코드.

Array-like objects

• slice 메서드를 호출하여 Array와 유사한 객체 / 컬렉션을 새 Array로 변환 할 수도 있습니다. 메서드를 객체에 바인딩하면됩니다. 함수 안에 있는 arguments는 'array-like object'의 예입니다.

function list() {   return Array.prototype.slice.call(arguments); }   var list1 = list(1, 2, 3); // [1, 2, 3]

 

• 바인딩은 Function.prototype의 .call 함수를 사용하여 수행 할 수 있으며 Array.prototype.slice.call 대신 [] .slice.call (arguments)을 사용하여 줄일 수도 있습니다. 어쨌든, bind를 사용하여 단순화 할 수 있습니다.

var unboundSlice = Array.prototype.slice; var slice = Function.prototype.call.bind(unboundSlice);   function list() {   return slice(arguments); }   var list1 = list(1, 2, 3); // [1, 2, 3]

 

좀 더  알아보기

polyfill은 무엇인지 한번 찾아보세요!

어떠한 기능을 쓰고 싶은데, 지원하지 않는 브라우저에서도 동작시키게 하고 싶을때가 있죠. 그때 아주 유용합니다.

폴리필(polyfill)은 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻한다.

기능을 지원하지 않는 웹 브라우저에서 원하는 기능을 구현할 수 있으나, 폴리필 플러그인 로드 때문에 시간과 트래픽이 늘어나고, 브라우저별 기능을 추가하는 것 때문에 코드가 매우 길어지고, 성능이 많이 저하된다는 단점이 있다.
(출처: https://ko.wikipedia.org/wiki/%ED%8F%B4%EB%A6%AC%ED%95%84_(%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D))