728x90
반응형
이번에 이 친구들을 제대로 알고 사용하고자 자세히 알아보았다.
맨날 쿼리셀렉터만 남발했었는데 이제야 이해가 된다.
getElementByID
- getElementByID : 요소의 아이디에 접근
- 주어진 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 Element 객체를 반환한다.
- **ID가 없는 요소에 접근하려면 Document.querySelector() 를 사용한다.
<html>
<head>
<title>getElementById 예제</title>
</head>
<body>
<p id="para">어떤 글</p>
<button onclick="changeColor('blue');">blue</button>
<button onclick="changeColor('red');">red</button>
</body>
</html>
// JS
function changeColor(newColor) {
var elem = document.getElementById("para");
elem.style.color = newColor;
}
getElementByName
- getElementByName : 네임 속성 값
- name - 우리가 찾고있는 요소의 속성 값
- 배열을 반환한다. ( id와는 다르게 호출 대상이 여러개, 그래서 배열을 반환한다)
<!doctype html>
<html lang="en">
<head>
<title>Example: using document.getElementsByName</title>
</head>
<body>
<input type="hidden" name="up" />
<input type="hidden" name="down" />
</body>
</html>
const up_names = document.getElementsByName("up");
console.log(up_names[0].tagName); // displays "INPUT"
📍 name 과 id 의 차이점
- id : document 내에서 오로지 하나 (고유함)
- name : 중복 가능, 모든 요소를 가져와서 일괄적으로 컨트롤 가능
querySelector
- querySelector : 선택자
- id, class, 복합 태그 모두 가져올 수 있어서 강력하다
- 괄호 속에 제공한 선택자와 일치하는 문서 내 첫 번째 Element를 반환
const selected = document.querySelector("h1");
→ 문서 내의 첫 번째 h1 태그를 찾아 selected에 반환한다.
- 사용방법 4가지 : 태그 select, 클래스 select, id select, 복합 select
// html
<body>
<h1>h1</h1>
<h2 class="h2">h2</h2>
<h3 id="h3">h3</h3>
<h3>h3_2</h3>
<div>
<span>Span1</span>
<span>Span2</span>
</div>
<script src="app.js"></script>
</body>
1. 태그 select
const selected = document.querySelector("h1");
selected.style.color = "red";
2. 클래스 select,
const selected = document.querySelector(".h2");
selected.style.color = "red";
3. id select
const selected = document.querySelector("#h3");
selected.style.color = "red";
4. 복합 select
const selected = document.querySelector("div span");
selected.style.color = "red";
⇒ 첫번째 element 만 반환함 → Span1만 red가 됨.
→ 그러면 뒤쪽에 있는 span에 접근하려면??
→ 한 태그 안에 여러 개의 태그들이 들어 있을 때는 first-child , last-child , nth-child
참고자료
Document.querySelector() - Web API | MDN
Document.querySelector() 는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다.
developer.mozilla.org
[JS] 자바스크립트 querySelector 함수 사용법 및 예제
오늘은 자바스크립트를 통해 html 태그를 다룰 수 있게 도와주는 함수인 querySelector 함수에 대해서 알아볼 것입니다. querySelector는 getElementby~ 함수들과 비슷합니다. 하지만 id , class , 복합 태그 모
8156217.tistory.com
728x90
반응형
'☁️ 구름 X kakao DeepDive > ☁️ HTML CSS JS' 카테고리의 다른 글
| [JavaScript] 자바스크립트(createElement, removeChild&replaceChild) (0) | 2024.12.03 |
|---|---|
| [JavaScript] 자바스크립트 (DOM 탐색하기) (0) | 2024.12.03 |
| [JavaScript] 자바스크립트 (DOM 이란) (0) | 2024.12.03 |
| [CSS] Box-sizing을 어디에 사용하는데? : 패딩을 넣었는데 화면이 잘릴때! (0) | 2024.11.23 |
| [CSS] Box Sizing 속성 (0) | 2024.11.23 |
