Javascript 요소 가져오기

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 접근자