[자바스크립트 22] DOM 조작 1(선택)

오늘은 DOM 을 조작하는 방법에 대해 물어보았다. 먼저 DOM 을 선택하는 것부터 시작!

 

자바스크립트에서는 다양한 방법으로 DOM 요소를 선택할 수 있습니다. 다음은 몇 가지 방법입니다.

 

1. getElementById: 아이디를 통해 요소를 선택합니다. 아이디는 페이지 내에서 유일해야 합니다.

let element = document.getElementById("myId");

// Id 를 기준으로 찾아온다. Id는 고유하니까 당연히 유일한 요소만 선택된다

 

 

2. getElementsByClassName: 클래스 이름을 통해 요소를 선택합니다. 여러 요소가 선택될 수 있으므로 반환 값은 HTMLCollection입니다.

let elements = document.getElementsByClassName("myClass");

// class 를 기준으로 찾아온다. class 는 고유하지 않으니까 당연히 같은 class 쓰는 모든 요소가 선택된다

// 주의 : 반환 값은 HTMLCollection 이다. 하단 참조

 

 

3. getElementsByTagName: 태그 이름을 통해 요소를 선택합니다. 여러 요소가 선택될 수 있으므로 반환 값은 HTMLCollection입니다.

let elements = document.getElementsByTagName("p");

// 태그 종류를 기준으로 찾아온다. p 가 여러개 있을 수 있으므로 당연히 모든 요소가 선택된다.

// 주의 : 역시 반환 값은 HTMLCollection 이다. 하단 참조

 

4. querySelector: CSS 선택자를 통해 요소를 선택합니다. 첫 번째로 일치하는 요소만 반환됩니다.

let element = document.querySelector(".myClass");

// CSS 선택자 기준이다. 따라서 #아이디, .클래스 도 되고 p img 이런 것도 된다

// 주의 : 여러 요소가 있을 경우 맨 처음 것만 선택된다!

 

 

5. querySelectorAll: CSS 선택자를 통해 요소를 선택합니다. 일치하는 모든 요소를 NodeList로 반환합니다.

let elements = document.querySelectorAll(".myClass");

// querySelector 와 동일하나 모든 요소를 찾아준다

// 주의 : 반환 값은 NodeList 이다. 하단 참조

 

 

이 방법들은 모두 document 객체에 속해 있으며, 웹 페이지의 DOM에 액세스하고 조작하는 데 사용됩니다.

이들 메소드를 사용하여 선택한 요소는 자바스크립트를 통해 스타일을 변경하거나, 텍스트를 수정하거나, 새로운 요소를 추가하거나 삭제하는 등 다양한 작업을 수행할 수 있습니다.

 

// HTMLCollection 과 NodeList 의 공통점 차이점 정리.. 모르면 낭패본다

 

HTMLCollection	NodeList
모두 유사 배열 객체 (배열 비슷한 거임 그냥)
모두 이터러블 (반복가능 하다는 소리임 그냥)
모두 배열로 변환가능 (이러는 편이 신상에 좋을듯?)
Live 객체 (객체가 실시간으로 대상 요소 변화 추적 반영)	non-Live 객체 (선택해 온 순간에 고정 static)
forEach 사용 불가	forEach 사용 가능
getElements어쩌구() 사용시 반환	querySelectorAll() 사용시 반환

 

// 그렇다. GPT 쌤은 뭐라고 하시나 들어보자

 

1. getElementsByClassName(className): 이 메소드는 주어진 클래스 이름에 해당하는 모든 요소를 HTMLCollection 형태로 반환합니다. HTMLCollection은 'live' 컬렉션으로, 원본 DOM의 변화를 실시간으로 반영합니다. 즉, HTML 문서가 변경되면 반환된 HTMLCollection도 자동으로 업데이트됩니다.

 

예시:

let elements = document.getElementsByClassName('my-class');
console.log(elements.length); // 'my-class' 클래스를 가진 요소의 수

// 'my-class' 클래스를 가진 새 요소를 추가
let newElement = document.createElement('div');
newElement.className = 'my-class';
document.body.appendChild(newElement);

console.log(elements.length); // 요소가 추가되어 길이가 증가함

 

2. querySelectorAll(selector): 이 메소드는 주어진 CSS 선택자에 해당하는 모든 요소를 NodeList 형태로 반환합니다.

반환된 NodeList는 'static'으로, 원본 DOM의 변화를 반영하지 않습니다. 즉, NodeList가 생성된 이후의 DOM 변화는 반영되지 않습니다.

 

예시:

let elements = document.querySelectorAll('.my-class');
console.log(elements.length); // 'my-class' 클래스를 가진 요소의 수

// 'my-class' 클래스를 가진 새 요소를 추가
let newElement = document.createElement('div');
newElement.className = 'my-class';
document.body.appendChild(newElement);

console.log(elements.length); // 요소가 추가되었지만 길이는 변하지 않음

이와 같이 두 메소드의 차이점은 반환하는 컬렉션의 'live' 여부와, 어떤 요소를 선택할 수 있는지에 있습니다. getElementsByClassName()은 클래스 이름으로 요소를 선택하지만, querySelectorAll()은 더 다양한 CSS 선택자를 사용할 수 있습니다.

 

// 그렇다고 한다..

// 추가로 배열로 변환하는 법을 알아보자

let 찾은거 = document.querySelectorAll('.찾을클래스명');
let 변환_1 = Array.from(찾은거);
let 변환_2 = [...찾은거];

// 참고 : querySelectorAll 의 경우 forEach 만 된다. map, reduce, filter 이런건 안된다!