JS [DOM]

1. DOM 개념 소개

• DOM이란: HTML 문서의 구조를 계층적으로 표현한 모델입니다. 문서를 트리 구조로 표현하여, 각 요소(태그)를 객체로 다룰 수 있게 합니다.
• DOM과 JavaScript: JavaScript를 이용해 DOM을 조작하면 웹 페이지의 동적인 변화를 실시간으로 구현할 수 있습니다.

2. DOM 접근 방법

• document.getElementById(): ID로 요소를 찾는 방법.
• document.querySelector()와 querySelectorAll(): CSS 선택자를 사용해 요소를 선택하는 방법.
• document.getElementsByClassName()와 document.getElementsByTagName(): 클래스명과 태그명을 통해 여러 요소를 선택하는 방법.

  <div id="parent">
    Text 
    <div id="parent">div 두번째 Text</div>
    <div class = "box">div 세번째 Text</div>
  </div>
 
    <script>
    특정 ID의 요소 선택
    // 예시: 특정 ID의 요소 선택
    let parent = document.getElementById("parent");
    // 클래스 선택
    let boxQuerySelector = document.querySelector(".box");
    // 클래스 및 태그 전체를 가져올 수있다.
    let liAll = document.querySelectorAll("li");
    

    console.log("parent : ",parent);
    console.log("boxQuerySelector",boxQuerySelector);
    console.log("liAll",liAll)
    </script>
    
    </body>

 

* ID 또는 Class 값을 가져와서 어떤 작업을 할 수 있을까?

• 스타일 또는 이벤트를 동적으로 처리가 가능하고 추가적인 특정 작업이 수행 가능하다.

// 특정 id의 요소의 배경색 변경
let divBox = document.getElementById('divBox');
divBox.style.backgroundColor = 'lightblue';

// 특정 class의 요소들의 글자 크기 변경
let divClass = document.getElementsByClassName('divClass');
for(let i = 0; i < divClass.length; i++) {
  divClass[i].style.fontSize = '20px';
}

 

getElementsByClassName vs querySelector 둘의 차이는 무엇이고 어떤 상황에 무엇을 써야할까?

- 둘다 HTML 요소를 선택할 때 사용하는 메서드는 맞지만 방식과 반환하는 값이 다르다.

1. getElementsByClassName 

• 주어진 클래스 이름을 가진 모든 요소를 선택하여 HTMLCollection 객체로 반환한다.
• 배열처럼 생겼지만 완전한 배열은 아니다.
• DOM에서 요소가 변경될 경우 자동으로 반영되며 다수의 요소를 반환하므로 반복문을 사용할 때 는 개별 적으로 접근해야한다.
• 특정 클래스 이름만 선택할 수 있다.
• 단일 클래스 선택 또는 특정 클래스가 많은 요소에 적용된 경우 유리함.

  let myCls = document.getElementsByClassName('myCls');
  console.log(myCls.length);
  for(let i = 0; i < myCls.length;i++) {
    myCls[i].style.color = 'blue';
  }

2. querySelector()

• 기능 : CSS 선택자를 사용하여 요소를 선택합니다. 주어진 선택자와 일치하는 첫 번째 요소만 반환한다.
• 반환 값 : 일치하는 첫 번째 요소 또는 요소가 없으면 NULL 을 반환한다.

특징

• CSS 선택자를 사용할 수 있어 유연성이 뛰어나고 클래스,ID,속성,자식 요소 등의 복합적인 조건 사용이 가능하다.
• 단일 요소 선택에 적합하다. 첫 번째로 일치하는 요소만 선택되므로 다수의 요소를 대상으로 할 때는 부적합하다.

let myCls = document.querySelector('.myCls');
myCls.style.color = 'blue'; // 첫 번째로 일치하는 요소의 텍스트 색을 파란색으로 변경

HTMLCollection과 NodeList 에 대해 알아보자

1. HTMLCollection

• getElementsByClassName(), getElementsByTagName(), getElementsByName() 해당 메서드를 통해 반환

특징

• 실시간 업데이이트 : DOM에서 요소가 추가되거나 제거되면 변화가 자동으로 반영된다.
• DOM 내의 HTML 요소들만 포함한다.
• 인덱스를 사용해 배열처럼 접근이 가능하고 length 속성을 이용해 개수를 사용할 수 있지만 배열 메서드를 사용하는 건 불가능 하다 (forOf, forEach,map())

2. NodeList

• querySelectorAll(), childNodes 같은 메서드에 의해 변환된다.
• DOM의 모든 노드를 포함하며 요소뿐만 아니라 텍스트 노드나 주석 노드도 포함된다.

특징

• 정적(Static) 또는 실시간 : 대부분 경우 정적이며 DOM 이 변경되어도 처음 선택한 요소들의 상태를 유지한다
  하지만 ChildNodes 에서 반환되는 NodeList 는 실시간으로 반영된다.
• 텍스트 노드,주석 등 모든 DOM 노드를 포함
• 배열과 유사 하여 length 속성과 인덱스를 사용해 접근하며 배열 메서드도 사용 가능하다 하지만 map(),filter() 다른 배열 메서드는 사용할 수 없다.

언제 어떤 것을 사용하면 좋을까?

HTMLCollection을 사용할 때

• DOM 이 자주 변경되고 그 변화를 실시간으로 반영해야할 때
  ex) 코로나 확진자 수(실시간으로 값이 변해야하기 때문에)
• HTML 요소만 선택할 때

NodeList를 사용할 때

• 정적인 상태에서 요소들을 선택하고 작업할때
• 배열 메서드 forEach() 등을 간편하게 사용하고 싶을 때

3. DOM 조작

• 요소 추가 및 제거
  • createElement(): 새로운 HTML 요소를 생성.
  • appendChild(): 생성된 요소를 DOM에 추가.
  • removeChild(): DOM에서 요소 제거.

// 새로운 <p> 요소를 생성
const newParag = document.createElement('p');

// 생성된 <p> 요소에 텍스트 내용 추가
newParag.textContent = '이것은 새로운 문단입니다.';

2. appendChild(): 생성된 요소를 DOM에 추가

appendChild()는 선택한 부모 요소에 새로 생성한 자식 요소를 추가할 때 사용합니다.

// 새로운 <p> 요소를 생성
const newParagraph = document.createElement('p');
newParagraph.textContent = '이것은 새로운 문단입니다.';

// 부모 요소 선택 (예: <div id="container">)
const container = document.getElementById('container');

// 부모 요소에 새로 생성한 <p> 요소 추가
container.appendChild(newParagraph);

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

removeChild(): DOM에서 요소 제거

removeChild()는 선택한 부모 요소에서 자식 요소를 제거할 때 사용됩니다.

// 부모 요소 선택 (예: <div id="container">)
const container = document.getElementById('container');

// 제거할 자식 요소 선택 (예: 첫 번째 <p> 요소)
const firstParagraph = container.getElementsByTagName('p')[0];

// 부모 요소에서 자식 요소 제거
container.removeChild(firstParagraph);

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.