HTML DOM 속성 속성

<시간/>

HTML 태그 내의 속성과 관련된 HTML DOM 속성 속성은 NamedNodeMap 유형의 객체 형태로 주어진 노드의 속성 컬렉션을 반환합니다. 이러한 노드에 액세스하기 위해 인덱스 번호를 사용할 수 있습니다. 인덱싱은 0부터 시작합니다.

구문

다음은 HTML DOM 속성 속성에 대한 구문입니다 -

node.attributes

예시

속성 속성의 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<body>
<p>Click the button the second attribute of the below list</p>
<button id="Btn" onclick="attributeFunc()">ATTR NAME</button>
<button id="Btn" onclick="attrLength()">ATTR LENGTH</button>
<ol id="LIST" type="A" start="5" reversed>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ol>
<p id="SAMPLE"></p>
<script>
   function attributeFunc() {
      var x = document.getElementById("LIST").attributes[2].name;
      document.getElementById("SAMPLE").innerHTML = x;
   }
   function attrLength(){
      var x = document.getElementById("LIST").attributes.length;
      document.getElementById("SAMPLE").innerHTML = x;
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 속성 속성

ATTR NAME 버튼을 클릭한 후 -

HTML DOM 속성 속성

ATTR LENGTH 버튼을 클릭한 후 -

HTML DOM 속성 속성

위의 예에서 -

먼저 속성 id, type 및 reversed 속성으로 정렬된 목록을 만들었습니다.

<ol id="LIST" type="A" start="5" reversed>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
</ol>

그런 다음 각각 attributeFunc() 및 attrLength() 함수를 실행하기 위해 두 개의 버튼 ATTR NAME 및 ATTR LENGTH를 만들었습니다.

<button id="Btn" onclick="attributeFunc()">ATTR NAME</button>
<button id="Btn" onclick="attrLength()">ATTR LENGTH</button>

attributeFunc() 함수는 연결된 ID가 "LIST"인 요소를 가져오고 attributes.name 속성이 있는 두 번째 속성 이름을 가져옵니다. 두 번째 색인의 속성 이름은 id가 "Sample"인 단락에 표시됩니다. -

function attributeFunc() {
   var x = document.getElementById("LIST").attributes[2].name;
   document.getElementById("SAMPLE").innerHTML = x;
}

attrLenght() 함수는 또한 연결된 id "LIST"를 가진 요소를 가져오고 특정 요소가 attributes.length를 사용하여 갖고 있는 속성의 수를 가져옵니다. 이 경우 우리의 경우 4를 반환합니다. 값 4는 ID가 SAMPLE −

인 단락에 표시됩니다.

function attrLength(){
   var x = document.getElementById("LIST").attributes.length;
   document.getElementById("SAMPLE").innerHTML = x;
}