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
'Programing' 카테고리의 다른 글
| WPF 창에서 현재 포커스가있는 요소 / 컨트롤 가져 오기 (0) | 2020.12.30 |
|---|---|
| C ++에서 안전한 물리 연산 입력 (0) | 2020.12.30 |
| VS2015- 'NuGetPackage'패키지가 올바르게로드되지 않았습니다. (0) | 2020.12.30 |
| 언제 multiprocessing.Pool.join을 호출해야합니까? (0) | 2020.12.30 |
| 오류 : EACCES : 권한이 거부되었습니다. (0) | 2020.12.30 |