Programing

NodeList는 언제 라이브이고 언제 정적입니까?

lottogame 2020. 12. 30. 07:40
반응형

NodeList는 언제 라이브이고 언제 정적입니까?


NodeList의 MDN에서 :

경우에 따라 NodeList는 라이브 컬렉션이므로 DOM의 변경 사항이 컬렉션에 반영됩니다. 예를 들어 Node.childNodes는 라이브입니다.

 var parent = document.getElementById('parent');
 var child_nodes = parent.childNodes;
 console.log(child_nodes.length); // let's assume "2"
 parent.appendChild(document.createElement('div'));
 console.log(child_nodes.length); // should output "3"

다른 경우, NodeList는 정적 컬렉션입니다. 즉, DOM의 후속 변경 사항이 컬렉션의 콘텐츠에 영향을주지 않습니다. document.querySelectorAll은 정적 NodeList를 반환합니다.

그래서 .... 좀 짜증나! DOM API의 모든 다양한 부분을 개별적으로 확인할 필요없이 어떤 메서드가 라이브 목록을 반환하고 어떤 메서드가 정적 목록을 반환하는지에 대한 중앙 참조가 있습니까? 어떤 거기에 규칙 여기에 직장은?


각 메소드에 대한 정보는 그것이 라이브인지 아닌지에 대한 세부 사항이지만 그것을 결정하기위한 표준 규약이없는 것 같습니다.

document.getElementsByClassName()HTMLCollection이며 라이브입니다.

document.getElementsByTagName()HTMLCollection이며 라이브입니다.

document.getElementsByName()이며 NodeList라이브입니다.

document.querySelectorAll()이며 라이브 NodeList아닙니다 .

HTMLCollections는 항상 라이브 인 것처럼 보입니다.

HTMLCollection은 노드 목록입니다. 개별 노드는 서수 색인이나 노드의 이름 또는 ID 속성으로 액세스 할 수 있습니다.

참고 : HTML DOM의 컬렉션은 기본 문서가 변경 될 때 자동으로 업데이트됨을 의미하는 라이브로 간주됩니다.

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506

따라서 HTML 컬렉션은 항상 "dom"에있는 반면 a nodeList는 DOM에있을 수도 있고 없을 수도있는보다 일반적인 구조입니다.

NodeList 객체는 노드 모음입니다 ... NodeList 인터페이스는이 모음이 구현되는 방법을 정의하거나 제한하지 않고 정렬 된 노드 모음의 추상화를 제공합니다. DOM의 NodeList 객체는 라이브입니다.

http://www.w3.org/TR/DOM-Level-3-Core/core.html#td-live

좋아, 그렇지?

컬렉션은 DOM 노드 목록을 나타내는 개체입니다. 컬렉션은 라이브 또는 정적 일 수 있습니다. 달리 명시되지 않는 한 컬렉션은 라이브 여야합니다.

http://www.w3.org/TR/2012/WD-dom-20120405/#collections

따라서 정적 컬렉션은 사양에 그대로 표시됩니다. 따라서이 논리에 따르면 document.querySelectorAll()컬렉션이 있지만 DOM 에는 없습니다 . 컬렉션이 라이브 일 수도 있고 아닐 수도 있지만 DOM의 컬렉션 라이브 여야하기 때문에 ...이 구분은 큰 도움이되지 않습니다.

다음은 a collection가 라이브 인지 확인하는 빠른 방법 입니다. 컬렉션 구성원의 복제본을에 추가하고 DOM(선택자와 일치) 길이가 변경되었는지 확인한 다음 제거합니다 (페이지에 영향을주지 않음).

데모

function isLive(collection) {
  if (collection.length < 1) {
    return undefined; //inconclusivw 
  }
  let body = document.getElementsByTagName('body')[0];
  let l1 = collection.length;
  let clone = collection.item(0).cloneNode();
  clone.style.display = "none";
  body.appendChild(clone);
  let l2 = collection.length;
  body.removeChild(clone);
  return l2 !== l1;
}



divs1 = document.getElementsByClassName('c');
console.log("document.getElementsByClassName('c'):",divs1.toString()); //"[object HTMLCollection]"


divs2 = document.querySelectorAll('.c');
console.log("document.querySelectorAll('.c'):     ",divs2.toString()); //"[object NodeList]"

divs3 = document.getElementsByName('mydiv');
console.log("document.getElementsByName('mydiv'): ",divs3.toString()); //"[object NodeList"]

console.log("isLive(divs1)",isLive(divs1)); //true
console.log("isLive(divs2)",isLive(divs2)); //false
console.log("isLive(divs3)",isLive(divs3)); //true
<html>

<body>
  <div class="c" name="mydiv">C1</div>
  <div class="c" name="mydiv">C2</div>
</body>

</html>


중앙 참조가 있는지 모르겠지만 다음은 반환 HTMLCollection및 라이브에 대해 알고있는 방법입니다 NodeList.

  • .getElementsByClassName
  • .getElementsByTagName
  • .getElementsByTagNameNS
  • .getElementsByName
  • .childnodes
  • .children

참조 URL : https://stackoverflow.com/questions/28163033/when-is-nodelist-live-and-when-is-it-static

반응형