JS - DOM 요소의 속성을 추가 (또는 삭제)하기

엘리먼트의 속성을 추가하거나 삭제하려면 다음 표를 사용할 수 있습니다.

메서드	설 명
createAttribute()	새로운 속성을 만듬
setAttribute()	해당 요소에 새로운 속성을 추가
setAttributeNode()	Attr 객체를 반환한다는 점을 제외하면 setAttribute() 와 동일함
removeAttribute()	해당 요소의 속성을 제거
removeAttributeNode()	Attr 객체를 제거한다는 점을 제외하면 removeAttribute() 와 동일합니다.

setAttribute()

setAttribute() 는 해당하는 요소에 새로운 속성을 추가할 수 있습니다. 아래는 버튼에 onclick 속성을 추가합니다.

<button>하보니 PHP</button>

<script>
  // 첫 번째 방법
  // button 태그에 onclick 속성을 추가
  document.getElementsByTagName("button")[0]
   .setAttribute("onclick", "location.href='http://habonyphp.com'");



  // 두 번째 방법
  // 새로운 속성을 만들어서...
  var attr = document.createAttribute("onclick");
  attr.value = "location.href='http://habonyphp.com'";

  // button 에 추가
  document.getElementsByTagName("button")[0].setAttributeNode(attr);
</script>

removeAttributeNode()

요소의 속성 일부를 제거하려면 removeAttributeNode() 를 이용합니다.

<a href="http://">하보니 PHP</a>

<script>
  var tag = document.getElementsByTagName("a")[0];

  // href 속성을 제거합니다.
  tag.removeAttributeNode( tag.getAttributeNode("href") );

  // 아래 방법도 동일합니다.
  document.getElementsByTagName("a")[0].removeAttribute("href");
</script>