[Javascript] DOM Tree 다루기(JS로 태그 선택하기)

Javascript

[Javascript] DOM Tree 다루기(JS로 태그 선택하기)

emmaOH! 2024. 6. 10. 14:44

🌳 예시 html 코드

아래는 이 글에서 사용될 전체 html 코드입니다.

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

  <head>
    <meta charset="UTF-8">
    <title>JS with Codeit</title>
  </head>
  
  <body>
    <div id="content">
      <h2 class="title">Cat-1</h2>
      <ul id="list-1">
        <li>Ragdoll</li>
        <li>British Shorthair</li>
        <li>Scottish Fold</li>
        <li>Bengal</li>
      </ul>
      
      <h2 class="title">Cat-2</h2>
      <ul id="list-2">
        <li>Sphynx</li>
        <li>Munchkin</li>
        <li>Persian</li>
      </ul>
    </div>
    
    <script src="index.js"></script>
  </body>

</html>

🌳 태그 선택 메서드

1) getElementById('id_명칭')

document.getElementById('id_명칭')
html의 id 속성을 이용하여 해당 id를 가진 태그를 반환
선택된 태그 안에 다른 태그가 있다면 함께 선택됨
id라고 명시했기 때문에 '#'을 작성할 필요 없음
코드 예시

const myId = document.getElementById('list-1');
console.log(myId);

콘솔창 출력 내용

2) getElementsByClassName('class_명칭')

document.getElementsByClassName('class_명칭')
html의 class 속성을 이용하여 해당 class에 속한 태그 전체를 HTMLCollection으로 반환
class라고 명시했기 때문에 '.'을 작성할 필요 없음
코드 예시

const myClass = document.getElementsByClassName('title');
console.log(myClass);

콘솔창 출력 내용

3) getElementsByTagName('tag_종류')

(잘 쓰이지 않음)
document.getElementsByTagName('tag_종류')
html의 tag를 이용하여 해당 tag를 가진 태그들을 HTMLCollection으로 반환
코드 예시

const myTag = document.getElementsByTagName('button');
console.log(myTag);

콘솔창 출력 내용

id는 html 파일에서 유일하게 존재하는 명칭을 쓰기 때문에 'Element'라고 쓰지만,
class나 tag는 여러 요소가 존재할 수 있기 때문에 Element 뒤에 s를 붙여 'Elements'라고 써주어야 합니다.

4) querySelector('css_선택자')

document.querySelector('css_선택자')
css의 선택자를 이용하여 한 개의 태그만 선택
해당 선택자를 가진 태그 중 가장 첫 번째 태그만 반환
코드 예시

const mySelector = document.querySelector(".title");
console.log(mySelector);

콘솔창 출력 내용

class="title"의 두 번째 태그인 <h2 class="title">Cat-2</h2>는 출력되지 않음

5) querySelectorAll('css_선택자')

document.querySelectorAll('css_선택자')
css의 선택자를 이용하여 여러 개의 태그를 선택
해당 선택자를 가진 태그들을 NodeList로 반환
코드 예시

const mySelector = document.querySelectorAll(".title");
console.log(mySelector);

콘솔창 출력 내용

querySelector과 querySelectorAll 프로퍼티는 선택자를 활용하기 때문에 명칭 앞에 #(id) 또는 .(class)을 꼭 붙여주어야 합니다.

🌳 요소 노드 프로퍼티

1) innerHTML

(잘 쓰이지 않음)
원하는_element.innerHTML
원하는 요소 노드가 감싸고 있는 내부의 html 코드를 문자열(줄바꿈 및 들여쓰기 포함)로 반환
요소 안의 정보를 확인하거나
'='으로 값을 할당하여 기존 값을 새로운 값으로 완전히 교체할 때 활용
코드 예시

const myTag = document.querySelector('#list-1');
console.log(myTag.innerHTML);

콘솔창 출력 내용

innerHTML 사용 시 주의할 점입니다.

2) outerHTML

원하는_element.outerHTML
원하는 요소 노드를 포함한 내부의 html 코드를 문자열(줄바꿈 및 들여쓰기 포함)로 반환
요소 안의 정보를 확인하거나
'='으로 값을 할당하여 기존 값을 새로운 값으로 완전히 교체할 때 활용
코드 예시

const myTag = document.querySelector('#list-1');
console.log(myTag.outerHTML);

콘솔창 출력 내용

3) textContent

원하는_element.textContent
원하는 요소 노드 내부의 코드를 html 태그를 제외한 문자열(줄바꿈 및 들여쓰기 포함)로 반환
'='으로 값을 할당하여 기존 값을 새로운 값으로 완전히 교체할 때 활용
단순 텍스트만 다루기 때문에 태그를 입력해도 그냥 특수문자('<' =꺽쇠)로 인식함
코드 예시

const myTag = document.querySelector('#list-1');
console.log(myTag.textContent);

콘솔창 출력 내용

🌳 활용 예시 - 객체 추가하기

예를 들어 자바스크립트로 html 파일의 리스트에 새로운 객체를 추가하고 싶다면 아래와 같이 작성하면 됩니다.

querySelector로 리스트를 선택
createElement로 새로운 li 요소 생성
textContent로 li 태그 안에 새로운 내용을 할당
append()로 리스트의 마지막에 해당 요소를 추가

const toDoList = document.querySelector("#list-1");

function addNewTodo(text) {
  const last = document.createElement("li");
  last.textContent = text;
  toDoList.append(last);
}

addNewTodo("Russian Blue");

결과 화면은 다음과 같습니다.

새로운 값인 "Russian Blue"가 첫 번째 리스트의 마지막 항목으로 추가된 것을 볼 수 있습니다.

읽어주셔서 감사합니다:)