querySelectorAll 및 getElementsBy* 메소드는 무엇을 반환합니까?
P粉060112396
2023-08-24 19:45:56
<p><code>getElementsByClassName</code>(및 <code>getElementsByTagName</code> 및 <code>querySelectorAll</code>와 같은 유사한 함수)는 <code>getElementById</code> 똑같은 거야? 요소 배열을 반환하시겠습니까? </p>
<p>제가 묻는 이유는 <code>getElementsByClassName</code>를 사용하여 모든 요소의 스타일을 변경하려고 하기 때문입니다. 아래를 참조하세요. </p>
<pre class="brush:php;toolbar:false;">//작동하지 않습니다
document.getElementsByClassName('myElement').style.size = '100px';
//공장
document.getElementById('myIdElement').style.size = '100px';</pre></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
배열을 객체로 사용하고
getElementbyIdgetElementsByClassName는:getElementbyId은 Element 객체를 반환하거나 해당 ID를 가진 요소가 없으면 null을 반환합니다getElementsByClassName은 live HTMLCollection을 반환하며 일치하는 요소가 없으면 길이가 0getElementsByClassName
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속성입니다.당신의 것
getElementById代码之所以有效，是因为 ID 必须是唯一的，因此该函数始终只返回一个元素（如果没有找到，则返回null).그러나 이러한 방법은
getElementsByClassName,getElementsByName,getItemByTagName그리고getElementsByTagNameNS반복 가능한 요소 컬렉션을 반환합니다.메서드 이름은 힌트를 제공합니다.
getElement暗示单数，而getElements는 복수형 을 의미합니다.Methods
querySelectora>도 단일 요소를 반환하고querySelectorAll code>은 반복 가능한 컬렉션을 반환합니다.Iterable 컬렉션은
HTMLCollectionNodeList或HTMLCollectionNodeList一个> 또는one>.
getElementsByName和querySelectorAll均指定返回节点列表;其他getElementsBy*方法 指定返回 HTMLCollection
둘 다 🎜노드 목록을 반환하도록 지정합니다 code> ;기타 🎜getElementsBy* 메소드🎜는 HTMLCollection을 반환하도록 지정합니다. code>, 그러나 일부 브라우저 버전에서는 이를 다르게 구현한다는 점에 유의하세요. 🎜 🎜이 두 컬렉션 유형은 요소, 노드 또는 유사한 유형과 동일한 속성을 제공하지 않으므로 🎜style 이유를 읽어보세요. 즉, 🎜NodeList 또는 🎜HTMLCollection에는 🎜style이 없으며 🎜Element에만 🎜style이 있습니다. 🎜document.getElements…(…)读取style및NodeList或HTMLCollection没有style；只有Element具有stylequerySelectorAll이 "배열과 유사한" 컬렉션은 액세스하기 위해 반복해야 하는 0개 이상의 요소 목록입니다. 배열처럼 반복할 수 있지만 noreferrer">s와 동일하지 않다는 점에 유의하세요.
최신 브라우저에서는数组Array.from을 사용한 다음
forEach및 반복 방법과 같은 기타 배열 방법을 사용할 수 있습니다.Array.from;那么您可以使用forEach으아악 Array.from 또는 반복 방법을 지원하지 않는 이전 브라우저에서도을 사용할 수 있습니다. 그런 다음 실제 배열처럼 반복할 수 있습니다. 으아악
liveArray.prototype.slice.call자체를 반복할 수도 있지만 대부분의 경우 이러한 컬렉션은(
으아악NodeList或HTMLCollectionMDN 문서, DOM 사양)입니다. 즉, DOM이 변경되면 업데이트됩니다. 따라서 반복하는 동안 요소를 삽입하거나 제거하는 경우 실수로 일부 요소를 건너뛰거나 무한 루프를 생성하지 않도록 주의하세요. MDN 문서에는 메소드가 라이브 컬렉션을 반환하는지 아니면 정적 컬렉션을 반환하는지 항상 표시해야 합니다. 예: :간단한
으아악NodeList提供了一些迭代方法，例如现代浏览器中的forEach루프를 사용할 수도 있습니다:내레이션:
livefor.childNodes는NodeList및.children은.childNodes产生一个 liveNodeList和.children生成一个 liveHTMLCollectionliveHTMLCollection을 생성하므로 이 두 getter도 다음으로 처리해야 합니다. 케어.DOM 쿼리를 더 짧게 만들고 "요소" 및 "요소 컬렉션" 위에 추상화 계층을 생성하는 jQuery
와 같은 라이브러리가 있습니다. 🎜 으아악