JavaScript 속성 노드란 무엇입니까?-프런트엔드 Q&A-php.cn

JavaScript 속성 노드란 무엇입니까?

青灯夜游

풀어 주다： 2022-02-16 18:39:39

원래의

3996명이 탐색했습니다.

자바스크립트에서 속성 노드는 HTML 요소의 속성을 나타내는 속성 객체를 의미하며, 속성 노드의 상수는 "ATTRIBUTE_NODE"로 표현되며, 이 상수는 "2"가 될 수 있습니다. 노드 유형을 결정하는 데 사용됩니다.

JavaScript 속성 노드란 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

DOM(Document Object Model)은 문서 개체 모델입니다. DOM 기술을 사용하면 요소를 동적으로 표시하거나 숨기고, 속성을 변경하고, 요소를 추가하는 등 웹 페이지에서 동적 변경을 실현할 수 있습니다. DOM 기술은 웹 페이지와의 사용자 상호 작용을 크게 향상시킵니다.

DOM 노드 유형

DOM 트리의 노드는 다양한 방식으로 분류될 수 있습니다. 노드의 수준에 따라 주로 조상 노드(현재 노드 위의 모든 노드의 총칭), 부모-자식 노드(상위 노드와 하위 노드 간의 관계를 나타냄), 자손 노드( 현재 노드 아래의 모든 노드의 총칭) 및 형제 노드(통칭하여 동일한 상위 노드를 가진 모든 노드라고 함) 등입니다.

노드 유형에 따라 주로 문서 노드, 요소 노드, 속성 노드, 텍스트 노드 및 주석 노드로 나눌 수 있습니다. 다양한 유형의 노드에는 특정 값을 나타내는 해당 상수가 있습니다. 이 상수는 일반적으로 사용되는 HTML DOM 노드의 상수 표현과 해당 노드가 나타내는 값을 아래 표에 표시합니다.

테이블: HTML DOM 노드 유형 및 해당 상수
노드 유형	노드 유형 상수	상수 값
문서 노드	DOCUMENT_NODE	9
요소 노드	ELEMENT_NODE	1
속성 노드	ATTRIBUTE_NODE	2
텍스트 노드	TEXT_NODE	3
댓글 노드	COMMENT_NODE	8

JS 속성 노드

HTML DOM에서 속성 노드는 HTML 요소의 속성을 나타내는 속성 객체입니다. 요소는 여러 속성을 가질 수 있습니다. 요소의 모든 속성은 NamedNodeMap이라는 순서가 지정되지 않은 컬렉션에 저장됩니다. NamedNodeMap의 노드는 이름이나 인덱스로 액세스할 수 있습니다.

DOM을 사용하여 HTML 문서 요소를 처리해야 하는 경우가 있습니다. 이 경우 속성 노드의 속성 및 관련 메서드를 사용해야 합니다. 속성 노드의 공통 속성과 관련 방법은 아래 표와 같습니다.

테이블: 속성 노드의 공통 속성 및 관련 메소드
Attribute/method	Description
nodeName \| name	속성 객체를 통해 참조하여 요소 속성의 이름을 반환
nodeValue \| value	속성 객체를 통해 요소 속성의 값을 참조, 설정하거나 반환
Item(노드 하위 첨자)	속성 노드 집합에 지정된 첨자가 있는 노드를 반환
lengh	속성 노드 집합의 노드 수를 반환합니다
nodeType	속성 node

의 유형 값을 반환합니다. 참고: 속성 이름과 nodeName은 동일한 효과를 가지며 값과 nodeValue는 동일합니다. 효과.

예: 속성 노드 조작.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>操作属性节点</title>
</head>
<body>
  <a href="ex7-1.html" title="document节点的应用" id="a1">document节点</a>
  <script>
          var oA = document.getElementById(&#39;a1&#39;);
          var aAttr = oA.attributes;//获取a元素的所有属性节点
          console.log(&#39;a元素具有以下属性节点：&#39;);
          for(var i = 0; i < aAttr.length; i++){//遍历a元素的所有属性节点
              console.log(aAttr[i]);
          }
          console.log(&#39;aAttr[0]节点类型为：&#39;+aAttr[0].nodeType);//获取第一个属性节点的类型值
          console.log(&#39;aAttr[0]节点名称为：&#39;+aAttr[0].nodeName);//获取第一个属性节点的节点名
          console.log(&#39;aAttr[0]节点值为：&#39;+aAttr[0].nodeValue);//获取第一个属性节点的节点值
  </script>
</body>
</html>

로그인 후 복사

item()을 사용하여 속성 노드 목록의 요소에 액세스할 수도 있습니다. aAttr[0]은 aAttr.item(0)과 동일합니다. 또한 aAttr[0].nodeName은 aAttr[0]과 동일합니다. 이름, aAttr [0].nodeValue는 aAttr[0].value와 동일합니다. 위의 코드를 Chrome 브라우저에서 실행한 결과는 그림 1과 같습니다.

JavaScript 속성 노드란 무엇입니까?