DOM Node 조작하기

document.querySelector("#nav_tutorials");

document.querySelector(".w3-table-all");
//해당되는게 여러개면 잘 안나옴

a = document.querySelector(".w3-table-all");

a.textConent;
//가지고 있는 text 노드들 나옴

a.tagName;
//태그 속성이 나옴(테이블이라던가)

var w3tableHTML = a.innerHTML;
//html 가져오기

a.firstElementChild;
//첫번째 자식

a.firstChild;
//첫번째 자식인건 같은데 공백이나 텍스트도 포함

a.remove();
//삭제

//DOM 조작 API
removeChild()

appendChild()
var div = document.createElement("div");
var str document.createTextNode("오늘하루는 정말..힘들어");
div.appendChild(str);
$0.appendChild(div);

insertBefore()

cloneNode()

replaceChild()

closest() //상위로 올라가면서 근접 엘리먼트 찾기

$0 //개발자 도구에서 선택한 노드 바로 접근 가능

var base = document.querySelector(".w3-table-all tr:nth-child(3)");
//해당 엘리먼트 자손중 tr중에 3번째꺼 선택

var parent = document.querySelector(".w3-table-all tbody");

var str = document.createTextNode("여기에 추가됐어요.");

div.appendChild(str);

parent.insertBefore(div, base);
//부모를 기준으로, base 앞에 div 엘리먼트를 추가한다


//HTML을 문자열로 처리해주는 DOM API
innerText //getter, setter
parent.innerText //텍스트만 가져옴
$0.innerText;
"Brackets"
$0.innerText = $0.innerText + "@@"
"Brackets@@"
//+=도 가능

innerHTML //getter, setter
parent.innerHTML //HTML 다가져옴
PARENT.innerHTML = "<p>child...<p>";
//CREATE같은거 귀찮게 안해도 setter 역할로 바로 넣어줌

insertAdjacentHTML
var base = document.querySelector("div");
base.insertAdjacentHTML("afterbegin", "<h1>hello world</h1>");
//afterbegin = 요소 바로 안에서 처음 자식 이전에 위치
//beforebegin = 요소 이전에 위치, 요소가 DOM 트리에 있고 부모 요소를 가지고 있어야 유효
//beforeend = 요소 바로 안에서 마지막 자식 이후 위치
//afterend = 요소 이후에 위치, 요소가 DOM 트리에 있고 부모 요소를 가지고 있어야 유효