Javascript : document 프로퍼티를 이용해 태그 선택하기
by 담담이담window 객체에 존재하는 document 프로퍼티를 이용해서
태그를 선택해보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="myNumber">0</div>
<div id="btns">
<div>
<button id="decrease">-</button>
<button id="increase">+</button>
</div>
<div>
<button class="color-btn red" data-color="#FF0000"></button>
<button class="color-btn orange" data-color="#FFA500"></button>
<button class="color-btn yellow" data-color="#FFFF00"></button>
<button class="color-btn green" data-color="#008000"></button>
<button class="color-btn blue" data-color="#0000FF"></button>
<button class="color-btn indigo" data-color="#4B0082"></button>
<button class="color-btn purple" data-color="#800080"></button>
<button class="color-btn black" data-color="#000000"></button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>1. document.getElementById('id 이름')
여기서 myBtn이라는 id를 선택하려면
document.getElementById('myBtn');
id는 같은 파일의 코드에서 한 번만 사용 가능하기에
파라미터에 넣은 값과 동일한 id를 갖는 태그가 리턴되며
존재하지 않는 id를 찾을 경우, null이 리턴된다.
2. document.getElementsByClassName('class 이름')
여기서 red라는 클래스를 가진 태그를 선택하려면
document.getElementsByClassName('red');class에 해당하는 태그 모음이
HTMLCollection이라는
유사배열로 리턴된다.
존재하지 않는 class를 선택하면,
null이나 undefined가 아닌 비어있는 유사배열이 리턴된다.
3. document.getElementsByTagName('tag 이름')
myBtn이라는 id를 선택하려면
document.getElementsByTagName('myBtn');
red라는 클래스를 가진 태그를 선택하려면
document.getElementsByTagName('red');
파라미터로 보낸 태그 이름을 가진 태그가
HTMLCollection이라는
유사배열로 리턴된다.
이는 1,2번과 다르게 파라미터에
id 값과 class값 중 하나를 보낼 수 있다.
존재하지 않는 태그를 선택하면,
null이나 undefined가 아닌
비어있는 유사배열이 리턴된다.
4. document.querySelector('css 선택자')
위의 것들과는 다르게 이름이 아닌 선택자를 파라미터로 보내기에
클래스면 앞에 .을, 아이디면 앞에 #을 붙여줘야한다.
document.querySelector('#myNumber');
document.querySelector('.color-btn');
주의할 점은 만약 color-btn 클래스에 해당하는 요소가
여러 개일지라도, 그에 해당하는 가장 첫 번째 태그만을 리턴한다.
해당 css 선택자에 해당하는 모든 태그를 리턴받고자한다면
4-1을 사용하면 된다.
4-1 document.querySelectorAll('css 선택자')
document.querySelectorAll('.color-btn');해당 css 선택자에 해당하는 모든 태그를
NodeList라는 유사배열로 리턴한다.
존재하지 않는 선택자를 파라미터에 입력하면
null이나 undefined가 아닌
비어있는 NodeList가 리턴된다.
'Javascript' 카테고리의 다른 글
| Javascript : 이벤트 핸들러 (0) | 2023.09.27 |
|---|---|
| Javascript : window(브라우저)와 dom (0) | 2023.09.25 |
| Javascript : 객체의 property 삭제와 배열의 요소 삭제 방법 차이 (0) | 2023.09.20 |
| Javascipt : 숫자형 메소드 (0) | 2023.09.20 |
| Javascript : 객체와 배열의 반복문(for..in 반복문과 for..of 반복문의 차이) (0) | 2023.09.20 |
블로그의 정보
유명한 담벼락
담담이담