DOM API

13 Sep 2021 in Programming on JavaScript

• 간편해진다.

console
var a= document.querySelector("#nav_tutorials");
a.tagName;
a.innerHTML;
a.textContent;

이동

childNodes
firstChild //공백도 첫번째 자식으로 인정
firstElementChild //위에꺼보다는얘를 보통 많이 쓴다.
parentElement
nextSibling
nextElementSibling

DOM 조작 API

removeChild();
appendChild();
insertBefore();
cloneNode();
replaceChild();
closest();

appendChild()

var a = document.createElement("div") //div 요소 만들어주기
var b = document.createTextNode("text text") //text 노드 만들어주기
a.appendChild(b); //div에 text노드 추가하기
$0.appendChild(a) //현재 선택된 요소에 a추가해주기

insertBefore()

var here = document.querySelector(".ws-table-all tr:nth-child(3)");
var string = document.createTextNode("Inserted");
var ele = document.createElement("div");
ele.appendChild(string);
var parent = document.querySelector(".ws-table-all tbody");

parent.insertBefore(ele,here);

HTML을 문자열로 처리해주는 DOM API

//innerText - textNode한테
0$.innerText;
0$.innerText="hi";

//innerHTML - textNode한테
0$.innerHTML;
0$.innerHTML="<p>hi</p>";

//insertAdjacentHTML - 네가지 위치, beforebegin, afterbegin, beforeend, afterend
$0.insertAdjacentHTML("beoforebegin","insert this in the middle");

실습 - 출처: 웹 프로그래밍(풀스택)

실습1

지금 나온 DOM API를 사용해서, strawberry 아래에 새로운 과일을 하나 더 추가하시오.

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

링크 바로가기

var cur = document.querySelector("ul");
var ele = document.createElement("li");
var string = document.createTextNode("Mango");
ele.appendChild(string);
cur.appendChild(ele);
ele.remove();

---

**실습2**

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

[링크 바로가기](http://jsbin.com/mebuha/1/edit?html,js,output)

```javascript
var parent = document.querySelector("ul");
var here= document.querySelector("ul li:nth-child(3)");
var string=document.createTextNode("Mango Mango");
var ele= document.createElement("li");
ele.appendChild(string);
parent.insertBefore(ele,here);

---

실습3

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

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

---

실습4

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

링크 바로가기

var target = document.querySelector("li:nth-child(1)");
var here = document.querySelector("li:last-child");
var parent= document.querySelector("ul");
parent.insertBefore(target,here);

---

실습5

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

링크 바로가기

var arr = document.querySelectorAll(".red");
for(let i=0;i<arr.length;i++){
    arr[i].remove();
}

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

---

실습6

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

링크 바로가기

var blues = document.querySelectorAll("section .blue");
for(var i =0;i<blues.length;i++){
    var section = blues[i].closest("section");
    var h2 = section.querySelector("h2");
    h2.remove();
}