HTML DOM nodeType 속성 완벽 정리 – 노드 유형 확인 방법

HTML DOM의 nodeType 속성은 해당 노드의 유형을 나타내는 숫자 값을 반환합니다. 이 속성을 활용하면 요소 노드, 텍스트 노드, 주석 노드 등 다양한 노드의 종류를 프로그래밍 방식으로 쉽게 구분할 수 있습니다.

문법(Syntax)

nodeType 속성은 다음과 같이 사용하며, 숫자 형태의 값을 반환합니다.

Node.nodeType

반환 값

nodeType 속성이 반환하는 값은 노드의 유형에 따라 다음과 같습니다.

1 : 요소 노드(Element Node)
2 : 속성 노드(Attribute Node)
3 : 텍스트 노드(Text Node)
8 : 주석 노드(Comment Node)

참고: HTML 문서 내의 공백(whitespace) 역시 텍스트 노드로 간주됩니다.

예제

다음 예제는 HTML DOM nodeType 속성을 사용하여 body 요소, input 요소, 주석 노드의 유형 값을 화면에 출력하는 코드입니다.

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM nodeType</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
           <legend>HTML-DOM-nodeType</legend>
           <label for="example">Example site: </label>
           <input id="urlSelect" type="url" name="urlAddress" value="https://www.example.com" disabled>
           <input type="button" onclick="getNodeTypes()" value="Get all Types">
           <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var urlSelect = document.getElementById("urlSelect");
    var commentNode = document.createComment("My Example URL");
    urlSelect.appendChild(commentNode);
    var divDisplay = document.getElementById("divDisplay");
    function getNodeTypes() {
        divDisplay.textContent = 'Body: '+document.body.nodeType;
        divDisplay.textContent += ' & input: '+urlSelect.nodeType;
        divDisplay.textContent += ' & comment: '+commentNode.nodeType;
}
</script>
</body>
</html>

실행 결과

위 코드를 실행하면 초기 화면에는 URL 입력 필드와 [Get all Types] 버튼이 표시됩니다.

HTML DOM nodeType 속성 완벽 정리 – 노드 유형 확인 방법

[Get all Types] 버튼을 클릭하면 body 노드는 1(요소 노드), input 노드는 1(요소 노드), 주석 노드는 8(주석 노드)이라는 결과가 div 영역에 출력되는 것을 확인할 수 있습니다.

HTML DOM nodeType 속성 완벽 정리 – 노드 유형 확인 방법