HTML DOM name 속성 완벽 정리 – 요소 속성 이름을 문자열로 가져오는 방법

HTML DOM의 name 속성은 요소가 가진 특정 속성(attribute)의 이름을 문자열 형태로 반환합니다. 예를 들어 <img> 태그에 설정된 src, alt 같은 속성의 실제 이름을 자바스크립트로 확인할 때 유용하게 사용됩니다.

기본 문법

name 속성은 아래와 같이 간단한 형태로 사용하며, 별도의 매개변수 없이 해당 속성의 이름을 문자열로 반환합니다.

elementAttribute.name

예제 코드

다음 예제는 페이지에 삽입된 이미지 요소의 첫 번째 속성 이름을 읽어와 화면에 출력하는 코드입니다. 버튼을 클릭하면 attributes[0].name을 통해 속성 이름이 무엇인지 확인할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM name</title>
<style>
    * {
        padding: 2px;
        margin: 5px;
    }
    form {
        width: 70%;
        margin: 0 auto;
        text-align: center;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-name</legend>
            <img src="https://www.tutorialspoint.com/data_communication_computer_network/images/dcn-mini-logo.jpg">
            <div id="divDisplay">img 요소에서 소스 경로로 사용되는 속성은 무엇일까요?</div>
            <input type="button" value="정답 보기" onclick="getAnswers()">
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    function getAnswers() {
        var ans = document.getElementsByTagName('img')[0].attributes[0].name;
        divDisplay.textContent = 'img 요소에서 소스 경로로 사용되는 속성은 "' + ans + '" 입니다';
    }
</script>
</body>
</html>

코드 설명

document.getElementsByTagName('img') : 문서 내 모든 <img> 요소를 배열 형태로 가져옵니다.
[0] : 첫 번째 img 요소를 선택합니다.
.attributes[0] : 해당 요소의 첫 번째 속성 노드에 접근합니다.
.name : 그 속성의 이름(예: src)을 문자열로 반환합니다.

실행 결과

'정답 보기' 버튼을 클릭하기 전 화면입니다.

HTML DOM name 속성 완벽 정리 – 요소 속성 이름을 문자열로 가져오는 방법

버튼을 클릭한 후에는 img 요소의 첫 번째 속성 이름인 src가 결과 영역에 표시됩니다.

HTML DOM name 속성 완벽 정리 – 요소 속성 이름을 문자열로 가져오는 방법

마무리

이처럼 HTML DOM의 name 속성을 활용하면 요소에 어떤 속성이 정의되어 있는지 동적으로 확인할 수 있습니다. 폼 유효성 검사나 동적 UI 구성 시 속성 정보를 조회해야 하는 상황에서 유용하게 활용할 수 있습니다.