Javascript : DOM요소에 접근하기 / 속성 가져오기 / 수정하기

소현·2025년 2월 13일

🍵 DOM트리★

부모와 자식구조로 태그들의 구조를 표현하면 마치 나무형태가 되어 'DOM트리'라고 하고 트리에서 가지가 갈라져 나온 항목을 '노드(node)'라고 한다. dom트리의 시작 부분인 html노드를 나무 뿌리에 해당한다고 하여 '루트(root)노드'라고 하고 루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층구조를 이룬다. 따라고 각 노드사이의 관계를 부모와 자식, 형제로 표현할 수 있다. 부모노드(parent)에는 자식노드(childe)가 있고, 부모노드가 같은 형제노드(sibling)노드가 있다.

[DOM을 구성하는 기본 원칙]★
1. 모든 HTML태그는 요소(element)노드이다.
2. html태그에서 사용하는 텍스트 내용은 자식노드인 텍스트(text)노드이다.
3. html태그의 속성은 자식노드인 속성(attribute)노드이다.
4. 주석은 주석(comment)노드이다.

🍵 DOM요소에 접근하고 속성 가져오기★

1. getElementById()메서드

해당 아이디를 가지고 있는 태그를 선택해 가져온다.
메서드에 이미 id를 가지고 온다는 사실을 명시하고 있으므로 #은 쓰지 않는다.

[기본형]
document.getElementById('아이디명')

2. getElementByClassName() 메서드

지정한 클래스 선택자 이름이 들어있는 html 요소에 접근
메서드 이름에 클래스 이름을 가지고 오겠다고 명시했으므로 .은 붙이지 않는다. 메서드로 태그를 불러오면 클래스 이름이 같은 DOM요소들을 HTMLCollection 객체에 배열과 비슷한 형태로 저장하고 배열처럼 인덱스 번호도 부여된다. 배열처럼 사용할 수 있으나 배열은 아니다.

[기본형]
document.getElementByClassName('클래스명')

3. getElementByTagName() 메서드

class나 id로 이름이 지정되지 않은 일반 태그를 불러올 때 사용
특정 태그를 한번에 불러올 때 사용하며 HTMLCollection 객체에 저장된다.

[기본형]
getElementByTagName('태그명')

4. querySelector() 메서드, querySlectorAll() 메서드

getElementBy~ 메서드의 반환값(저장장소)는 HTMLCollection 객체이다. 여기에는 HTML요소('p'나 'a'같은 형태)만 저장된다. DOM트리의 텍스트나 속성노드까지 접근하고 제어하려면 querySelector(), querySlectorAll()를 사용

id선택자처럼 반환값이 1개라면 querySelector()
class선택자나 태그명 선택자처럼 반환값이 여러개라면 querySlectorAll() 사용

querySelector() 또는 querySlectorAll() 로 선택자를 표현할 때는 #과 .을 붙여야 하며 태그는 기호 없이 불러온다.

querySelector, querySlectorAll로 데려오는 모든 반환값은 NodeList라는 공간에 저장되고 배열과 비슷한 형태이나 배열은 아니다.

[기본형]

querySelector는 제일 먼저 등장하는 태그 1개를 가져온다.
document.querySelector('#아이디명');
document.querySelector('.클래스명');
document.querySelector('태그명');

해당 클래스명이나 태그를 모두 가져올 때
document.querySelectorAll('.클래스명');
document.querySelectorAll('태그명');

<h2 class="heading" id="title">제목</h2>
<h3 class="heading">제목2</h3>
<h3 class="heading">제목2</h3>
<h3 class="heading">제목2</h3>
<h3 class="heading">제목2</h3>

<!-- js -->
<script>
  // 클래스명으로 가져오기
  const heading = document.getElementsByClassName("heading");
  console.log(heading);
  // 태그명으로 가져오기
  const h3Tag = document.getElementsByTagName("h3");
  console.log(h3Tag);
  // 노드를 이용해 클래스명으로 가져오기
  const headingTag = document.querySelectorAll(".heading");
  console.log(headingTag);
  // 노드를 이용해 태그명으로 가져오기
  const headingId = document.querySelector("#title");
  console.log(headingId);
  // 노드를 이용해 태그명으로 가져오기
  const headingTagName = document.querySelectorAll("h3");
  console.log(headingTagName);
</script>

🍵 웹 요소의 내용을 수정하는 프로퍼티

html태그 안에 들어있는 src나 alt 같은 속성들은 attribute(node)라고 표현하고
자바스크립트 객체에서 사용하는 속성들은 property라고 한다.
자바스크립트에서는 웹 요소의 내용을 수정할 수 있다.
가장 쉬운 방법은 innerText나 innerHTML 프로퍼티를 이용한다.
innerText는 텍스트 수정, innerHTML은 태그까지 반영하여 내용을 수정한다.