Javascript:선택자 편집하기 (부분)

== HTML 요소 선택자 ==

=== 단일 선택자 ===
하나의 태그를 선택하여 변수에 집어넣어 활용하든, 바로 활용하든.. 보통 코드가 길어지기 때문에 변수에 넣어 활용한다.
{| class="wikitable"
!의도
!설명
!방법
|-
|클래스로 선택
|다음 둘 중 하나의 방법을 선택한다.
|<syntaxhighlight lang="javascript">
document.getElementByClassName('클래스명');

document.querySelector('.클래스명');  // 쿼리셀렉터를 이용.
$('.클래스명');
</syntaxhighlight>
|-
|아이디로 선택
|
|<syntaxhighlight lang="javascript">
document.getElementById('아이디명');

document.querySelector('#아이디명');  // 쿼리셀렉터를 이용.
$('#아이디명');
</syntaxhighlight>
|-
|태그로 선택
|HTML태그 이름으로 선택.
div, a 등등등
|<syntaxhighlight lang="javascript">
document.getElementsByTagName("태그명");

document.querySelector('태그명');  // 쿼리셀렉터를 이용.
$("태그명")
</syntaxhighlight>
|-
|name 속성으로 선택
|<nowiki><div name='이름'> 등...</nowiki>
|<syntaxhighlight lang="javascript">
document.getElementsByName("이름");
</syntaxhighlight>
|-
|태그 내 속성으로 선택
|
|<syntaxhighlight lang="javascript">
document.getElementsByName("[속성명]");  // 해당 속성을 가진 것
document.getElementsByName("[속성명='값']");  // 해당 속성과 해당 값을 가진 것.
document.getElementsByName("[속성명+='값']")  // 해당 속성에 해당 값을 포함한 것.

$('위와 동일')
</syntaxhighlight>
|}

=== 복수 선택자 ===
같은 조건을 만족하는 요소가 여러 개 있을 수 있다.
{| class="wikitable"
!의도
!설명
!방법
|-
|복수선택
|위와 동일하다.
Element 뒤에 s만 붙이고,

querySelector 뒤에 All만 붙이자.
|<syntaxhighlight lang="javascript">
document.getElementsByClassName('클래스명');

document.querySelectorAll('.클래스명');  // 쿼리셀렉터를 이용.
</syntaxhighlight>
|}


이외 조합선택, 계층선택, 필터선택 등이 가능하다.