DOM에서 HTML 요소에 액세스하는 4가지 방법

DOM(문서 개체 모델)은 웹 페이지를 나타냅니다. HTML 문서를 구성하는 요소들의 조합입니다. DOM 덕분에 프로그램은 웹 문서의 구조와 내용을 변경할 수 있습니다.

유형, 속성 또는 고유 식별자를 사용하여 문서의 HTML 요소에 액세스할 수 있습니다. 이 기사에서는 DOM의 요소에 액세스하는 4가지 방법을 살펴보겠습니다.

고유 식별자(ID)로 요소 액세스

요소에 액세스하는 가장 직접적인 방법은 고유 식별자를 사용하는 것입니다. 식별자가 고유하기 때문에 이 접근 방식은 항상 단일 요소를 반환합니다.

다음 HTML 스니펫을 살펴보겠습니다.

<h1 id="title">This is a uniquely identified title</h1>
<div id="content">
...
</div>

getElementById 객체의 document를 사용하여 이러한 각 요소에 액세스할 수 있습니다.

const title = document.getElementById('title');
console.log(title);

해당 요소를 표시하면 해당 HTML 태그 콘텐츠가 다시 반환됩니다.

HTML 요소는 웹 페이지에서 동일한 ID를 두 번 사용할 수 없다는 점을 기억하는 것이 중요합니다.

클래스별로 요소 액세스

웹 페이지의 요소에 액세스하는 또 다른 방법은 class 속성 값을 통해 요소를 식별하는 것입니다. class 값이 고유하지 않아도 되므로 이 방법을 사용하면 한 번에 둘 이상의 요소를 타겟팅할 수 있습니다.

다음 HTML 스니펫을 살펴보겠습니다.

<ul>
<li class="person">J. C. R. Licklider</li>
<li class="person">Claude Shannon</li>
...
</ul>

li 객체의 getElementsByClassName를 사용하여 한 번에 모든 document 요소에 액세스할 수 있습니다.

const pioneers = document.getElementsByClassName('person');

pioneers 변수는 HTML 요소의 모음(배열)입니다. 또한 getElementsByClassName 이름은 복수형( Elements )을 사용합니다. 그러나 getElementById 는 단수형( Element )을 사용합니다.

태그로 요소 액세스

태그 이름으로 웹 페이지의 요소에 액세스하는 방법도 있습니다. 이 접근 방식은 덜 구체적이며 결과적으로 실제로 거의 사용되지 않습니다.

동일한 HTML 스니펫을 살펴보겠습니다.

<ul>
<li class="person">J. C. R. Licklider</li>
<li class="person">Claude Shannon</li>
...
</ul>

문서 객체의 li를 사용하여 한 번에 모든 getElementsByTagName 요소에 액세스할 수 있습니다.

const pioneersAndMore = document.getElementsByTagName('li');

이 접근 방식은 요소의 컬렉션(배열)도 반환합니다. 또한 문서의 모든 태그li를 반환합니다. 해당 페이지에 다른 목록이 있지만 클래스가 다른 경우에도 반환됩니다.

CSS 선택기로 요소 액세스

ACSS selector는 웹 페이지에서 다양한 HTML 요소를 식별하는 코드화된 방법입니다. ID에는 # 기호가 접두사로 붙어야 하고 클래스에는 . 기호가 있어야 합니다. #title 및 .person를 사용하여 이전 예에서 제목과 개척자를 식별합니다. 이는 요소 식별을 위한 가장 기본적인 방법입니다. CSS 선택자는 그것보다 훨씬 강력합니다.

다음 HTML 스니펫을 살펴보겠습니다.

<h1 id="title">Internet Pioneers</h1>
<ul>
<li class="person">J. C. R. Licklider</li>
<li class="person">Claude Shannon</li>
...
</ul>

이제 document 개체의 쿼리 메서드를 사용하여 제목과 목록 요소 모두에 액세스할 수 있습니다. 단일 요소에 액세스하는 querySelector 방법과 둘 이상의 요소에 액세스하는 querySelectorAll 방법이 있습니다.

const title = document.querySelector('#title');
const pioneers = document.querySelectorAll('.person');

또한 querySelectorAll는 정적 컬렉션을 반환하고 모든 getElements* 메서드는 라이브 컬렉션을 반환합니다. 라이브 컬렉션은 웹 페이지에 일부 변경 사항이 있으면 자동으로 업데이트됩니다(예: 해당 메서드의 기준과 일치하는 새 요소를 추가하는 다른 JavaScript 프로그램에 대한 응답).


이것은 JavaScript를 사용하여 HTML 작업에 대한 간결한 소개입니다. 웹 페이지에서 HTML 요소에 액세스하는 몇 가지 필수 방법을 살펴보았습니다. 이것은 웹 브라우저의 멋진 세계를 더 탐험하기 위한 좋은 기반과 출발점을 제공해야 합니다.

이 기사가 마음에 들면 구독을 고려하십시오. JavaScript, Dart 및 Flutter로 프로그래밍을 가르치는 무료 동영상을 제작합니다. 또한 내 새 콘텐츠를 바로 보고 싶다면 나를 팔로우하는 것을 고려하십시오. 다음 시간까지!