JavaScript로 HTML 태그를 선택하는 방법

JavaScript/DOM 2022. 8. 27. 13:47

1. HTML 태그 이름을 이용한 선택(document.getElementsByTagName)
2. HTML id를 이용한 선택(document.getElementById)
3. HTML class를 이용한 선택(document.getElementsByClassName)
4. HTML name 속성을 이용한 선택(document.getElementsByName)
5. CSS 선택자를 이용한 선택 (querySelectorAll() 메소드는 CSS 선택자(아이디, 클래스, 속성, 속성값 등)를 이용하여 HTML 요소)
6. HTML 객체 집합(object collection)을 이용한 선택 (HTML DOM에서 제공하는 객체 집합(object collection)을 이용하여 HTML 요소를 선택)

태그이름으로 선택하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <h1>HTML 태그 이름을 이용한 선택</h1>
      <ul>
        <li>첫번째 아이템</li>
        <li>두번째 아이템</li>
        <li>세번째 아이템</li>
        <li>네번째 아이템</li>
        <li>다섯번째 아이템</li>
      </ul>
    <script>  
      var itemList = document.getElementsByTagName('li'); 
 //    console.log(item); // HTMLCollection(5) [li, li, li, li, li]  
      for(let i=0; i< itemList.length; i++){
        // console.log(itemList.item(i)); // li, li, li, li, li  
        itemList.item(i).style.color = "blue";
      } 
    </script>
</body>
</html>

** item() 메소드는 해당 HTML 객체 집합(obejct collection)에서 전달받은 인덱스에 해당하는 요소를 반환한다

** HTML 요소의 style 프로퍼티를 이용하면, 해당 요소의 CSS 스타일을 변경한다

** css 스타일링을 할 때도 태그 이름으로 스타일링을 하는 경우는 거의 없듯이, 자바스크립트에서도 많이 사용되는 메소드는 아니다

** document.getElementsByTagName('*'); 하면은 모든 태그가 선택이 된다

ID로 선택하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <h1>HTML 태그 이름을 이용한 선택</h1>
      <ul>
        <li>첫번째 아이템</li>
        <li id="even">두번째 아이템</li>
        <li>세번째 아이템</li>
        <li id="even">네번째 아이템</li>
        <li>다섯번째 아이템</li>
      </ul>
    <script>  
       var selectItem = document.getElementById('even'); 
       selectItem.style.color = 'blue';  
    </script>
</body>
</html>

** 자바스크립트에서 아이디(id)를 이용한 선택은 해당 아이디를 가지고 있는 요소 중에서 첫 번째 요소 단 하나만을 선택합니다.

** 따라서 여러 요소를 선택하고 싶을 때는 태그 이름이나 클래스와 같은 다른 방법을 사용해야 합니다.

** 없는 id태그를 선택했을 땐, null 이라고 표시된다(undefined가 아닌!)

CLASS 로 선택하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <h1>HTML 태그 이름을 이용한 선택</h1>
      <ul>
        <li>첫번째 아이템</li>
        <li class="even">두번째 아이템</li>
        <li>세번째 아이템</li>
        <li class="even">네번째 아이템</li>
        <li>다섯번째 아이템</li>
      </ul>
    <script>  
       var selectItem = document.getElementsByClassName('even'); 
       for (var i=0; i<selectItem.length; i++){
          selectItem.item(i).style.color='blue';
       }
    </script>
</body>
</html>

** 존재하지 않는 클래스는 빈 HTML collection이 출력된다.

NAME으로 선택하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <h1>HTML 태그 이름을 이용한 선택</h1>
    <p name="first">첫번째 단락입니다</p>
      <ul>
        <li name="first">첫번째 아이템</li>
        <li>두번째 아이템</li>
        <li>세번째 아이템</li>
        <li>네번째 아이템</li>
        <li>다섯번째 아이템</li>
      </ul>
    <script>  
      var selectedItem = document.getElementsByName('first'); //
      for (var i=0; i<selectedItem.length; i++){
        selectedItem.item(i).style.color = 'blue'; 
      }       
    </script>
</body>
</html>

CSS로 태그 선택하기

- document 객체의 querySelector와 querySelectorAll 두가지가 있다.

//  document.querySelector

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <h1>HTML 태그 이름을 이용한 선택</h1>   
      <ul>
        <li class="odd">첫번째 아이템</li>
        <li>두번째 아이템</li>
        <li class="odd">세번째 아이템</li>
        <li>네번째 아이템</li>
        <li class="odd">다섯번째 아이템</li>
      </ul>
    <script>  
      var selectedItem = document.querySelector('li.odd'); 
      selectedItem.style.color = "blue";    
    </script>
</body>
</html>

//  document.querySelectorAll

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
    <h1>HTML 태그 이름을 이용한 선택</h1>   
      <ul>
        <li class="odd">첫번째 아이템</li>
        <li>두번째 아이템</li>
        <li class="odd">세번째 아이템</li>
        <li>네번째 아이템</li>
        <li class="odd">다섯번째 아이템</li>
      </ul>
    <script>  
      var selectedItem = document.querySelectorAll('li.odd'); 
      for(let i=0; i< selectedItem.length; i++){
        selectedItem.item(i).style.color = 'blue'; 
      }      
    </script>
</body>
</html>

HTML 객체 집합(object collection)으로 선택하기

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML 객체 집합을 이용한 선택</title>
</head>
<body>
    <script>
      var title = document.title;  // title 요소를 선택함 
      document.write(title); 
    </script>
</body>
</html>

cf. 유사배열(Array-Like Object)이란?!

1. 숫자형태의 indexing이 가능하다

2. length property가 있다.

3. 배열의 기본 메소드를 사용할 수 없다(push, splice..)

4. Array.isArray(유사배열)은 false

5. 유사 배열에 담기는 순서는 태그의 깊이보다는 문서 전체적인 측면에서 위에서부터 차례대로, 위치에 따라서 순서

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

DOM요소에 접근하고 속성 가져오기 (0)	2022.11.23
스타일(css style)다루기 (0)	2022.11.22
속성(Attribute)와 프러퍼티(Property) (0)	2022.11.21
DOM(Document Object Model)이란?! (0)	2022.11.19
유사배열(Array-Like Object) (0)	2022.11.06

ABOUT ME

yunaaa's yunaaa's

태그이름으로 선택하기

ID로 선택하기

CLASS 로 선택하기

CSS로 태그 선택하기

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

티스토리툴바

ABOUT ME

태그이름으로 선택하기

ID로 선택하기

CLASS 로 선택하기

CSS로 태그 선택하기

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

관련글 관련글 더보기

티스토리툴바