DOM의 요소에 액세스하는 방법

소개

DOM 트리 및 노드 이해에서 우리는 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을 공부할 때 배운 정보를 이해하고 유지하고 있는지 확인하기 위해 스스로 예제로 작업하는 것이 도움이 됩니다.

이 문서와 함께 예제를 통해 작업하려면 자신의 프로젝트에서 새 파일 access.html을 만드십시오. JavaScript 및 HTML을 로컬에서 사용하는 방법을 잘 모르는 경우 JavaScript를 HTML에 추가하는 방법 자습서를 검토하십시오.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Accessing Elements in the 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>Accessing Elements in the DOM</h1>

  <h2>ID (#demo)</h2>
  <div id="demo">Access me by ID</div>

  <h2>Class (.demo)</h2>
  <div class="demo">Access me by class (1)</div>
  <div class="demo">Access me by class (2)</div>

  <h2>Tag (article)</h2>
  <article>Access me by tag (1)</article>
  <article>Access me by tag (2)</article>

  <h2>Query Selector</h2>
  <div id="demo-query">Access me by query</div>

  <h2>Query Selector All</h2>
  <div class="demo-query-all">Access me by query all (1)</div>
  <div class="demo-query-all">Access me by query all (2)</div>

</body>

</html>

이 HTML 파일에는 다양한 문서 메서드로 액세스할 많은 요소가 있습니다. 브라우저에서 파일을 렌더링하면 다음과 유사하게 표시됩니다.

위의 개요에서 설명한 다양한 방법을 사용하여 파일에서 사용 가능한 요소에 액세스할 것입니다.

ID로 요소에 액세스

DOM의 단일 요소에 액세스하는 가장 쉬운 방법은 document 개체의 고유한 getElementById() 메서드를 사용하는 것입니다.

document.getElementById();

ID로 액세스하려면 HTML 요소에 id 속성이 있어야 합니다. 사용할 수 있는 ID가 demo인 div 요소가 있습니다.

<div id="demo">Access me by ID</div>

콘솔에서 요소를 가져와 demoId 변수에 할당합니다.

const demoId = document.getElementById('demo');

demoId를 콘솔에 기록하면 전체 HTML 요소가 반환됩니다.

console.log(demoId);

Output<div id="demo">Access me by ID</div>

border 속성을 purple로 변경하여 올바른 요소에 액세스하고 있는지 확인할 수 있습니다.

demoId.style.border = '1px solid purple';

이렇게 하면 라이브 페이지가 다음과 같이 표시됩니다.

ID로 요소에 액세스하는 것은 DOM에서 요소를 빠르게 가져올 수 있는 효과적인 방법입니다. 그러나 단점이 있습니다. ID는 항상 페이지에 대해 고유해야 하므로 getElementById() 메서드를 사용하여 한 번에 하나의 요소에만 액세스할 수 있습니다. 페이지 전체의 많은 요소에 기능을 추가하려는 경우 코드가 빠르게 반복됩니다.

클래스별 요소 액세스

getElementsByClassName() 메서드.

document.getElementsByClassName();

이제 우리는 둘 이상의 요소에 액세스하려고 합니다. 이 예제에는 demo 클래스가 있는 두 개의 요소가 있습니다.

<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>

Console에서 이러한 요소에 액세스하고 demoClass라는 변수에 넣습니다.

const demoClass = document.getElementsByClassName('demo');

이 시점에서 ID 예제와 동일한 방식으로 요소를 수정하고 싶을 수 있습니다. 그러나 다음 코드를 실행하고 클래스 데모 요소의 border 속성을 주황색으로 변경하려고 하면 오류가 발생합니다.

demoClass.style.border = '1px solid orange';

OutputUncaught TypeError: Cannot set property 'border' of undefined

이것이 작동하지 않는 이유는 단지 하나의 요소를 가져오는 대신 배열과 같은 요소 개체가 있기 때문입니다.

console.log(demoClass);

Output(2) [div.demo, div.demo]

JavaScript 배열은 색인 번호로 액세스해야 합니다. 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>Access me by tag (1)</article>
<article>Access me by 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 요소의 border 속성을 blue로 변경했습니다.

쿼리 선택기

jQuery API에 대한 경험이 있다면 CSS 선택기로 DOM에 액세스하는 jQuery의 방법에 익숙할 것입니다.

$('#demo'); // returns the demo ID element in jQuery

querySelector() 및 querySelectorAll() 메서드를 사용하여 일반 JavaScript에서 동일한 작업을 수행할 수 있습니다.

document.querySelector();
document.querySelectorAll();

단일 요소에 액세스하려면 querySelector() 메서드를 사용할 수 있습니다. HTML 파일에는 demo-query 요소가 있습니다.

<div id="demo-query">Access me by query</div>

id 속성의 선택자는 해시 기호(#)입니다. demo-query id가 있는 요소를 demoQuery 변수에 할당할 수 있습니다.

const demoQuery = document.querySelector('#demo-query');

클래스 또는 태그와 같은 여러 요소가 있는 선택기의 경우 querySelector()는 쿼리와 일치하는 첫 번째 요소를 반환합니다. querySelectorAll() 메서드를 사용하여 특정 쿼리와 일치하는 모든 요소를 수집할 수 있습니다.

예제 파일에는 demo-query-all 클래스가 적용된 두 개의 요소가 있습니다.

<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>

class 속성의 선택자는 마침표 또는 마침표(.)이므로 .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 선택기를 검토하십시오.

완전한 JavaScript 코드

아래는 위에서 수행한 작업의 전체 스크립트입니다. 이를 사용하여 예제 페이지의 모든 요소에 액세스할 수 있습니다. 파일을 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 파일은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Accessing Elements in the 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>Accessing Elements in the DOM</h1>

  <h2>ID (#demo)</h2>
  <div id="demo">Access me by ID</div>

  <h2>Class (.demo)</h2>
  <div class="demo">Access me by class (1)</div>
  <div class="demo">Access me by class (2)</div>

  <h2>Tag (article)</h2>
  <article>Access me by tag (1)</article>
  <article>Access me by tag (2)</article>

  <h2>Query Selector</h2>
  <div id="demo-query">Access me by query</div>

  <h2>Query Selector All</h2>
  <div class="demo-query-all">Access me by query all (1)</div>
  <div class="demo-query-all">Access me by query all (2)</div>

  <script src="access.js"></script>

</body>

</html>

이러한 템플릿 파일에서 계속 작업하여 HTML 요소에 액세스하여 추가로 변경할 수 있습니다.

결론

이 자습서에서는 DOM의 HTML 요소에 액세스하는 5가지 방법(ID, 클래스, HTML 태그 이름 및 선택자)을 살펴보았습니다. 요소 또는 요소 그룹을 가져오는 데 사용할 방법은 브라우저 지원 및 조작할 요소 수에 따라 다릅니다. 이제 DOM을 통해 JavaScript로 문서의 모든 HTML 요소에 액세스할 수 있습니다.