문서 객체의 속성
개요
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);