.png)
[JavaScript] DOM 요소 선택
- DOM을 이용하여 HTML 문서를 기반으로 만들어진 화면 속 요소를 선택할 수 있다.
<div class="container">
<h1>I am a Heading</h1>
<p>I am a Paragraph</p>
<ul>
<li class="item">
<p>I am a Paragraph</p>
</li>
<li class="item">
<p>I am a Paragraph</p>
</li>
<li class="item">
<p>I am a Paragraph</p>
</li>
</ul>
<button id="special-button">I am a Button</button>
</div>
이름을 이용하는 방법
클래스
- getElementsByClassName 함수는 주어진 클래스 이름과 일치하는 모든 클래스를 유사 배열의 형태로 반환한다.
- 인덱스를 이용하여 요소를 제어할 수 있다.
- HTML에서 해당 클래스를 가진 요소가 하나뿐이라도 결괏값을 유사 배열로 반환한다.
// item 클래스를 가진 모든 요소들을 선택하여 $listItems 변수에 대입한다.
const $listItems = document.getElementsByClassName("item");
// container 클래스를 가진 모든 요소들을 선택하여 $listItems 변수에 대입한다.
const $container = document.getElementsByClassName("container");
// getElementsByClassName의 결괏값은 배열과 유사한 형태이므로 인덱스로 접근하여 사용한다.
$listItems[0].textContent = "List 1";
$listItems[1].textContent = "List 2";
$listItems[2].textContent = "List 3";
$container[0].style.backgroundColor = "green";
태그
- getElementsByClassName 함수와 동일한 기능을 갖는다.
// li 태그를 이용한 모든 요소들을 선택하여 `$listItems` 변수에 대입한다.
const $listItems = document.getElementsByTagName("li");
// p 태그를 이용한 모든 요소들을 선택하여 `$paragraphs` 변수에 대입한다.
const $paragraphs = document.getElementsByTagName("p");
// getElementsByTagName의 결괏값은 배열과 유사한 형태이므로 인덱스로 접근하여 사용한다.
$listItems[0].textContent = "List 1";
$listItems[1].textContent = "List 2";
$listItems[2].textContent = "List 3";
$paragraphs[0].style.backgroundColor = "green";아이디
- getElementsById 함수는 주어진 아이디 이름과 일치하는 아이디를 반환한다.
- 아이디는 기본적으로 하나의 HTML 문서에서 고유한 값이기 때문에 하나의 요소를 반환한다.
// special-button 아이디를 가진 요소를 선택하여 `$el` 변수에 대입한다.
const $el = document.getElementById("special-button");
// special-button 아이디를 가진 요소의 텍스트를 변경한다.
$el.textContent = "I am a Special Button";CSS 선택자를 이용하는 방법
- 최근에 가장 많이 사용되는 방법이다.
- querySelector 함수는 주어진 CSS 선택자와 일치하는 첫 번째 요소를 반환한다.
// .container라는 클래스를 가진 요소를 선택한다.
const $container = document.querySelector(".container");
// #special-button라는 아이디를 가진 요소를 선택한다.
const $button = document.querySelector("#special-button");- querySelectorAll 함수는 주어진 CSS 선택자와 일치하는 모든 요소들을 유사 배열의 형태로 반환한다.
- 인덱스를 이용하여 요소를 제어할 수 있다.
// <p>라는 태그를 가진 요소들을 선택한다.
const $paragraphs = document.querySelectorAll("p")부모 요소와 형제 요소
- 트리 구조의 계층적 관계를 이용하여 요소를 탐색할 수 있다.
<div id="parent">
<div id="child01"></div>
<div id="child02"></div>
<div id="child03"></div>
</div>자식 요소 찾기
- children 함수는 모든 자식 요소를 유사 배열의 형태로 반환한다.
- firstElementChild 함수는 첫번째 자식 요소를 반환한다.
- lastElementChild 함수는 마지막 자식 요소를 반환한다.
- childElementCount 함수는 자식요소의 개수를 반환한다. → 바로 아래 단계에 있는 자식 요소의 개수만 센다.
var parent = document.getElementById("parent")
parent.children; // [div#child01, div#child02, div#child03]
parent.firstElementChild; // div#child01
parent.lastElementChild; // div#child03
parent.childElementCount; // 3부모 요소 찾기
- parentElement 함수는 부모 요소를 반환한다.
var child01 = document.getElementById("child01");
child01.parentElement; // div#parent형제 요소 찾기
- previousElementSibling 함수는 이전 형제 요소를 반환한다.
- nextElementSibling 함수는 다음 형제 요소를 반환한다.
var child02 = document.getElementById("child02");
child02.previousElementSibling; // div#child01
child02.nextElementSibling; // div#child03P.S.
많은 분량의 코드를 다 뒤지지 않아도 특정 요소를 쉽게 찾을 수 있다는 점이 편리한 것 같다😇
