HTML DOM attributes 속성 완벽 정리 – NamedNodeMap으로 노드 속성 다루기

HTML DOM의 attributes 속성은 HTML 태그 내부의 속성들과 연관되어 있으며, 특정 노드가 가진 모든 속성을 NamedNodeMap 타입의 객체 형태로 반환합니다. 반환된 컬렉션에 포함된 각 노드에는 인덱스 번호를 사용해 접근할 수 있으며, 인덱싱은 0부터 시작합니다.

문법(Syntax)

HTML DOM attributes 속성의 기본 문법은 다음과 같습니다.

node.attributes

예제(Example)

attributes 속성의 실제 사용 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<body>
<p>버튼을 클릭하면 아래 목록의 두 번째 속성 정보를 확인할 수 있습니다</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>

출력(Output)

위 코드를 실행하면 다음과 같은 화면이 나타납니다.

HTML DOM attributes 속성 완벽 정리 – NamedNodeMap으로 노드 속성 다루기

ATTR NAME 버튼을 클릭한 후 −

HTML DOM attributes 속성 완벽 정리 – NamedNodeMap으로 노드 속성 다루기

ATTR LENGTH 버튼을 클릭한 후 −

HTML DOM attributes 속성 완벽 정리 – NamedNodeMap으로 노드 속성 다루기

예제 동작 원리 상세 설명

1. 순서 있는 목록 생성

먼저 id, type, start, reversed 속성을 가진 순서 있는 목록(ordered list)을 생성했습니다.

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

2. 버튼 요소 추가

이어서 클릭 시 각각 attributeFunc() 함수와 attrLength() 함수를 실행하는 두 개의 버튼인 ATTR NAME과 ATTR LENGTH를 만들었습니다.

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

3. attributeFunc() 함수 − 특정 인덱스의 속성 이름 가져오기

attributeFunc() 함수는 id가 “LIST”인 요소를 가져온 뒤, attributes.name 속성을 사용해 해당 요소의 두 번째(인덱스 2) 속성 이름을 추출합니다. 추출된 속성 이름은 id가 “SAMPLE”인 단락(paragraph)에 표시됩니다.

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

4. attrLength() 함수 − 속성 개수 세기

attrLength() 함수 역시 id가 “LIST”인 요소를 가져오며, attributes.length를 사용해 해당 요소가 가진 속성의 총 개수를 구합니다. 위 예제에서는 총 4개의 속성(id, type, start, reversed)이 있으므로 결과값은 4가 되며, 이 값이 id가 SAMPLE인 단락에 표시됩니다.

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

정리

HTML DOM의 attributes 속성은 요소가 가진 모든 속성을 NamedNodeMap 객체로 한 번에 조회할 수 있는 강력한 도구입니다. 인덱스 접근(attributes[n])으로 특정 속성의 이름이나 값을 읽어올 수 있고, length 프로퍼티로 전체 속성 개수도 파악할 수 있어 동적으로 DOM을 분석하거나 조작할 때 유용하게 활용됩니다.