NodeList, HTMLCollection 및 NamedNodeMap(코드)의 사용 이해-HTML 튜토리얼-php.cn

NodeList, HTMLCollection 및 NamedNodeMap(코드)의 사용 이해

云罗郡主

풀어 주다： 2018-10-17 14:53:48

앞으로

2045명이 탐색했습니다.

이 글의 내용은 NodeList, HTMLCollection, NamedNodeMap의 사용(코드)에 대한 내용입니다. 참고가 필요한 친구들이 참고하시면 좋을 것 같습니다.

이 세 가지는 모두 배열과 유사한 객체입니다.

HTMLCollection에는 요소 노드만 포함되고 NodeList에는 모든 노드 유형이 포함됩니다.
HTMLCollection 객체는 item() 및 명명된Item() 메서드를 호출할 수 있고, NodeList 객체는 item() 메서드만 호출할 수 있습니다. 요소를 가져올 때 두 가지 모두 대괄호 구문이나 item() 메서드를 통해 수행할 수 있습니다. HTMLCollection 객체를 사용하면 명명된Item() 메서드를 통해 이름이나 ID를 전달하여 요소를 얻을 수 있습니다.
이전 브라우저의 일부 메소드(예: getElementsByClassName())는 HTMLCollection 객체 대신 NodeList 객체를 반환합니다. 모든 브라우저의 childNodes 속성은 NodeList 객체를 반환합니다. 대부분의 브라우저의 querySelectorAll()은 NodeList 객체를 반환합니다. getElementsByTagName()은 HTMLCollection 객체를 반환합니다.
namedNodeMap 객체는 node.attributes 속성을 통해 얻어지며, 요소의 모든 속성으로 구성된 의사 배열 객체를 얻습니다.

예:

<body>
<p>
  <a href="#" id="a1">1</a>
  <a href="a.html" name="a2">2</a>
</p>
</body>
<script>
	// 获取一个HTMLCollection对象
	var res = document.getElementsByTagName("a");
	console.log(res);
	console.log(res.item(0))
	console.log(res[0])
	console.log(res.namedItem(&#39;a1&#39;))
	console.log(res.namedItem(&#39;a2&#39;))
	// 结果如下图所示：
</script>

로그인 후 복사

NodeList, HTMLCollection 및 NamedNodeMap(코드)의 사용 이해