HTML DOM의 getNamedItem() 메서드는 NamedNodeMap 객체에서 지정한 이름을 가진 속성 노드(attribute node)를 가져오는 데 사용됩니다. 이 메서드는 반드시 attributes 프로퍼티에 대해서만 호출해야 합니다. attributes 프로퍼티가 요소의 모든 속성 목록을 반환하기 때문에, 그 목록 안에서 getNamedItem() 메서드를 통해 원하는 특정 속성 노드만 골라낼 수 있습니다.
문법(Syntax)
getNamedItem() 메서드의 기본 문법은 다음과 같습니다.
namednodemap.getNamedItem(nodename)
여기서 nodename은 필수 매개변수로, 문자열(string) 타입이며 namedNodeMap 안에 존재하는 노드의 이름을 의미합니다.
예제(Example)
getNamedItem() 메서드의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>getNamedItem() example</h1>
USERNAME: <input type="text" name="USR">
<br><br>
<button onclick="attrValue()">GET</button>
<p id="Sample"></p>
<script>
function attrValue() {
var usr = document.getElementsByTagName("input")[0];
var val = usr.attributes.getNamedItem("type").value;
document.getElementById("Sample").innerHTML = "The type attribute value for the input field is: "+val;
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
GET 버튼을 클릭하면 아래와 같이 결과가 표시됩니다.
코드 상세 설명
위 예제의 동작 과정을 단계별로 살펴보겠습니다.
먼저 type="text", name="USR" 속성을 가진 입력 필드(input)를 생성했습니다.
USERNAME: <input type="text" name="USR">
그다음 사용자가 클릭하면 attrValue() 메서드를 실행하는 GET 버튼을 만들었습니다.
<button onclick="attrValue()">GET</button>
attrValue() 메서드 내부에서는 먼저 getElementsByTagName() 메서드를 사용해 input 요소를 가져온 뒤 변수 usr에 할당합니다. 이어서 attributes 프로퍼티를 호출하면 해당 요소의 모든 속성이 namedNodeMap 객체 형태의 컬렉션으로 반환되는데, 여기에 getNamedItem() 메서드를 호출하면 지정한 이름의 특정 속성 노드만 필터링되어 반환됩니다.
마지막으로 getNamedItem()이 반환한 노드에 value 프로퍼티를 적용하면 해당 속성의 실제 값을 얻을 수 있으며, 이 값은 변수 val에 저장됩니다. 저장된 값은 innerHTML 프로퍼티를 통해 id가 "Sample"인 단락(<p>)에 출력되어 사용자에게 결과를 보여줍니다.