logo image
메인
기술
HOME
기술

querySelectorAll , querySelector

목록
#javascript
  • 쿼리 셀렉터
    • 역활은 CSS의 selector표현식을 사용해서 대상을 가져오게 한다.
    • 즉, jquery의 $({selector표현식}')과 같은 역활. 차이점은 이건 JS에서 바로 지원이 됨.
  • querySelectorAll
    • 링크  : 개발자.모질라.org
    • selector에 대응되는 모든 엘레멘트를 가져온다. 
    • 리턴 값을 대응되는 엘레멘트들의 리스트(배열)이다.
    • 지원버전
      • 크롬 : 1
      • FF : 3.5
      • IE : 8(부분적 CSS2 까지), 9
      • Opera : 10
      • Safari : 3.2.525.3
    • ex
      • document.querySelectorAll('div'); //문서의 모든 div
      • var f = document.formName;
        f.querySelectorAll('input[type="checkbox"]:checked'); //formName이라는 폼속의 checkbox 중 체크된 것들
  • querySelector
    • 링크 :  개발자.모질라.org
    • selector에 대응되는 모든 엘레멘트 중 최초 하나만 가져온다.
    • 리턴값은 대응되는 엘레멘트의 첫번째 엘레멘트이다.
    • ex
      • document.querySelector('div'); //문서의 모든 div 중 첫번째 엘레멘트
      • var f = document.formName;
        f.querySelector('input[type="checkbox"]:checked'); //formName이라는 폼속의 checkbox 중 체크된 것들 중 첫번째 엘레멘트
    • 지원버전
      • 크롬 : 1
      • FF : 3.5
      • IE : 8(부분적 CSS2 까지), 9
      • Opera : 10
      • Safari : 3.2.525.3
목록
댓글
  • / /
  • No Nickname
    No Comment
  • 권한이 없습니다.
    {{m_row.m_nick}}
    -
tag
제목 작성자 날짜
[기본형] HTML (with 부트스트랩5.3 , jquery 3.7, vue.js)
#기본형
공대여자
유용한 리눅스(LINUX) 명령어
#linux #command
공대여자
[공지] 기술 게시판
#etc #공지
mins01
ui_treemap new 2
#treemap
공대여자
:scope selector , querySelector 에서 this, self node 지정 1
#css #this #self #scope
공대여자
game_tictactoe 2
#game
공대여자
bootstrap extensions 부트스트랩 확장 2
#bootstrap #css
공대여자
윈도우 화면 새로 고침 하기, 그래픽 드라이버 재시작 2
#윈도우 #window
공대여자
contenteditable 에서 포커스가 안생길 때 강제로 포커스 주는 코드
#range #selection #contenteditable
공대여자
ui_layerForElement 요소 기준으로 레이어 위치 잡기 2
#layer
공대여자
typingLetters 한글자씩 나타내기 1
#html #effect
공대여자
scrollbars styling 1
#css #scrollbars #styling
공대여자
[기본형] chartjs 기본 설정 코드
#chartjs
공대여자
ui_elbowConnector 연결선 2
#connector
공대여자
js_colorschemes 3
#js #color
공대여자
색상에 대한 설명,파레트,네이밍 1
#color
공대여자
css로 만든 태양계 공전 자전 표시 1
#css
공대여자
중앙선거관리위원회 사이버선거역사관 1
#선거 #역사
공대여자
tag