>웹 프론트엔드 >HTML 튜토리얼 >NodeList, HTMLCollection 및 NamedNodeMap(코드)의 사용 이해

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

云罗郡主
云罗郡主앞으로
2018-10-17 14:53:042074검색

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

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

  1. HTMLCollection에는 요소 노드만 포함되고 NodeList에는 모든 노드 유형이 포함됩니다.

  2. HTMLCollection 객체는 item() 및 명명된Item() 메서드를 호출할 수 있고, NodeList 객체는 item() 메서드만 호출할 수 있습니다. 요소를 가져올 때 두 가지 모두 대괄호 구문이나 item() 메서드를 통해 수행할 수 있습니다. HTMLCollection 객체를 사용하면 명명된Item() 메서드를 통해 이름이나 ID를 전달하여 요소를 얻을 수 있습니다.

  3. 이전 브라우저의 일부 메소드(예: getElementsByClassName())는 HTMLCollection 객체 대신 NodeList 객체를 반환합니다. 모든 브라우저의 childNodes 속성은 NodeList 객체를 반환합니다. 대부분의 브라우저의 querySelectorAll()은 NodeList 객체를 반환합니다. getElementsByTagName()은 HTMLCollection 객체를 반환합니다.

  4. 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(코드)의 사용 이해

위는 NodeList, HTMLCollection 및 NamedNodeMap의 사용(코드)에 대한 전체 소개입니다. HTML 비디오 튜토리얼에 대해 더 알고 싶다면 PHP에 주목하세요. 중국사이트.

위 내용은 NodeList, HTMLCollection 및 NamedNodeMap(코드)의 사용 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제