Javascript Query Selector

1. 쉬운 수준의 선택자

$(".class태그").val() jQuery(".class태그").val()	$("input.class태그").val() $("select.class태그").val()	$("#id태그 input.class태그").val() $(".class태그 select.class태그").val()
$("#id태그").val() jQuery("#id태그").val()	$("input#id태그").val() $("select#id태그").val()	$("name=name태그 #id태그").val() $(".class태그 #id태그").val()
$("[name=name태그]").val() jQuery("[name=name태그]").val()	$("input[name=name태그]").val() $("select[name=name태그]").val()	$("#id태그 [name=name태그]").val()

 

Vanilla JS
document.getElementsByClassName("class태그")[0].value	document.querySelector(".id태그").value
document.getElementByName("id태그").value	document.querySelector("#id태그").value
document.getElementsByName("name태그")[0].value	document.querySelector("[name=name태그]").value

 

2. 좀 더 어려운 수준의 선택자

developer.mozilla.org/ko/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors

developer.mozilla.org/ko/docs/Web/API/Element/querySelector : Element Query Selector

developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll : Element Query Selector All

developer.mozilla.org/en-US/docs/Web/API/Document/querySelector : DOM Query Selector

developer.mozilla.org/ko/docs/Web/API/Document/querySelectorAll : DOM Query Selector All