DOM에서 요소에 액세스하는 방법
페이지 정보
작성자 운영자 작성일 19-06-13 23:49 조회 1,173 댓글 0동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
이전 장에서 DOM을 노드라는 객체 트리로 구성하는 방법을 살펴 보았고 노드는 텍스트, 주석 또는 요소가 될 수 있습니다. 일반적으로 DOM에서 콘텐츠에 액세스하면 HTML 요소 노드를 통해 전달됩니다.
DOM의 요소에 액세스하는 데 익숙하려면 CSS 선택기, 구문 및 용어에 대한 실무 지식과 HTML 요소에 대한 이해가 필요합니다. 이 장에서는 ID, 클래스, 태그 및 쿼리 선택기를 사용하여 DOM의 요소에 액세스하는 여러 가지 방법을 살펴 보겠습니다.
개요
다음은 이 장에서 다루는 다섯 가지 방법에 대한 테이블 개요입니다.
Gets |
Selector Syntax |
Method |
ID |
#demo |
getElementById() |
Class |
.demo |
getElementsByClassName() |
Tag |
demo |
getElementsByTagName() |
Selector (single) |
querySelector() |
|
Selector (all) |
querySelectorAll() |
|
DOM을 공부할 때 자신의 컴퓨터에 예제를 입력하여 배운 정보를 이해하고 유지하는지 확인하는 것이 중요합니다.
이 HTML 파일인 access.html을 자신의 프로젝트에 저장하여 이 강좌와 함께 예제를 수행 할 수 있습니다. JavaScript 및 HTML을 로컬에서 사용하는 방법을 잘 모르는 경우에는 HTML과 JavaScript강좌를 공부하십시오.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOM에서 요소에 액세스하기</title>
<style>
html {
font-family: sans-serif;
color: #333;
}
body {
max-width: 500px;
margin: 0 auto;
padding: 0 15px;
}
div,
article {
padding: 10px;
margin: 5px;
border: 1px solid #dedede;
}
</style>
</head>
<body>
<h1>DOM에서 요소에 액세스하기</h1>
<h2>ID (#demo)</h2>
<div id="demo">ID로 액세스하기</div>
<h2>Class (.demo)</h2>
<div class="demo">class로 액세스하기 (1)</div>
<div class="demo">class로 액세스하기 (2)</div>
<h2>Tag (article)</h2>
<article>tag로 액세스하기 (1)</article>
<article>tag로 액세스하기 (2)</article>
<h2>Query Selector</h2>
<div id="demo-query">query로 액세스하기</div>
<h2>Query Selector All</h2>
<div class="demo-query-all">query로 모두 액세스 (1)</div>
<div class="demo-query-all">query로 모두 액세스 (2)</div>
</body>
</html>
이 HTML 파일에는 다양한 문서 메소드로 액세스 할 수 있는 많은 요소가 있습니다.
브라우저에서 파일을 렌더링하면 다음과 비슷하게 보입니다.
위의 개요에서 설명한 여러 가지 방법을 사용하여 파일의 사용 가능한 요소에 액세스합니다.
ID로 요소 액세스
DOM에서 단일 요소에 액세스하는 가장 쉬운 방법은 고유 ID를 사용하는 것입니다. 문서 객체의 getElementById() 메소드를 사용하여 ID로 요소를 가져올 수 있습니다.
document.getElementById()
ID로 액세스하려면 HTML 요소에 id 속성이 있어야 합니다. ID가 demo인 div 요소가 있습니다.
<div id="demo">ID로 액세스하기</div>
콘솔에서 요소를 가져 와서 demoId 변수에 할당합니다.
>const demoId = document.getElementById('demo');
demoId를 콘솔에 로깅하면 전체 HTML 요소가 반환됩니다.
>console.log(demoId);
테두리 속성을 자주색(purple)으로 변경하여 올바른 요소에 액세스하고 있는지 확인할 수 있습니다.
>demoId.style.border = '1px solid purple';
이렇게하면 라이브 페이지는 다음과 같이 보입니다.
ID로 요소에 액세스하는 것은 DOM에서 요소를 빠르게 가져 오는 효과적인 방법입니다. 그러나 단점이 있습니다. ID는 항상 페이지에 대해 고유해야하므로 getElementById () 메소드를 사용하면 한 번에 하나의 요소에만 액세스 할 수 있습니다. 페이지 전체의 여러 요소에 함수를 추가하려는 경우 코드가 신속하게 반복될 것입니다.
클래스(Class)로 요소 액세스
class 속성은 DOM의 하나 이상의 특정 요소에 액세스하는 데 사용됩니다. getElementsByClassName() 메소드를 사용하여 주어진 클래스 이름으로 모든 요소를 가져올 수 있습니다.
document.getElementsByClassName()
이제는 둘 이상의 요소에 액세스하려고합니다.이 예에서는 demo 클래스가 있는 두 개의 요소가 있습니다.
<div class="demo">class로 액세스하기 (1)</div>
<div class="demo">class로 액세스하기 (2)</div>
Console에서 요소에 액세스하여 demoClass라는 변수에 입력 해 봅시다.
>const demoClass = document.getElementsByClassName('demo');
이 시점에서 ID 예제와 같은 방법으로 요소를 수정할 수 있다고 생각할 수 있습니다. 그러나 다음 코드를 실행하고 클래스 demo 요소의 border 속성을 주황색으로 변경하려고 하면 오류가 발생합니다.
>demoClass.style.border = '1px solid orange';
이것이 작동하지 않는 이유는 단지 하나의 요소를 얻는 대신 요소의 배열과 같은 객체를 가지고 있기 때문입니다.
>console.log(demoClass);
자바 스크립트 배열은 인덱스 번호로 액세스 해야 합니다. 따라서 인덱스 0을 사용하여 이 배열의 첫 번째 요소를 변경할 수 있습니다.
>demoClass[0].style.border = '1px solid orange';
일반적으로 클래스별로 요소에 액세스 할 때 우리는 문서의 모든 요소에 변경 사항을 적용하기를 원합니다.
for 루프를 만들고 배열의 모든 항목을 반복하여 이 작업을 수행 할 수 있습니다.
for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px solid orange';
}
이 코드를 실행하면 라이브 페이지가 다음과 같이 렌더링 됩니다.
이제 demo 클래스가 있는 페이지의 모든 요소를 선택하고 border 속성을 orange로 변경했습니다.
태그로 요소 액세스
페이지의 여러 요소에 액세스하는 덜 구체적인 방법은 HTML 태그 이름을 사용하는 것입니다. getElementsByTagName() 메소드를 사용하여 요소별로 태그에 액세스합니다.
document.getElementsByTagName()
태그 예제의 경우 article 요소를 사용하고 있습니다.
<article>tag로 액세스하기 (1)</article>
<article>tag로 액세스하기 (2)</article>
getElementsByTagName()은 해당 클래스로 요소에 액세스하는 것과 마찬가지로 요소의 배열과 같은 객체를 반환하며 for 루프를 사용하여 문서의 모든 태그를 수정할 수 있습니다.
const demoTag = document.getElementsByTagName('article');
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue';
}
코드를 실행하면 라이브 페이지가 다음과 같이 수정됩니다.
모든 article 요소의 테두리 속성을 파란색으로 변경했습니다.
쿼리(Query) 선택기
jQuery API에 대한 경험이 있다면 jQuery의 CSS 선택기를 사용하여 DOM에 액세스하는 방법을 잘 알고 있을 것입니다.
$('#demo') // returns the demo ID element in jQuery
querySelector() 및 querySelectorAll() 메소드를 사용하여 일반 JavaScript에서 동일한 작업을 수행 할 수 있습니다.
document.querySelector()
document.querySelectorAll()
단일 요소에 액세스하려면 querySelector() 메서드를 사용합니다. HTML 파일에는 demo 쿼리 요소가 있습니다.
<div id="demo-query">query로 액세스하기</div>
id 속성의 선택자는 해시 기호 (#)입니다. demo-query id가있는 요소를 demoQuery 변수에 할당 할 수 있습니다.
const demoQuery = document.querySelector('#demo-query');
클래스나 태그와 같은 여러 요소가 있는 selector의 경우 querySelector()는 쿼리와 일치하는 첫 번째 요소를 반환합니다. querySelectorAll() 메서드를 사용하여 특정 쿼리와 일치하는 모든 요소를 수집 할 수 있습니다.
예제 파일에는 demo-query-all 클래스가 적용된 두 개의 요소가 있습니다.
<div class="demo-query-all">query로 모두 액세스 (1)</div>
<div class="demo-query-all">query로 모두 액세스 (2)</div>
클래스 속성의 선택자는 마침표 또는 완전 정지 (.)이므로 .demo-query-all을 사용하여 클래스에 액세스 할 수 있습니다.
const demoQueryAll = document.querySelectorAll('.demo-query-all');
forEach() 메서드를 사용하여 일치하는 모든 요소의 border 속성에 녹색을 적용 할 수 있습니다.
demoQueryAll.forEach(query => {
query.style.border = '1px solid green';
});
querySelector()를 사용하면 쉼표로 구분 된 값은 OR 연산자로 작동합니다. 예를 들어, querySelector('div, article')는 div 또는 article 중 문서의 첫 번째 부분에 나타나는 부분과 일치합니다.
querySelectorAll()을 사용하면 쉼표로 구분 된 값이 AND 연산자로 사용되며 querySelectorAll('div, article')은 문서의 div 및 article 값과 모두 일치합니다.
쿼리 선택기 메서드를 사용하면 CSS 파일에서와 같은 방식으로 DOM의 모든 요소나 요소 그룹에 액세스 할 수 있으므로 매우 강력합니다. 선택자의 전체 목록을 보려면 Mozilla 개발자 네트워크에서 CSS 선택기를 검토하십시오.
자바스크립트 전체 코드
아래는 우리가 위에서 한 작업의 전체 스크립트입니다. 이를 사용하여 예제 페이지의 모든 요소에 액세스 할 수 있습니다.
파일을 access.js로 저장하고 닫는 body 태그 바로 앞에 HTML 파일로 로드하십시오.
// Assign all elements
const demoId = document.getElementById('demo')
const demoClass = document.getElementsByClassName('demo')
const demoTag = document.getElementsByTagName('article')
const demoQuery = document.querySelector('#demo-query')
const demoQueryAll = document.querySelectorAll('.demo-query-all')
// Change border of ID demo to purple
demoId.style.border = '1px solid purple'
// Change border of class demo to orange
for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px solid orange'
}
// Change border of tag demo to blue
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue'
}
// Change border of ID demo-query to red
demoQuery.style.border = '1px solid red'
// Change border of class query-all to green
demoQueryAll.forEach(query => {
query.style.border = '1px solid green'
})
HTML 요소에 액세스하여 이 템플릿 파일을 계속 수정하여 추가로 변경할 수 있습니다.
이 장에서는 ID, 클래스, HTML 태그 이름 및 선택기를 사용하여 DOM의 HTML 요소에 액세스하는 5 가지 방법을 검토했습니다. 요소 또는 요소 그룹을 가져 오는 데 사용할 메소드는 브라우저 지원 및 조작 할 요소 수에 따라 다릅니다. 이제 DOM을 통해 JavaScript가 있는 문서의 HTML 요소에 액세스 할 수 있습니다.
댓글목록 0
등록된 댓글이 없습니다.
