본문 바로가기
프로그래밍/JavaScript

Javascript 요소 가져오기

by 꾸션 2022. 6. 27.

HTML DOM Document의 요소를 가져오는 함수들의 정의와 사용법에 대해서 소개합니다.

관련 함수는 아래와 같습니다.

  • getElementById
  • getElementsByClassName
  • getElementsByName
  • getElementsByTagName
  • querySelector
  • querySelectorAll

 

getElementById('아이디')

함수의 인자와 아이디가 일치하는 요소를 가져옵니다.

querySelector('#아이디')로 대체 가능합니다. ('#'을 꼭 붙여줍니다.)

<p id='blogName'>꾸션</p>
document.getElementById('blogName')
document.querySelect('#blogName')

 

getElementsByClassName('클래스명')

함수의 인자와 클래스가 일치하는 모든 요소들을 가져옵니다.

querySelectorAll('. 클래스명')으로 대체 가능합니다. ('.'을 꼭 붙여줍니다.)

<p id='blogName' class='mainTitle'>꾸션</p>
document.getElementsByClassName('mainTitle')
document.querySelectAll('.mainTitle')


document.querySelect('.mainTitle') // 첫 번재 요소만

 

getElementsByName('네임명')

함수의 인자와 네임이 일치하는 모든 요소들을 가져옵니다.

querySelectorAll('[name="네임명"')으로 대체 가능합니다.

<input type="text" name="address">
document.getElementsByName('address')
document.querySelectAll('[name="address"]')


document.querySelect('[name="address"]') // 첫 번재 요소만

 

getElementsByTagName('태그명')

함수의 인자와 일치하는 html 태그가 일치하는 요소들을 가져옵니다.

querySelectorAll('태그명')으로 대체 가능합니다.

<p id='blogName'>꾸션</p>
document.getElementsByTagName('p')
document.querySelectAll('p')


document.querySelect('p') // 첫 번재 요소만

 

querySelector('...')

함수 인자에 해당하는 요소 중에서 첫 번째 요소를 가져옵니다.

함수 인자는 "css 접근자" 형태로 작성합니다.

 

querySelectorAll('...')

함수 인자에 해당하는 모든 요소들을 가져옵니다.

함수 인자는 "css 접근자" 형태로 작성합니다.

 

 

 

CSS 접근자

css 접근자 정의 및 예시입니다. .class .intro class="intro"인 모든 요소 선택 .class1.class2 .name1.name2 class 속성 내에  name1  과  name2 가 모두 설정된 모든 요소를 선택합니다 . .class1 .class2 ...

ccusean.tistory.com

 

반응형

댓글