JavaScript Selector

1. 하나의 요소를 선택할때

getElementById("id");
var el = document.getElementById("myId");

querySelector("");  // 여러개중 처음 나오는 것, 돔트리내에서 한요소로부터 다른요소 탐색
var el = document.querySelector(".myClass");
var el = document.querySelector("div.user-panel.main input[name=login]");

2. 여러개의 노드 선택

getElementByName("name");
var el = document.getElementByName("fname");

getElementByClassName("class");
var el = document.getElementByClassName("myClass");

getElementByTagName("tag");
var el = document.getElementByTagName("p");

querySelectorAll("");
var els = document.querySelectorAll("div button");

3. 관계를 통한 선택

/* 부모찾기 */
parentNode  // 부모
parentNode.parentBode  // 부모의 부모
var el = document.getElementById("ch");
var pr = el.parentNode;

/* 자식찾기 */
childNodes, firstChild, lastChild
var el = document.getElementById("pr");
var children = el.childNodes;
var elder = el.firstChild;
var younger = el.lastChild;

/* 형제찾기 */
previousSibling, nextSibling
var el = document.getElementById("sb");
var elder = el.previousSibling;
var younger = el.nextSibling;