[Javascript] Html 요소(element)의 셀렉터(selector - getElementById, getElementByClass, querySelector...)
안녕하세요. 명월입니다.
이 글은 Javascript에서 Html 요소(element)의 셀렉터(selector - getElementById, getElementByClass, querySelector...)에 대한 글입니다.
Html에서 Javascript를 사용한다는 것은 Html 태그의 값을 취득하거나 수정하거나 삭제등으로 태그의 값을 변경하기 위해 사용하는 경우입니다.
그렇다면 값을 취득하거나 수정, 삭제를 하기 위해서는 태그의 요소를 취득을 해야합니다. 그때 요소의 id나 class, tagname 그리고 css 선택자를 사용해서 요소를 선택할 수 있습니다.
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- 예제 요소 -->
<input id="test1"><br />
<input class="test2"><br />
<textarea></textarea><br />
<input name="test3">
<script language="javascript">
// id가 test1인 요소를 선택해서 value값을 넣는다.
document.getElementById("test1").value = "getElementById";
// class가 test2인 요소를 선택해서 value값을 넣는다.
document.getElementsByClassName("test2")[0].value = "getElementsByClassName";
// tagname이 textarea인 요소를 선택해서 value값을 넣는다.
document.getElementsByTagName("textarea")[0].value = "getElementsByTagName";
// name이 test3인 요소를 선택해서 value값을 넣는다.
document.getElementsByName("test3")[0].value = "getElementsByName";
</script>
</body>
</html>
요소에서 id는 사양으로는 오직 한 개입니다. html은 컴파일 언어가 아니기 때문에 두개를 작성할 수도 있지만, 그러면 한개의 id만 읽히고 선택 요소가 모호해 질 수 있습니다.
Class와 TagName은 html 태그 내에서 오직 한개의 요소가 아니기 때문에 array 형식으로 취득이 됩니다.
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- 예제 요소 -->
<input class="test1 test2"><br />
<input class="test2 test3"><br />
<input class="test2 test4"><br />
<!-- 예제 요소 -->
<textarea></textarea><br />
<textarea></textarea><br />
<textarea></textarea>
<script language="javascript">
// class가 test2인 요소를 모두 취득한다.
// eles는 array 타입이다.
var eles = document.getElementsByClassName("test2");
for(let i=0 ; i<eles.length; i++) {
eles[i].value = i;
}
// 태그 이름이 textarea인 요소를 모두 취득한다.
eles = document.getElementsByTagName("textarea");
for(let i=0 ; i<eles.length; i++) {
eles[i].value = i;
}
</script>
</body>
</html>
그리고 제가 처음 Javascript를 사용할 때는 없었는 탐색 함수인데 최근에는 querySelector와 querySelectorAll입니다.
이게 10년전 만에도 jquery sizzle엔진의 css selector로 html요소를 찾을 수 밖에 없었습니다. 그런데 지금보니 Javascript 바닐라 버젼에서도 css selector가 생겼네요..
예전에 이 기능때문에 바닐라 Javascript에서 Jquery 라이브러리를 사용하던건데.. 이렇게 되면 다시 바닐라 버젼으로 돌아갈까 생각도 되네요.
개인적인 여담입니다만, 최근에 angularjs던가 vue던가 좋은 프레임워크나 라이브러리가 많이 있습니다.
이건 사용하는 사람들의 선택입니다만, 저는 별로 좋아하지 않습니다. 어차피 Javascript에서 파생된 라이브러리이기 때문에 성능상에도 의문이 생기고 안정성이나 보안적인 것도 확실할까 하는 의문이 생깁니다. 라이선스 문제도 있고요.
그런 것을 너무 따지면 사용할 수 있는 프레임워크나 라이브러리가 없습니다. 그래서 개인 선택입니다만, 예전에 국외 Y포털 사이트의 프로젝트 한 적이 있는데 거기는 라이센스 문제때문에 Jquery도 사용하지 못하더라고요.
아까 이야기하는 성능, 보안, 라이센스 문제 때문입니다. 그래서 바닐라 javascript로 다 만들어서 썼습니다. 물론 프로젝트 사양의 의한 선택입니다. 참고로 설명했습니다.
<!doctype html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- 요소 선택 -->
<input id="test"><br />
<input class="test2"><br />
<input class="test2"><br />
<textarea></textarea><br />
<script language="javascript">
// querySelector 단 한개의 요소만 선택합니다. 복수가 선택되면 [0]가 선택됩니다.
// id가 test인 요소를 선택
document.querySelector("#test").value = "querySelector";
// querySelectorAll 복수의 요소를 선택합니다.
// class가 test2인 요소와, textarea의 요소를 선택
var eles = document.querySelectorAll(".test2, textarea");
for(let i=0; i<eles.length; i++) {
eles[i].value = i;
}
</script>
</body>
</html>
Css의 셀렉터에 관해서는 예전에 설명한 적이 있습니다. 참고하시면 됩니다.
링크 - [CSS] Selector(선택자)
지금까지의 javascript의 요소 탐색 함수를 정리하겠습니다.
| 탐색 함수 | 설명 |
|---|---|
| getElementById | id로 요소를 선택합니다. 결과는 단수입니다. |
| getElementsByClassName | class로 요소를 선택합니다. 결과는 복수입니다. |
| getElementsByName | name으로 요소를 선택합니다. 결과는 복수입니다. |
| getElementsByTagName | tag name으로 요소를 선택합니다. 결과는 복수입니다. |
| querySelector | css selector로 요소를 선택합니다. 결과는 단수입니다. |
| querySelectorAll | css selector로 요소를 선택합니다. 결과는 복수입니다. |
여기까지 Javascript에서 Html 요소(element)의 셀렉터(selector - getElementById, getElementByClass, querySelector...)에 대한 글이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.