[html] DOM 조작

document

document.title
document.domain
document.URL
document.location
document.styleSheets
document.scripts
document.head
document.body

document.getElement

document.getElementById
document.getElementsByClassName
document.getElementsByName
document.getElementsByTagName
document.getElementsByTagNameNS

querySelector

document.querySelectorAll(".box.box3")[1];

innerHTML, innerText, textContent

// HTML 추가, 삭제
document.getElementById("homeLink").innerHTML = "<span>home</span>";
document.getElementById("homeLink").innerHTML = "";

// 노드 내용 변경
document.getElementById("homeLink").innerText = "abc";
document.getElementById("homeLink").textContent = "abc";

setAttribute

// attribute 추가, 삭제
document.getElementById("homeLink").setAttribute("href", "http://localhost:8080");
document.getElementById("homeLink").setAttribute("href", "");

createElement, createTextNode

// createElement
var span = document.createElement("span");
span.innerHTML = "HERE2";

// createTextNode
var node = document.createTextNode("abc");

appendChild, insertBefore

// appendChild
var span = document.createElement("span");
span.innerHTML = "HERE2";
document.getElementsByClassName("box box3")[0].appendChild(span);

// insertBefore
var span = document.createElement("span");
span.innerHTML = "HERE2";
var here = document.getElementsByClassName("here")[0];
document.getElementsByClassName("box box3")[0].insertBefore(span, here);

remove

document.getElementsByClassName("box box3")[0].remove();

style, class

// style 추가, 삭제
document.getElementById("homeLink").style.backgroundColor = "blue";
document.getElementById("homeLink").style = "";

// class 추가, 삭제
document.getElementById("homeLink").classList.add("box1");
document.getElementById("homeLink").classList.remove("box1");

data

<div class="box box3" data-my-prop1="33_1">31</div>
<div class="box box3" data-my-prop1="33_2">32</div>
<div class="box box3" data-my-prop1="33_3">33</div>
<div class="box box3" data-my-prop1="33_4">34</div>

document.querySelectorAll(".box.box3")[1].dataset.myProp1 // 33_2