웹(Web) 이야기

23. <JavaScript> 제어할 태그

knowledge-seeker 2024. 3. 4. 17:50

앞서 HTML과 JavaScript를 연결하는 첫단계로 Script 태그와 HTML 안에서 JavaScript를 실행시킬 연결고리로 input 태그와 event 속성에 대해서 알아봤습니다.

이번 회차에는 JavaScript에서 HTML 문서 내의 특정 요소를 선택하는 방법에 대하여 알아보고자 합니다.

CSS 의 선택자는 HTML의 특정 요소에 스타일 적용 시키기 위한 것처럼 JavaScript를 HTML의 특정 요소에 적용시키려면 CSS의 선택자와 같은 역할을 하는 메서드가 있습니다.

 

 

  1. getElementById  

getElementById 메서드는 문서 내에서 특정 ID를 가진 요소를 찾아 반환합니다. ID는 문서 전체에서 고유해야 합니다. 반환 값은 해당 ID를 가진 요소이며, 일치하는 요소가 없으면 null을 반환합니다.

 

  2. getElementsByClassname  

getElementsByClassName 메서드는 문서 내에서 특정 클래스 이름을 가진 모든 요소를 찾아 HTMLCollection으로 반환합니다. 여러 개의 요소가 일치하면 모든 일치하는 요소가 반환됩니다. 클래스 이름은 여러 개의 요소에서 중복될 수 있습니다. 

 

  3. getElementsByTagname  

getElementsByTagName 메서드는 문서 내에서 특정 태그 이름을 가진 모든 요소를 찾아 HTMLCollection으로 반환합니다. 지정된 태그 이름을 가진 모든 요소가 반환됩니다. 반환되는 컬렉션은 라이브 상태이므로 문서가 업데이트되면 해당 컬렉션도 업데이트됩니다. 

 

  4. querySelector  

querySelector 메서드는 CSS 선택자를 사용하여 문서 내에서 첫 번째로 일치하는 요소를 선택합니다. 일치하는 요소가 없으면 null을 반환합니다. CSS 선택자를 활용하여 클래스, ID, 태그 이름 등으로 요소를 선택할 수 있습니다.

 

  5. querySelector  

querySelectorAll 메서드는 CSS 선택자를 사용하여 문서 내에서 일치하는 모든 요소를 NodeList로 반환합니다. 일치하는 요소가 없으면 빈 NodeList가 반환됩니다. querySelectorAll을 사용하여 여러 개의 요소를 선택할 수 있습니다.

querySelector와 querySelectorAll은 CSS 선택자를 통해 요소를 선택하는 강력한 메서드로, 코드를 간결하게 유지하고 특정 조건에 맞는 요소들을 편리하게 선택할 수 있습니다.

이러한 메서드들은 JavaScript를 사용하여 HTML 문서에서 요소를 선택하고 조작하는 데에 활용됩니다. 요소를 선택함으로써 해당 요소에 대한 속성이나 내용을 변경하거나 이벤트를 등록할 수 있습니다.

 

◈ 예제 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #demo {
            border: 2px solid black;
            padding: 5px; 
            width: 200px;
            text-align: center;           
        }
    </style>
</head>
<body> 
    <h3 id="demo"> Hello World ! </h3>
    <input type="button" value="yellow" onclick =
     "document.querySelector('#demo').style.backgroundColor = 'yellow'">
    <input type="button" value="yellow" onclick = 
     "document.getElementById('demo').style.backgroundColor = 'yellow'">
    <input type="button" value="green"  onclick = 
     "document.querySelector('#demo').style.backgroundColor = 'green'">    
    
</body>
</html>

 

위 <h3> 태그를 id = 'demo' 라고 설정하였습니다.
버튼을 클릭하면 배경색이 바뀌는 JavaScript 구문을 설정하였습니다.
구문에 대해서 살펴보면,

 

document는 JavaScript에서 모든 HTML 문서를 나타내는 객체입니다. document 객체를 통해 HTML 문서의 구조와 콘텐츠에 접근하고 조작할 수 있습니다.

메서드(Method)는 객체에 속한 함수를 의미합니다. 객체는 속성과 메서드를 가지는데, 메서드는 해당 객체에서 실행 가능한 함수를 말합니다.
위의 "querySelector('#demo')" 는 CSS 선택자 id 요소를 선택하는 함수입니다.

이는 "getElementById('demo')"와 같은 역할을 합니다.

"style.backgroundColor" 는 선택된 요소의 스타일 속성에 접근하여 선택된 요소의 배경색을 나타내는 스타일 속성입니다. 여기서는 요소의 배경색을 변경하고 있습니다.
지금까지 HTML과 JavaScript를 기본적으로 어떻게 연결하는가에 대해 알아봤습니다.
<script> 태그, event 속성 안에 위치한 JavaScript 구문을 특정 요소에 적용함으로써 웹페이지를 동적으로 보다 풍성하게 할 수 있습니다.