querySelectorAll('li'), getElementsByTagName('li')

코드 내용은 <li> 태그를 가진 모든 요소를 문서에서 찾아내는 부분입니다.

1. const listItemElements = document.querySelectorAll('li');
2. const listItemElements = document.getElementsByTagName('li'); (이 줄이 강조되어 있습니다.)

그리고 이미지 하단의 한국어 설명 "이것만 요소의 변경 사항을 반영하는 실시간 목록을 제공합니다"는 바로 두 번째 방법인 document.getElementsByTagName('li')를 가리키고 있습니다.

이것이 의미하는 바는 다음과 같습니다.

• document.querySelectorAll('li'): 이 메서드는 코드가 실행되는 그 순간 문서에 존재하는 모든 <li> 요소들의 **정적인(static) 목록(NodeList)**을 반환합니다. 한번 목록이 만들어지면, 그 이후에 문서에서 새로운 <li> 요소가 추가되거나 기존의 <li> 요소가 제거되어도 이 목록은 자동으로 업데이트되지 않습니다. 즉, 스냅샷과 같습니다.
• document.getElementsByTagName('li'): 이 메서드는 문서에 존재하는 모든 <li> 요소들의 **실시간(live) 목록(HTMLCollection)**을 반환합니다. 이 목록은 문서의 DOM 구조와 연결되어 있어서, 코드가 실행된 이후에 문서에 새로운 <li> 요소가 추가되거나 기존의 <li> 요소가 제거되면, 이 목록은 자동으로 그 변경 사항을 반영하여 업데이트됩니다.

따라서 이미지의 설명은 document.getElementsByTagName (뿐만 아니라 document.getElementsByClassName 등)처럼 "실시간 목록"을 반환하는 메서드와 document.querySelectorAll처럼 "정적 목록"을 반환하는 메서드의 차이를 강조하며, DOM에 동적인 변경(요소 추가/삭제 등)이 발생할 경우 그 변경 사항을 자동으로 반영하는 것은 getElementsByTagName과 같은 "실시간 목록"을 반환하는 메서드뿐이라는 것을 알려주고 있습니다.

 

 

---

DOM에서 **실시간(live) 목록(HTMLCollection)**을 반환하는 주요 메서드 및 프로퍼티는 다음과 같습니다. 이들은 문서 구조의 변경 사항을 자동으로 반영합니다.

1. document.getElementsByTagName(tagName)
   • 특정 태그 이름(예: 'div', 'a', 'li')을 가진 모든 하위 요소를 문서 전체에서 찾아서 HTMLCollection으로 반환합니다.
   • 이미지에서 예시로 나온 document.getElementsByTagName('li')가 여기에 해당합니다.
2. element.getElementsByTagName(tagName)
   • document 객체뿐만 아니라 특정 요소(element)를 기준으로 그 요소의 하위 요소 중 특정 태그 이름을 가진 모든 요소를 찾아서 HTMLCollection으로 반환합니다.
3. document.getElementsByClassName(className)
   • 특정 클래스 이름(예: 'my-class')을 가진 모든 하위 요소를 문서 전체에서 찾아서 HTMLCollection으로 반환합니다.
4. element.getElementsByClassName(className)
   • 특정 요소(element)를 기준으로 그 요소의 하위 요소 중 특정 클래스 이름을 가진 모든 요소를 찾아서 HTMLCollection으로 반환합니다.
5. element.children
   • 이것은 메서드가 아니라 프로퍼티입니다. 특정 요소의 모든 **자식 요소(Element 타입 노드)**를 HTMLCollection으로 반환합니다. 텍스트 노드나 주석 노드 등은 포함되지 않습니다.

이 메서드들(getElementsByTagName, getElementsByClassName)과 프로퍼티(children)는 모두 실시간 HTMLCollection을 반환하기 때문에, 해당 컬렉션을 가져온 후에 DOM에 변화(요소 추가/삭제)가 생기면 컬렉션의 내용도 자동으로 최신 상태로 업데이트됩니다.

반면에 document.querySelectorAll()이나 element.querySelectorAll()은 앞서 설명드렸듯이 정적인(static) NodeList를 반환하므로, 한번 목록을 가져오면 그 이후의 DOM 변경 사항은 반영되지 않습니다. document.getElementById()는 하나의 요소 또는 null을 반환하므로 컬렉션과는 다릅니다.

 

 

---

네, ID를 찾는 document.getElementById()는 실시간 목록을 반환하지 않습니다.

이유는 간단합니다. document.getElementById()는 특정 id 값을 가진 요소를 찾아 반환하는 메서드인데, HTML 표준에 따르면 문서 내에서 id 값은 **유일(unique)**해야 합니다. 따라서 document.getElementById()는 결과로 단 하나의 요소 또는 해당하는 ID를 가진 요소가 없을 경우 null을 반환합니다.

실시간(live) 목록이라는 개념은 여러 개의 요소를 담는 컬렉션(예: HTMLCollection, NodeList)에서 그 목록의 내용이 DOM 변화에 따라 자동으로 업데이트되는 것을 의미합니다. document.getElementById()는 컬렉션이 아닌 단일 요소를 반환하므로, 실시간 목록이라는 개념 자체가 적용되지 않습니다.

물론, document.getElementById('some-id')를 호출한 시점에는 그 순간 DOM에 존재하는 요소를 찾아서 반환합니다. 만약 나중에 'some-id'라는 ID를 가진 요소가 DOM에 추가되거나 제거된 후 document.getElementById('some-id')를 다시 호출하면, 그 시점의 DOM 상태를 반영하여 새로운 요소가 반환되거나 null이 반환될 것입니다. 하지만 처음에 getElementById를 호출해서 얻은 요소 자체를 담고 있는 변수는 DOM 변화에 따라 자동으로 다른 요소로 바뀌거나 사라지거나 하지 않습니다.