HTML 문서에서 DOM의 setNamedItem() 메서드는 매개변수로 전달된 노드를 해당 노드의 이름(name)을 기준으로 속성 노드로 설정합니다. 쉽게 말해, 새로 생성한 속성 노드를 특정 요소의 속성 컬렉션(NamedNodeMap)에 추가하거나, 같은 이름의 기존 속성이 있을 경우 이를 대체하는 역할을 합니다.
문법
setNamedItem() 메서드의 기본 문법은 다음과 같습니다.
node.setNamedItem(node);
매개변수로는 추가하려는 속성 노드 하나를 받으며, 만약 동일한 이름의 속성이 이미 존재하여 교체가 일어났다면 교체되기 이전의 노드를 반환합니다.
예제
다음은 setNamedItem() 메서드를 사용하여 <p> 요소에 style 속성을 동적으로 추가하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:50%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM setNamedItem() method Demo</h1>
<p>Hi! I'm a para element in HTML with some random text</p>
<button onclick="set()" class="btn">Set Attribute using setNamedItem() method</button>
<script>
function set() {
var p=document.querySelector("p");
var attr=document.createAttribute("style");
attr.value="color:#db133a;font-size:1.2rem;";
p.attributes.setNamedItem(attr);
}
</script>
</body>
</html>코드 설명
위 예제의 동작 순서는 다음과 같습니다.
1. document.querySelector("p") – 문서에서 첫 번째 <p> 요소를 선택합니다.
2. document.createAttribute("style") – 'style'이라는 이름의 새 속성 노드를 생성합니다.
3. attr.value – 생성한 속성에 글자색과 폰트 크기를 지정합니다.
4. p.attributes.setNamedItem(attr) – 해당 속성 노드를 <p> 요소의 속성 컬렉션에 추가하여 실제 스타일이 적용되도록 합니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
화면 중앙의 "Set Attribute using setNamedItem() method" 버튼을 클릭하면 자바스크립트 함수가 실행되어 <p> 요소에 style 속성이 설정됩니다.
참고: 함께 알아두면 좋은 관련 메서드
setNamedItem() 메서드와 함께 NamedNodeMap 인터페이스에서 자주 사용되는 메서드는 다음과 같습니다.
- getNamedItem(): 이름을 기준으로 속성 노드를 조회합니다.
- removeNamedItem(): 이름을 기준으로 속성 노드를 제거합니다.
- item(): 인덱스를 기준으로 속성 노드에 접근합니다.
이 메서드들을 조합하면 자바스크립트만으로 요소의 속성을 유연하게 추가, 조회, 수정, 삭제할 수 있습니다.