Javascript:선택자

틀:Javascript

1. Javascript:개요
2. Javascript:변수, 상수
   1. Javascript:자료구조
3. Javascript:연산자
4. 분기문
   1. Javascript:조건문
   2. Javascript:반복문
5. Javascript:선택자
   1. Javascript:요소 내용 변경
   2. Javascript:HTML로부터 데이터 받기
6. Javascript:이벤트
   1. Javascript:클릭 이벤트
7. Javascript:AJAX
   1. AJAX 활용
      1. Javascript:댓글달기
      2. Javascript:무한 스크롤링
8. Javascript:활용
   1. Javascript:표 정렬

개요

html 문서에서 어디에 지정할 것인가.

의도	설명	방법
지정	선택자는 CSS와 같은 형태이다. 자바스크립트를 불러온 이후의 것들만 지정할 수 있다. 그럼 html이 로딩되기 전에 js가 다 불러와져야 하는데, js 안에, window.addEventListener('DOMContentLoaded', function()) 를 넣어준다. (다 불러왔다는 이벤트가 발생하면 실행한다는 의미.)	window.addEventListener('DOMContentLoaded', function(){ const 변수 = document.querySelector('.클래스명'); console.log(변수); })

HTML 요소 선택자

단일 선택자

하나의 태그를 선택하여 변수에 집어넣어 활용하든, 바로 활용하든.. 보통 코드가 길어지기 때문에 변수에 넣어 활용한다.

의도	설명	방법
클래스로 선택	다음 둘 중 하나의 방법을 선택한다.	document.getElementByClassName('클래스명'); document.querySelector('.클래스명'); // 쿼리셀렉터를 이용. $('.클래스명');
아이디로 선택		document.getElementById('아이디명'); document.querySelector('#아이디명'); // 쿼리셀렉터를 이용. $('#아이디명');
태그로 선택	HTML태그 이름으로 선택. div, a 등등등	document.getElementsByTagName("태그명"); document.querySelector('태그명'); // 쿼리셀렉터를 이용. $("태그명")
name 속성으로 선택	<div name='이름'> 등...	document.getElementsByName("이름");
태그 내 속성으로 선택		document.getElementsByName("[속성명]"); // 해당 속성을 가진 것 document.getElementsByName("[속성명='값']"); // 해당 속성과 해당 값을 가진 것. document.getElementsByName("[속성명+='값']") // 해당 속성에 해당 값을 포함한 것. $('위와 동일')

복수 선택자

같은 조건을 만족하는 요소가 여러 개 있을 수 있다.

의도	설명	방법
복수선택	위와 동일하다. Element 뒤에 s만 붙이고, querySelector 뒤에 All만 붙이자.	document.getElementsByClassName('클래스명'); document.querySelectorAll('.클래스명'); // 쿼리셀렉터를 이용.

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