DOM Node(API) 조작하기

화면의 UI를 넣었다 뺐다 지원해주는 DOM API

 

1. document.

ex) addEventListener(), querySelector(), getElementById()...

createAttribute(), createElement(), createTextNode()...

https://www.w3schools.com/jsref/dom_obj_document.asp

HTML DOM Document Objects

 

 

2. element.

ex) childNodes, classList, className,

firstChild, insertBefore() 등

 

https://www.w3schools.com/jsref/dom_obj_all.asp

HTML DOM Element Objects

 

 

 

 

 

 

몇 가지 유용 DOM 엘리먼트 속성

• tagName : 엘리먼트의 태그명 반환
• textContent : 노드의 텍스트 내용을 설정하거나 반환
• nodeType : 노드의 노드 유형을 숫자로 반환

 

DOM 탐색 API

console.log(~~.nodeName);으로 확인해보기

• childNodes : 엘리먼트의 자식 노드의 노드 리스트 반환
• firstChild : 엘리먼트의 첫번째 자식 노드 반환
• firstElementChild : 첫번째 자식 엘리먼트 반환
• parentElement : 엘리먼트의 부모 엘리먼트 반환
• nextSibling : 동일한 노드 트리 레벨에서 다음 노드를 반환
• nextElementSibling : 동일한 노드 트리 레벨에서 다음 엘리먼트 반환

 

DOM 조작(삭제, 추가, 이동, 교체) API

$0 == 방금 선택한 엘리멘트를 $0를 쓰면 바로 조회할 수 있음

• removeChlid() : 엘리먼트의 자식 노드 제거
• appendChild() : 마지막 자식 노드로, 자식 노드를 엘리먼트에 추가
• insertBefore() : 기존 자식노드 앞에 새 자식 노드 추가
• cloneNode() : 노드 복제
• replaceChild() : 엘리먼트의 자식 노드 바꿈
• cloeset() : 상위로 올라가면서 가장 가까운 엘리먼트를 반환

 

 

appendChild로 문자열을 추가하는 내용

insertBefore() 예제

 

 

 

HTML을 문자열로 처리하는 DOM 필드/메소드

• innerText : 지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환
• innerHTML : 지정된 엘리먼트의 내부 html을 설정하거나 반환
• insertAdjacentHTML(position, text) : HTML로 텍스트를 지정된 특정 위치에 삽입
  • 'beforebegin'  -  element 앞에
  • 'afterbegin'  -  element 안에 가장 첫번째 child
  • 'beforeend'  -  element 안에 가장 마지막 child
  • 'afterend'  -  element 뒤에

 

innerHTML과 innerText는 getter 뿐만 아니라 setter 역할도 가능하다

 

 

 

 

실습

console 또는 javascript 창에서 진행합니다.

 

 

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

추가 된 이후에는 다시 삭제하시오.

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

var ul = document.querySelector("ul");
var li = document.createElement("li");
var str = document.createTextNode("melon");
li.appendChild(str);
ul.appendChild(li);
ul.removeChild(li);

 

 

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

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

var ul = document.querySelector("ul");
var li = document.querySelector("ul li:nth-child(3)");

var liNew = document.createElement("li");
var str = document.createTextNode("melon");
liNew.appendChild(str);
ul.insertBefore(liNew,li);

 

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

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

 

 

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

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

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)

 

 

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

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

var reds = document.querySelectorAll("li.red");
var parent = document.querySelector("ul");

reds.forEach(function(r){
  //console.log(r.innerText);
  parent.removeChild(r); //remove()보단 removeChild()가 호환성이 좋음
});  //DOM 1,2,3 level 모두 지원하니까

 

 

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

 

var blues = document.querySelectorAll("section .blue");

blues.forEach(function(b){
  //console.log(b.closest("section").innerText);
  var parent = b.closest("section");
  var h2 = parent.querySelector("h2");
  //console.log(h2.innerText);
  parent.removeChild(h2);
});

//closest() 쓰면 parent 빨리 찾아줌

var blues = document.querySelectorAll("section .blue");
//blues는 배열이 아닌 node list 타입이므로

//즉, array와 비슷한 타입들은
//polyfill를 사용하여 forEach적용
Array.from(blues).forEach((function(b){
  // 이렇게 귀찮으니까 closest()를 사용
  //var parent = b.parentNode.parentNode;
  var parent = b.closest("section");
  var h2 = parent.querySelector("h2");
  parent.removeChild(h2);
}));

 

 

 

+)  Polyfill (충전솜)

특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 플러그인

babel은 ES5 문법 번역은 가능하지만 ES6의 map, promise,  set, object.assign() 까지 지원하려면 polyfill

출처) https://velog.io/@katanazero86/polyfill%ED%8F%B4%EB%A6%AC%ED%95%84-%EC%9D%B4%EB%9E%80