DevStory

JavaScript/DOM

[JavaScript]HTML 요소 가져오는 방법

DevStory 2022. 11. 13.

JavaScript에서 HTML 요소 가져오는 방법

때때로, 웹 개발자는 HTML 코드를 변경하지 않고 JavaScript에서 HTML 요소를 변경해야 합니다. 이번 포스팅은 HTML 요소를 변경하기 전에 JavaScript에서 HTML 요소를 접근할 수 있는 몇 가지 방법을 소개합니다.

id 속성으로 가져오는 방법

첫 번째 방법으로 document 객체의 getElementById() 메서드를 사용하여 id 속성과 일치하는 HTML 요소를 가져올 수 있습니다.

 

getElementById() 메서드에 전달한 id를 가진 HTML 요소가 없는 경우 null이 반환됩니다.

 

id 속성은 HTML 문서 내에서 고유하기 때문에 HTML 요소를 접근할 수 있는 가장 빠른 방법입니다.

 

아래는 id가 "content"인 HTML 요소를 접근하는 예제입니다.

const contentElement = document.getElementById("content");

HTML 문서 내에서 id 속성은 고유하다고 언급했지만, 실제로는 동일한 id가 존재할 수 있습니다. HTML 문서에 동일한 id가 존재하는 경우 document.getElementById() 메서드는 맨 앞에 있는 HTML 요소를 반환합니다.

 

아래는 HTML 마크업입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="content">content1</div>
    <div id="content">content2</div>
    <div id="content">content3</div>

    <script src="src/index.js"></script>
  </body>
</html>

아래는 id가 "content"인 HTML 요소를 접근하는 JavaScript 코드입니다.

 

태그 사이에 작성된 문자열을 가져오려면 innerText 프로퍼티를 사용합니다.

const content = document.getElementById("content");

console.log(content);           // <div id="content">content</div>
console.log(content.innerHTML); // content1

name 속성으로 가져오는 방법

두 번째 방법으로 document 객체의 getElementsByName() 메서드를 사용하여 id 속성과 일치하는 HTML 요소를 가져올 수 있습니다.

 

메서드 이름이 복수형이므로 HTML 문서 내에서 name 속성은 중복될 수 있으며, NodeList 객체를 반환합니다.

 

getElementsByName() 메서드에 전달한 name을 가진 HTML 요소가 없는 경우 length 프로퍼티의 값이 0인 NodeList 객체가 반환됩니다.

 

아래는 HTML 마크업입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div name="content">content1</div>
    <div name="content">content2</div>
    <div name="content">content3</div>

    <script src="src/index.js"></script>
  </body>
</html>

아래는 name이 "content"인 HTML 요소를 접근하는 JavaScript 코드입니다.

const content = document.getElementsByName("content");

console.log(content[0]);  // <div name="content">content1</div>
console.log(content[1]);  // <div name="content">content2</div>
console.log(content[2]);  // <div name="content">content3</div>

console.log(content[0].innerText);  // content1
console.log(content[1].innerText);  // content2
console.log(content[2].innerText);  // content3

태그의 이름으로 가져오는 방법

세 번째 방법으로 document 객체의 getElementsByTagName() 메서드를 사용하여 태그 이름과 일치하는 HTML 요소를 가져올 수 있습니다.

 

HTML 문서 내에는 동일한 태그를 사용할 수 있으므로 메서드 이름이 복수형입니다.

 

getElementsByTagName() 메서드에 전달한 태그 이름을 가진 HTML 요소가 없는 경우 length 프로퍼티의 값이 0인 HTMLCollection 객체가 반환됩니다.

 

참고로 HTMLCollection 객체는 순수한 배열이 아닌 배열처럼 사용할 수 있는 객체입니다.

 

HTMLCollection과 NodeList의 차이점은 아래 포스팅에서 확인할 수 있습니다.

 

[JavaScript]HTMLCollection과 NodeList 차이점

HTMLCollection과 NodeList HTMLCollection과 NodeList의 주요 차이점은 HTMLCollection은 동적이고 NodeList는 정적이라는 것입니다. 즉, DOM에 새로운 요소(Element)가 추가되면 HTMLCollection은 새로운 요소를 가져오지

developer-talk.tistory.com

 

아래는 세 개의 div 태그를 가지는 HTML 마크업입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="content-id-1" name="content-name-1">
      content1
    </div>
    <div id="content-id-2" name="content-name-2">
      content2
    </div>
    <div id="content-id-3" name="content-name-3">
      content3
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

아래는 div 태그를 접근하는 JavaScript 코드입니다.

const content = document.getElementsByTagName("div");

console.log(content[0]);  // <div name="content">content1</div>
console.log(content[1]);  // <div name="content">content2</div>
console.log(content[2]);  // <div name="content">content3</div>

console.log(content[0].innerText);  // content1
console.log(content[1].innerText);  // content2
console.log(content[2].innerText);  // content3

class 속성으로 가져오는 방법

네 번째 방법으로 document 객체의 getElementsByClassName() 메서드를 사용하여 클래스 이름과 일치하는 HTML 요소를 가져올 수 있습니다.

 

HTML 문서 내에는 동일한 클래스를 적용할 수 있으므로 메서드 이름이 복수형입니다.

 

getElementsByTagName() 메서드에 전달한 태그 이름을 가진 HTML 요소가 없는 경우 length 프로퍼티의 값이 0인 HTMLCollection 객체가 반환됩니다.

 

아래는 세 개의 div 태그가 동일한 class로 정의된 HTML 마크업입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="content">content1</div>
    <div class="content">content2</div>
    <div class="content">content3</div>

    <script src="src/index.js"></script>
  </body>
</html>

아래는 class가 "content"인 HTML 요소를 접근하는 JavaScript 코드입니다.

const content = document.getElementsByClassName("div");

console.log(content[0]);  // <div name="content">content1</div>
console.log(content[1]);  // <div name="content">content2</div>
console.log(content[2]);  // <div name="content">content3</div>

console.log(content[0].innerText);  // content1
console.log(content[1].innerText);  // content2
console.log(content[2].innerText);  // content3

CSS 선택자로 가져오는 방법

마지막 방법으로 CSS 선택자인 querySelector(), querySelectorAll() 메서드를 사용하여 HTML 요소를 가져올 수 있습니다.

 

querySelector() 메서드는 일치하는 CSS 선택자 중에서 맨 앞에 있는 HTML 요소를 반환합니다.

 

querySelectorAll() 메서드는 일치하는 모든 HTML 요소를 NodeList 객체로 반환합니다.

HTML 문서 내에는 동일한 클래스를 적용할 수 있으므로 메서드 이름이 복수형입니다.

 

getElementsByTagName() 메서드에 전달한 태그 이름을 가진 HTML 요소가 없는 경우 length 프로퍼티의 값이 0인 HTMLCollection 객체가 반환됩니다. 

모든 HTML 요소를 가져오는 방법

범용 선택자인 "*"는 모든 HTML 요소를 가져옵니다.

 

모든 HTML 요소중 맨 앞에 있는 HTML 요소를 가져오려면 querySelector() 메서드를 호출하고 "*"를 전달합니다.

const firstElement = document.querySelector("*");

모든 HTML 요소를 가져오려면 querySelectorAll() 메서드를 호출하고 "*"를 전달합니다.

const allElement = document.querySelectorAll("*");

태그의 이름으로 HTML 요소를 가져오는 방법

태그의 이름을 전달하면 해당 HTML 요소를 가져옵니다.

 

특정 태그의 이름과 매핑되는 HTML 요소 중 첫 번째 요소를 가져오려면 querySelector() 메서드를 호출합니다.

const firstElement = document.querySelector("div");

특정 태그의 이름과 매핑되는 모든 HTML 요소를 가져오려면 querySelectorAll() 메서드를 호출합니다.

const allElement = document.querySelectorAll("div");

클래스 이름으로 HTML 요소를 가져오는 방법

클래스 이름과 일치하는 HTML 요소를 가져오려면 점(.) 뒤에 클래스 이름을 작성합니다.

 

특정 클래스와 매핑되는 HTML 요소 중 첫 번째 요소를 가져오려면 querySelector() 메서드를 호출합니다.

const firstElement = document.querySelector(".div-class");

특정 클래스와 매핑되는 HTML 모든 HTML 요소를 가져오려면 querySelectorAll() 메서드를 호출합니다.

const allElement = document.querySelectorAll(".div-class");

id 속성으로 HTML 요소를 가져오는 방법

id와 일치하는 HTML 요소를 가져오려면 샾(#) 뒤에 id 이름을 작성합니다.

 

특정 id와 매핑되는 HTML 요소 중 첫 번째 요소를 가져오려면 querySelector() 메서드를 호출합니다.

const firstElement = document.querySelector("#content");

특정 id와 매핑되는 모든 HTML 요소를 가져오려면 querySelectorAll() 메서드를 호출합니다.

const allElement = document.querySelectorAll("#content");
반응형
저작자표시 비영리 변경금지

'JavaScript > DOM' 카테고리의 다른 글

[JavaScript]부모, 자식 노드 가져오는 방법  (0) 2022.11.15
[JavaScript]querySelectorAll 반복문 사용 방법  (0) 2022.11.15
[JavaScript]HTML 요소의 넓이와 높이 가져오는 방법  (0) 2022.11.13
[JavaScript]JavaScript에서 배경색 변경하는 방법  (0) 2022.11.11
[JavaScript]OnClick 이벤트에서 DOM 요소 제거하는 방법  (0) 2022.11.11

댓글

티스토리툴바