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 트리에 있고 부모 요소를 가지고 있어야 유효