NodeList vs HTMLCollection

NodeList와 HTMLCollection은 모두 DOM(문서 객체 모델)에서 여러 요소를 선택하여 반환할 때 사용되는 배열과 유사한(array-like) 객체입니다. 그러나 중요한 차이점이 있으며, 이 차이점에 따라 할 수 있는 일과 주의할 점이 달라집니다.

---

NodeList vs HTMLCollection: 차이점 및 활용 가능성

1. 핵심 차이: 실시간(Live) vs. 정적(Static)

이것이 두 객체의 가장 근본적인 차이점이며, 활용 방식에 큰 영향을 미칩니다.

• HTMLCollection (실시간 - Live)
  • DOM 구조의 변경 사항을 자동으로 실시간 반영합니다.
  • 예를 들어, HTMLCollection을 얻은 후에 DOM에서 해당 컬렉션에 포함될 요소가 추가되거나 제거되면, HTMLCollection 객체는 별도의 코드 실행 없이도 그 변경 사항을 즉시 반영합니다.
  • 할 수 있는 일: DOM이 동적으로 변경될 때마다 최신 상태의 요소 목록을 항상 유지해야 할 때 유용합니다. (예: getElementsByTagName으로 특정 태그의 개수를 지속적으로 모니터링).
• NodeList (대부분 정적 - Static)
  • **대부분 정적(Static)**입니다. (document.querySelectorAll()이 반환하는 NodeList가 대표적인 정적 NodeList입니다.)
  • NodeList가 생성된 시점의 DOM 스냅샷을 담고 있으며, 그 이후의 DOM 변경 사항(요소 추가/삭제 등)을 자동으로 반영하지 않습니다.
  • 예외: Node.childNodes 프로퍼티가 반환하는 NodeList는 실시간(live)입니다.
  • 할 수 있는 일: 특정 시점의 DOM 상태에 대한 고정된 목록이 필요할 때 사용합니다. 동적 변경 사항에 영향을 받지 않으므로 반복문 안에서 요소를 추가/삭제할 때 예기치 않은 동작을 줄일 수 있습니다.

2. 포함하는 노드 타입

• HTMLCollection
  • 오직 Element 노드(HTML 태그 요소)만 포함합니다. (예: <div>, <span>, <li> 등)
• NodeList
  • Element 노드뿐만 아니라 Text 노드(텍스트 내용), Comment 노드(주석) 등 모든 종류의 Node 타입을 포함할 수 있습니다. (예: parentNode.childNodes는 부모 요소의 모든 자식 노드를 포함하며, 텍스트 노드나 주석 노드도 포함될 수 있습니다.)

3. 사용 가능한 메서드 및 속성 (할 수 있는 일)

• 공통점 (두 객체 모두 가능한 일):
  • length 속성: 포함된 노드의 총 개수를 확인할 수 있습니다.
  • 인덱스 접근: collection[0], nodeList[1]와 같이 배열처럼 인덱스를 사용하여 특정 노드에 접근할 수 있습니다.
  • for...of 루프:ES6의 for...of 구문을 사용하여 쉽게 순회할 수 있습니다.
  • forEach() 메서드: forEach() 메서드를 사용하여 각 노드에 대해 콜백 함수를 실행할 수 있습니다. (단, 일부 구형 브라우저에서는 HTMLCollection에 forEach()가 없을 수 있으므로 Array.from() 등으로 배열로 변환 후 사용하는 것이 더 안전할 수 있습니다.)
• HTMLCollection에만 있는 것 (추가로 할 수 있는 일):
  • item(index) 메서드: collection.item(0)과 같이 인덱스를 통해 노드에 접근합니다. (인덱스 접근 collection[0]과 동일한 기능을 합니다.)
  • namedItem(name) 메서드: 컬렉션 내의 요소 중 name 또는 id 속성값이 주어진 이름과 일치하는 첫 번째 요소를 반환합니다.
• NodeList (특히 정적 NodeList)의 활용 팁 (추가로 할 수 있는 일):
  • NodeList는 forEach() 메서드를 직접 지원하므로 배열처럼 편리하게 순회할 수 있습니다.
  • NodeList를 Array.from(nodeList) 또는 스프레드 문법 [...nodeList]를 사용하여 실제 자바스크립트 배열로 변환하면, map(), filter(), reduce() 등 배열의 모든 강력한 메서드를 사용하여 데이터를 가공하거나 처리할 수 있습니다. 이는 정적 NodeList의 스냅샷 특성과 결합되어 예측 가능한 데이터 처리를 가능하게 합니다.

4. 생성되는 메서드 예시

• HTMLCollection을 반환하는 메서드:
  • document.getElementsByTagName()
  • document.getElementsByClassName()
  • element.getElementsByTagName() (특정 요소 기준)
  • element.getElementsByClassName() (특정 요소 기준)
  • element.children (프로퍼티)
     
• NodeList를 반환하는 메서드:
  • document.querySelectorAll() (정적 NodeList)
  • element.querySelectorAll() (정적 NodeList)
  • parentNode.childNodes (프로퍼티, 실시간 NodeList)
     

결론적으로, HTMLCollection은 DOM 변경을 실시간으로 반영하는 "살아있는" 목록이 필요할 때 사용하지만, Element만 포함하고 forEach 지원에 제약이 있을 수 있습니다. 반면 NodeList는 (주로 querySelectorAll을 통해 얻는 경우) "정적인" 스냅샷이지만 forEach를 지원하며 모든 노드 타입을 포함할 수 있습니다. 현대 자바스크립트 개발에서는 document.querySelectorAll()을 사용하여 정적인 NodeList를 얻은 후, 필요에 따라 Array.from() 등을 통해 실제 배열로 변환하여 배열의 풍부한 메서드를 활용하는 방식이 보편적입니다.

---

제공해주신 이미지의 appendChild()와 insertAdjacentElement()는 모두 DOM(문서 객체 모델)에 새로운 요소를 추가하는 데 사용되는 메서드입니다. 하지만 동작 방식, 삽입 위치 지정 방식, 그리고 인자로 받는 값에 중요한 차이가 있습니다.

appendChild()

• 무엇을 삽입하는가?: Node 객체를 삽입합니다. 이는 Element 노드(<div>, <span> 등)뿐만 아니라 Text 노드, Comment 노드 등 모든 종류의 노드가 될 수 있습니다.
• 어디에 삽입하는가?: 호출된 부모 요소의 가장 마지막 자식으로 삽입합니다. 항상 끝에 추가됩니다.
• 문법: parentNode.appendChild(newNode)
  • parentNode: 새로운 노드를 추가할 부모 요소.
  • newNode: 부모 요소의 자식으로 추가할 Node 객체.
• 특징:
  • 단 하나의 노드만 인자로 받을 수 있습니다.
  • 새로운 노드가 성공적으로 추가되면, 추가된 newNode 객체 자체를 반환합니다.
  • DOM 조작의 가장 기본적인 메서드 중 하나입니다.

예시:

JavaScript

 

// HTML: <div id="parent">
//         <p>기존 자식</p>
//       </div>

const parentDiv = document.getElementById('parent');
const newChildDiv = document.createElement('div');
newChildDiv.textContent = '새로운 마지막 자식';

parentDiv.appendChild(newChildDiv);

// 결과 HTML:
// <div id="parent">
//   <p>기존 자식</p>
//   <div>새로운 마지막 자식</div>
// </div>

insertAdjacentElement()

• 무엇을 삽입하는가?: 오직 Element 객체만 삽입합니다. (텍스트 노드나 주석 노드 등은 직접 삽입할 수 없습니다.)
• 어디에 삽입하는가?: **기준 요소(reference element)**의 상대적인 위치에 삽입합니다. 이 메서드는 HTML 문자열을 파싱하는 insertAdjacentHTML()과 달리, 이미 존재하는 Element 노드를 직접 삽입합니다.
• 문법: element.insertAdjacentElement(position, newElement)
  • element: 삽입의 기준이 될 요소.
  • position: 삽입할 위치를 나타내는 문자열 (네 가지 옵션: 'beforebegin', 'afterbegin', 'beforeend', 'afterend').
  • newElement: 삽입할 Element 객체.
• 특징:
  • 새로운 요소가 성공적으로 삽입되면, 삽입된 newElement 객체 자체를 반환합니다.
  • appendChild()보다 더 유연하게 요소를 삽입할 수 있으며, 형제 요소로 추가하거나 자식 요소의 맨 앞/뒤에 추가하는 것이 가능합니다.

예시:

JavaScript

 

// HTML: <div id="targetElement">
//         <span>원래 자식</span>
//       </div>

const targetElement = document.getElementById('targetElement');

// 1. 'beforebegin': targetElement 바로 앞에 형제로 삽입
const elementBefore = document.createElement('p');
elementBefore.textContent = '타겟 앞 형제';
targetElement.insertAdjacentElement('beforebegin', elementBefore);
// <p>타겟 앞 형제</p><div id="targetElement">...</div>

// 2. 'afterbegin': targetElement 안의 첫 번째 자식으로 삽입
const elementAfterBegin = document.createElement('h3');
elementAfterBegin.textContent = '타겟 안 첫 자식';
targetElement.insertAdjacentElement('afterbegin', elementAfterBegin);
// <div id="targetElement"><h3>타겟 안 첫 자식</h3><span>원래 자식</span></div>

// 3. 'beforeend': targetElement 안의 마지막 자식으로 삽입
const elementBeforeEnd = document.createElement('footer');
elementBeforeEnd.textContent = '타겟 안 끝 자식';
targetElement.insertAdjacentElement('beforeend', elementBeforeEnd);
// <div id="targetElement">...<span>원래 자식</span><footer>타겟 안 끝 자식</footer></div>

// 4. 'afterend': targetElement 바로 뒤에 형제로 삽입
const elementAfter = document.createElement('hr');
targetElement.insertAdjacentElement('afterend', elementAfter);
// <div id="targetElement">...</div><hr>

주요 차이점 요약

특징appendChild()insertAdjacentElement()

삽입 대상	모든 종류의 Node (Element, Text, Comment 등)	오직 Element 노드만
삽입 위치	호출된 부모 요소의 가장 마지막 자식으로 고정	기준 요소의 상대적인 4가지 위치 중 선택
호출 주체	부모 요소 (parentNode.appendChild(...))	기준이 되는 요소 (element.insertAdjacentElement(...))
인자	삽입할 노드 1개	위치 문자열, 삽입할 요소 1개
반환 값	삽입된 Node	삽입된 Element
유연성	자식 추가의 기본 기능	형제 또는 자식 위치에 대한 정교한 제어

Sheets로 내보내기

어떤 메서드를 사용할지는 새로운 노드를 어디에 배치하고 싶은지, 그리고 삽입하려는 대상이 Element 노드인지 아니면 다른 종류의 노드(예: 텍스트 노드)인지에 따라 결정됩니다. insertAdjacentElement()는 appendChild()보다 훨씬 다양한 위치에 노드를 삽입할 수 있는 유연성을 제공합니다.

---

insertAdjacentElement()와 append()는 모두 DOM에 요소를 추가하는 메서드이지만, 어떤 종류의 내용을 어디에 삽입하는지, 그리고 인자를 어떻게 받는지에 중요한 차이가 있습니다.

insertAdjacentElement()

• 무엇을 삽입하는가?: 오직 Element 객체만 삽입합니다. (텍스트 문자열은 직접 인자로 받을 수 없습니다.)
• 어디에 삽입하는가?: 특정 기준 요소(element)의 상대적인 4가지 위치(beforebegin, afterbegin, beforeend, afterend) 중 하나를 선택하여 삽입합니다. 이 때문에 기존 요소의 형제 노드(앞/뒤)로 삽입하거나, 기존 요소의 자식 노드(맨 앞/맨 뒤)로 삽입하는 등 정교한 위치 제어가 가능합니다.
• 문법: element.insertAdjacentElement(position, newElement)
  • element: 삽입의 기준이 될 요소.
  • position: 삽입할 위치를 나타내는 문자열.
  • newElement: 삽입할 Element 객체.
• 반환 값: 삽입된 Element 객체를 반환합니다.
• 예시:
  JavaScript

   

  // HTML: <div id="target">기준 요소</div>
  const target = document.getElementById('target');
  const newParagraph = document.createElement('p');
  newParagraph.textContent = '타겟 앞에 삽입될 단락';
  
  target.insertAdjacentElement('beforebegin', newParagraph);
  // 결과 HTML: <p>타겟 앞에 삽입될 단락</p><div id="target">기준 요소</div>
  

append()

• 무엇을 삽입하는가?: **여러 개의 Node 객체 (Element, Text 등) 또는 텍스트 문자열(DOMString)**을 인자로 받을 수 있습니다. 텍스트 문자열은 자동으로 Text 노드로 변환되어 삽입됩니다.
• 어디에 삽입하는가?: 호출된 부모 요소의 가장 마지막 자식으로 삽입합니다. 여러 인자를 넘기면 모두 마지막 자식들로 순서대로 추가됩니다.
• 문법: parentNode.append(nodeOrString1, nodeOrString2, ...)
  • parentNode: 새로운 노드 또는 텍스트를 추가할 부모 요소.
  • nodeOrStringX: 추가할 Node 객체 또는 텍스트 문자열.
• 반환 값: undefined를 반환합니다.
• 예시:
  JavaScript

   

  // HTML: <ul id="myList">
  //         <li>첫 번째 아이템</li>
  //       </ul>
  
  const myList = document.getElementById('myList');
  const newItem = document.createElement('li');
  newItem.textContent = '새로운 아이템';
  
  myList.append(newItem, '이것은 텍스트 노드입니다.', document.createElement('hr'));
  // 결과 HTML:
  // <ul id="myList">
  //   <li>첫 번째 아이템</li>
  //   <li>새로운 아이템</li>
  //   이것은 텍스트 노드입니다.
  //   <hr>
  // </ul>
  

주요 차이점 요약

특징insertAdjacentElement()append()

삽입 대상	오직 Element 노드만	Node (Element, Text 등) 및 DOMString(텍스트) 모두 가능
삽입 위치	기준 요소의 상대적인 4가지 위치 중 선택 (형제 또는 자식)	호출된 부모 요소의 가장 마지막 자식으로만 추가됩니다.
호출 주체	기준이 되는 요소 (element.insertAdjacentElement(...))	새로운 요소를 담을 부모 요소 (parentNode.append(...))
인자 개수	position 문자열 + 삽입할 Element 노드 1개	삽입할 노드/문자열 여러 개
반환 값	삽입된 Element 객체	undefined
유연성	형제/자식 위치에 대한 정교한 제어	여러 자식 요소(텍스트 포함)를 한 번에 추가하는 간결성

Sheets로 내보내기

어떤 메서드를 사용할지는 다음과 같은 상황을 고려하여 결정할 수 있습니다:

• 특정 위치에 정밀하게 요소를 삽입하고 싶다면 (beforebegin, afterend 등으로 형제 요소처럼): insertAdjacentElement()
• 부모 요소의 맨 마지막에 여러 자식 요소나 텍스트를 한 번에 추가하고 싶다면: append()

---

---

DOM 요소 조작 방법 요약

제공해주신 자료는 웹 페이지의 DOM(Document Object Model) 요소를 생성, 삽입, 교체, 제거하는 다양한 자바스크립트 방법에 대해 설명하고 있습니다. 브라우저 지원에 대한 고려 사항과 각 방법의 장단점도 함께 제시하고 있습니다.

---

1. 생성 및 삽입

DOM에 새로운 내용을 추가하는 방법은 크게 두 가지로 나뉩니다.

1.1. HTML 코드 추가하기 (문자열 방식)

• innerHTML:
  • 특정 요소의 innerHTML 속성에 HTML 문자열을 할당하면, 해당 요소의 기존 내용이 모두 완전히 새 내용으로 교체됩니다. 이는 요소 내 모든 HTML 객체를 제거한 후 새롭게 렌더링합니다.
     
  • 예시:
    JavaScript

     

    const root = document.getElementById('root-el');
    root.innerHTML = `
        <div>
            <h2>Welcome!</h2>
            <p>This is all created & rendered automatically!</p>
        </div>
    `;
    

• insertAdjacentHTML():
  • HTML 문자열을 파싱하여 DOM 노드로 변환한 다음, 특정 요소의 상대적인 위치에 삽입합니다. 기존 내용을 완전히 대체하지 않고 추가합니다.
     
  • 위치 옵션: beforebegin (요소 이전), afterbegin (요소 바로 안에서 처음 자식 이전), beforeend (요소 바로 안에서 마지막 자식 이후), afterend (요소 이후).
     
  • 장점: DOM 트리를 모두 재렌더링하지 않고 효율적으로 부분만 업데이트합니다.
     
  • 예시:
    JavaScript

     

    const root = document.getElementById('root-el');
    root.insertAdjacentHTML('afterbegin', `
        <div>
            <h2>Welcome!</h2>
            <p>This is all created & rendered automatically!</p>
        </div>
    `);
    

1.2. DOM 객체를 수동으로 생성하고 삽입하기 (객체 방식)

자바스크립트 코드로 직접 DOM 객체를 생성한 후, 이를 기존 DOM 트리에 추가하는 방식입니다.

 

• 장점: 생성된 DOM 객체에 직접 접근하여 프로퍼티를 설정하거나 이벤트 리스너를 추가하는 데 유용합니다.
   
• 단점: HTML 문자열 방식보다 더 많은 코드를 작성해야 합니다.
   

삽입하는 메서드:

• append():
  • 부모 요소의 가장 마지막 자식으로 하나 이상의 Node 객체 또는 텍스트 문자열을 추가합니다. 텍스트 문자열은 자동으로 텍스트 노드로 변환됩니다.
     
  • 예시:
    JavaScript

     

    const someParagraph = document.createElement('p');
    const root = document.getElementById('root-el');
    root.append(someParagraph); // root의 끝에 삽입
    

  • 브라우저 지원: 대부분의 최신 브라우저에서 잘 지원됩니다. IE에서는 appendChild()가 선호될 수 있습니다.
     
• prepend():
  • 부모 요소의 가장 첫 번째 자식으로 하나 이상의 Node 객체 또는 텍스트 문자열을 추가합니다.
     
  • 브라우저 지원: 대부분의 최신 브라우저에서 잘 지원됩니다. IE에서는 insertBefore()가 선호될 수 있습니다.
     
• before() / after():
  • before()는 대상 요소의 바로 앞에 형제 요소로 새로운 노드나 텍스트를 삽입합니다.
     
  • after()는 대상 요소의 바로 뒤에 형제 요소로 새로운 노드나 텍스트를 삽입합니다.
     
  • 브라우저 지원: 대부분의 최신 브라우저에서 지원되지만, IE와 Safari는 지원하지 않습니다. IE에서는 insertBefore() 또는 insertAdjacentElement()를 대신 사용할 수 있습니다.
     

중요 참고 사항 (삽입 시): 요소를 삽입할 때, 이미 DOM에 삽입된 요소를 다시 삽입하면 해당 요소가 새로운 위치로 이동하게 됩니다. 요소가 복사되는 것이 아닙니다. 요소를 복사하려면 someElement.cloneNode(true)와 같은 메서드를 사용해야 합니다.

 

---

2. 교체 (Replace)

DOM의 기존 요소를 다른 요소로 교체하는 방법입니다.

• replaceWith():
  • 대상 요소를 다른 노드나 텍스트 문자열로 교체합니다. 사용하기 간편합니다.
     
  • 브라우저 지원: 적절한 브라우저 지원을 제공하지만, IE는 예외입니다.
     
• replaceChild():
  • 부모 요소의 자식 노드 중 하나를 다른 노드로 교체합니다.
     
  • 브라우저 지원: 광범위한 브라우저 지원을 제공하지만, replaceWith()보다 코드를 더 많이 작성해야 합니다. IE를 사용한다면 이 메서드를 고려해 보세요.
     

---

3. 제거 (Remove)

DOM에서 요소를 제거하는 방법입니다.

• someElement.innerHTML = '':
  • someElement 내부의 모든 HTML 내용을 비워서 렌더링된 모든 자식 객체를 제거합니다.
     
• someElement.remove():
  • DOM에서 단일 요소(someElement)를 직접 제거합니다.
     
  • 브라우저 지원: 훌륭하지만 IE는 지원하지 않습니다. IE에서는 removeChild()를 대신 사용합니다.
     
• someElement.parentNode.removeChild(someElement):
  • 부모 요소에서 제공된 자식 요소(someElement)를 제거합니다.
     
  • 브라우저 지원: 광범위한 브라우저 지원을 제공하지만, remove()보다 더 많은 코드를 작성해야 합니다.
     

---

4. 텍스트 노드 처리

텍스트 노드를 생성하고 삽입하는 특별한 방법도 있습니다.

• someElement.textContent = '...':
  • 특정 요소의 textContent 속성에 문자열을 할당하면, 해당 요소의 모든 기존 내용을 지우고 새로운 텍스트 노드를 생성하여 삽입합니다.
     
  • 예시: someElement.textContent = 'Hi there!';
     
• 기존 텍스트에 추가:
  • someElement.textContent = someElement.textContent + 'More text!'; 와 같이 기존 textContent에 문자열을 연결하여 텍스트를 추가할 수 있습니다.