[JavaScript]HTML 애트리뷰트(Attribute) 설정하는 방법

HTML 애트리뷰트(Attribute) 설정하는 방법

이번 포스팅은 JavaScript에서 HTML 애트리뷰트(Attribute)를 설정하는 몇 가지 방법을 소개합니다.

---

setAttribute() - 이름과 매핑되는 값을 설정

가장 일반적인 방법인 setAttribute() 메서드를 사용하여 선택한 요소의 애트리뷰트를 설정할 수 있습니다.

selectedNode.setAttribute(name, value);

setAttribute() 메서드는 두 개의 매개변수를 가집니다. 첫 번째 매개변수는 애트리뷰트의 이름이며 대문자를 입력하면 자동으로 소문자로 변환됩니다. 두 번째 매개변수는 애트리뷰트의 이름과 매핑되는 값이며 문자열 타입으로 변환됩니다.

 

setAttribute() 메서드는 undefined를 반환하며 애트리뷰트가 이미 존재하는 경우 setAttribute() 메서드는 값을 변경합니다.

<input id="input-text" name="content" data-value="hello" />

const inputNode = document.getElementById("input-text");

// 새로운 애트리뷰트 추가 전
console.log(inputNode.getAttributeNames()); // ["id", "name", "data-value"]

inputNode.setAttribute("custom", "custom-attr");

// 새로운 애트리뷰트 추가 후
console.log(inputNode.getAttributeNames()); // ["id", "name", "data-value", "custom"]

---

setAttribute() 메서드를 사용할 수 없는 경우

특이사항으로 disabled 애트리뷰트는 문자열(string) 타입이 아닌 불리언(boolean) 타입이므로 어떠한 값이든 true로 간주합니다.

 

예를 들어, 아래와 같이 setAttribute() 메서드로 disabled 애트리뷰트를 false로 설정하더라도 setAttribute() 메서드는 두 번째 매개변수를 문자열 타입으로 변환하기 때문에 disabled 애트리뷰트의 값을 true로 간주합니다.

const inputNode = document.getElementById("input-text");

// disabled 애트리뷰트의 값을 false로 설정했지만 true로 간주합니다.
inputNode.setAttribute("disabled", false);

disabled 애트리뷰트의 값을 false로 변경하고 싶다면 setAttribute() 메서드가 아닌 removeAttribute() 메서드를 사용하여 애트리뷰트를 제거합니다.

const inputNode = document.getElementById("input-text");

// disabled 애트리뷰트를 제거합니다.
inputNode.removeAttribute("disabled");

---

setAttributeNode() - Attr 객체로 설정

또 다른 방법으로 setAttributeNode() 메서드를 사용하여 선택한 요소의 애트리뷰트를 설정할 수 있습니다.

selectedNode.setAttributeNode(attribute);

setAttributeNode() 메서드는 Attr 객체를 매개변수로 가지며, 설정된 Attr 객체를 반환합니다.

 

setAttribute() 메서드와 마찬가지로 애트리뷰트가 이미 존재하는 경우 매개변수로 전달된 Attr 객체로 대체합니다.

<input id="input-text" />

const inputNode = document.getElementById("input-text");

// 새로운 애트리뷰트 추가 전
console.log(inputNode.getAttributeNames()); // ["id"]

const newAttr = document.createAttribute("custom");
newAttr.value = "custom-attr";

console.log(inputNode.setAttributeNode(newAttr));
// Attr {namespaceURI: null, prefix: null, localName: "custom", name: "custom", value: "custom-attr"…}

// 새로운 애트리뷰트 추가 후
console.log(inputNode.getAttributeNames()); // ["id", "custom"]

---

정리

• setAttribute() 메서드에 애트리뷰트의 이름과 값을 전달하여 선택한 노드의 애트리뷰트를 추가 및 변경할 수 있습니다.
• setAttributeNode() 메서드에 Attr 객체를 전달하여 선택한 노드의 애트리뷰트를 추가 및 변경할 수 있습니다.