JavaScript DOM 선택하기

* id로 선택

document.getElementById("item");

*태그로 선택

document.getElementsByTagName('p');
document.getElementsByTagName('p')[0];

*클래스로 선택

document.getElementByClassName("c1");
document.getElementByClassName("c1")[0];

*id 또는 태그 또는 클래스로 선택(여러개 중 첫번째 것을 선택한다.)

document.querySelector("#item");
document.querySelector('p');
document.querySelector(".c1");

*여러 엘리먼트 선택

document.querySelectorAll("#item, .c1, p");
document.querySelectorAll("#item, .c1, p")[0];

*name으로 선택

document.getElementsByName("네임")[0];

*부모 엘리먼트

기준.parentElement

*자식 엘리먼트

기준.children[0]

*파일 선택

let file = documnet.getElementById("inp").files[0];

*형제 엘리먼트

기준.nextElementSibling; //뒤
기준.previousElementSibling; //앞

※ nextSibling이나 previousSibling은 엘리먼트가 아닌 노드까지 조회한다. 심지어는 공백도 텍스트 노드로 인정하고 조회한다. 그러니 헷갈리지 말고 사용하자.