querySelectorAll 및 getElementsBy* 메소드는 무엇을 반환합니까?

Question

getElementsByClassName(및 getElementsByTagName 및 querySelectorAll와 같은 유사한 함수)는 getElementById 똑같은 거야? 요소 배열을 반환하시겠습니까?

제가 묻는 이유는 getElementsByClassName를 사용하여 모든 요소의 스타일을 변경하려고 하기 때문입니다. 아래를 참조하세요.

//작동하지 않습니다
document.getElementsByClassName('myElement').style.size = '100px';

//공장
document.getElementById('myIdElement').style.size = '100px';

Answer 1

배열을 객체로 사용하고 getElementbyId getElementsByClassName는:

• getElementbyId은 Element 객체를 반환하거나 해당 ID를 가진 요소가 없으면 null을 반환합니다
• getElementsByClassName은 live HTMLCollection을 반환하며 일치하는 요소가 없으면 길이가 0
일 수 있습니다.

getElementsByClassName

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#getelementsbyclassname

ElementById 가져오기

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

코드에 다음 줄을 포함하세요:

예상대로 작동하지 getElementByClassName 하면 배열을 반환하고 해당 배열에는 getElementByClassName将返回一个数组，并且该数组不具有样式 属性，您可以通过迭代来访问每个元素 각 style 속성을 ​​반복하여 액세스할 수 있는 style 속성이 없기 때문입니다. 코드 >요소.

이것이 함수 getElementById 为您工作的原因，该函数将返回直接对象。因此，您将能够访问 style 속성입니다.

Answer 2

당신의 것getElementById 代码之所以有效，是因为 ID 必须是唯一的，因此该函数始终只返回一个元素（如果没有找到，则返回 null).

그러나 이러한 방법은 getElementsByClassName, getElementsByName, getItemByTagName 그리고 getElementsByTagNameNS 반복 가능한 요소 컬렉션을 반환합니다.

메서드 이름은 힌트를 제공합니다. getElement 暗示单数，而getElements는 복수형 을 의미합니다.

Methods querySelector a>도 단일 요소를 반환하고 querySelectorAll code>은 반복 가능한 컬렉션을 반환합니다.

Iterable 컬렉션은 NodeList 或 HTMLCollectionNodeList一个> 또는

HTMLCollection

one>. getElementsByName和 querySelectorAll 均指定返回 节点列表;其他 getElementsBy* 方法 指定返回 HTMLCollection

document.getElements…(…) 读取 style 및 NodeList 或 HTMLCollection 没有 style；只有 Element 具有 stylequerySelectorAll

둘 다 🎜노드 목록을 반환하도록 지정합니다 code> ;기타 🎜getElementsBy* 메소드🎜는 HTMLCollection을 반환하도록 지정합니다. code>, 그러나 일부 브라우저 버전에서는 이를 다르게 구현한다는 점에 유의하세요. 🎜 🎜이 두 컬렉션 유형은 요소, 노드 또는 유사한 유형과 동일한 속성을 제공하지 않으므로 🎜style 이유를 읽어보세요. 즉, 🎜NodeList 또는 🎜HTMLCollection에는 🎜style이 없으며 🎜Element에만 🎜style이 있습니다. 🎜

---

이 "배열과 유사한" 컬렉션은 액세스하기 위해 반복해야 하는 0개 이상의 요소 목록입니다. 배열처럼 반복할 수 있지만 noreferrer">s와 동일하지 않다는 점에 유의하세요. 数组

최신 브라우저에서는 Array.from

을 사용한 다음 forEach 및 반복 방법과 같은 기타 배열 방법을 사용할 수 있습니다. Array.from;那么您可以使用 forEach 으아악 Array.from 또는 반복 방법을 지원하지 않는 이전 브라우저에서도

을 사용할 수 있습니다. 그런 다음 실제 배열처럼 반복할 수 있습니다. 으아악 Array.prototype.slice.call자체를 반복할 수도 있지만 대부분의 경우 이러한 컬렉션은

live

(NodeList 或 HTMLCollectionMDN 문서, DOM 사양)입니다. 즉, DOM이 변경되면 업데이트됩니다. 따라서 반복하는 동안 요소를 삽입하거나 제거하는 경우 실수로 일부 요소를 건너뛰거나 무한 루프를 생성하지 않도록 주의하세요. MDN 문서에는 메소드가 라이브 컬렉션을 반환하는지 아니면 정적 컬렉션을 반환하는지 항상 표시해야 합니다. 예: :

으아악

간단한 NodeList 提供了一些迭代方法，例如现代浏览器中的 forEach 루프를 사용할 수도 있습니다:

으아악

내레이션: for.childNodes는

live

NodeList 및 .children은 .childNodes 产生一个 live NodeList 和 .children 生成一个 live HTMLCollectionlive

HTMLCollection을 생성하므로 이 두 getter도 다음으로 처리해야 합니다. 케어.

---

DOM 쿼리를 더 짧게 만들고 "요소" 및 "요소 컬렉션" 위에 추상화 계층을 생성하는 jQuery

와 같은 라이브러리가 있습니다. 🎜 으아악