[javascript]document.querySelector, document.querySelectorAll, document.getElementById, document.getElementsByClassName, document.getElementsByTagName 요소 찾기

 

아이디로 찾기 클래스로 찾기 태그명으로로 찾기

 

css 선택자로 찾기

var id = document.querySelector('#id'); 
var class = document.querySelector('.class');

선택자를 만족하는 첫번째 element 반환, 일치하는 요소가 없을경우 null을 반환
id 선택자인데 문서내에 같은 아이디를 여러번 사용한 경우 첫번째 id 값을 가진 element 반환

var classList = document.querySelectorAll('.class');

선택자를 만족하는 모든 요소의 리스트 반환, 결과가 없을경우 빈 리스트를 반환

var classMany = document.querySelectorAll('.class1, .class2');

위와 같지만 !여러개!를 반환

var divInnerClass = document.querySelector('div.class.class input[name=class]')

복잡한 선택자도 선택 가능 - css에서 선택할때랑 비슷함

 

 

아이디로 찾기

var id = document.getElementById('id');

//ex) 매개변수 대소문자 구분
<div class="Main"></div>

var id = document.getElementById('main');
// null
var id = document.getElementById('Main');
// <div class="Main"></div> 반환

문자열과 일치하는 id 속성을 가진 요소를 찾아 element 객체를 반환함, 결과가 없을경우 null을 반환

id의 대소문자가 정확해야함 ID로 입력할 경우 유효하지 않은 이름이기때문에 사용 불가능함

id가 없는 요소에 접근 하려면 document.querySelector()로 찾기

특정 요소를 빠르게 찾을 때 유용하다

 

 

클래스로 찾기

var class = document.getElementByClassName('class');

// ex) 클래스명 모두 포함하고 있는 요소 탐색 가능
<div class="class class2"></div>
var class_class2 = document.getElementByClassName('class class2');

// ex) 다중 선택은 불가
<div class="class"></div>
<div class="class2"></div>

 

결과가 없을경우 뭘 반환하는거지 - HTMLCollection ?

위와 마찬가지로 id의 대소문자가 정확해야함(매개변수, 메소드명)

var id_class = document.getElementById('id').getElementsByClassName('class');

문자열과 일치하는 id 속성 내 class라는 클래스를 가진 모든 요소 탐색

 

var class_class = document.getElementsByClassName('class').getElementsByClassName('class');
// 요거는 왜 안될까
var class_id = document.getElementsByClassName('class').getElementById('id');
// 이것도 안됨

// document.getElementsByClassName 이 배열 함수기때문

 

 

http://daplus.net/javascript-%EC%97%AC%EB%9F%AC-%ED%81%B4%EB%9E%98%EC%8A%A4%EA%B0%80%EC%9E%88%EB%8A%94-%EC%9A%94%EC%86%8C%EB%A5%BC-%EA%B0%80%EC%A0%B8-%EC%98%A4%EB%8A%94-%EB%B0%A9%EB%B2%95/

[javascript] 여러 클래스가있는 요소를 가져 오는 방법 - 리뷰나라

 

태그명으로 찾기

var tag = document.getElementsByTagName('tag');

element가 호출되면 소문자로 변환함 - 카멜케이스로 이루어진 element를 호출하려면 getElementsByTagNameNs() 사용해야함