JavaScript 코스

문서 객체의 속성

개요

querySelector를 이용해 찾은 객체에서 몇 가지 속성을 통해 DOM을 제어할 수 있습니다.
대표적으로 value 속성을 사용하면 HTML태그의 value 속성을 지정하는 것과 같은 효과를 냅니다.

태그마다 사용할 수 있는 속성은 다르며 공통적이며 자주 사용되는 속성으로는 아래가 있습니다.

속성 설명 예시
id id값 if (myBox.id == “my-box”)
className class값 myBox.className = “box red-box”
tagName 태그의 이름 if (myBox.tagName == “div”)
value value값 nameInputArea = “홍길동”
style style 오브젝트 myBox.style.color = “red”
innerHTML 태그 내부 HTML값 myBox.innerHTML = “ok

사용자 정의 속성 제어

태그마다 특징적인 속성은 바로 제어할 수 있습니다. <a> 태그의 경우 href 속성을 사용할 수 있죠.

하지만 사용자가 임의로 태그에 속성을 부여하거나, 임의로 부여된 속성에 접근하기 위해서는 메소드를 통해 접근해야합니다.

아래 4개 메소드를 사용하여 사용자 정의 속성을 제어할 수 있습니다.

  • getAttribute(name)
  • setAttribute(name, value)
  • hasAttribute(name)
  • removeAttribute(name)

예제

var user = document.getElementById("user");
var monster = document.getElementById("monster");
user.setAttribute("HP", 100);
user.style.left = "50px";

if (parseInt(user.style.left) < parseInt(monster.style.left))
  user.setAttribute("HP",  user.getAttribute("HP") - 10);