해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: 속성 API
속성은 HTML에서 태그명만으로는 부족한 것을 채워주는
부가적인 정보라고 할 수 있습니다.
이 속성을 어떻게 제어하는지에 대해 알아봅시다.
속성을 제어하는 API는 아래 리스트와 같습니다.
- Element.getAttribute(name)
- Element.setAttribute(name, value)
- Element.hasAttribute(name);
- Element.removeAttribute(name);
각각의 기능은 이름을 통해서 충분히 유추할 수 있을 것 같지만, 다시 설명 드리자면
Element.getAttribute(name) 는 name 이라는 이름을 가진 속성값을 가져옵니다.
Element.setAttribute(name, value) 는 name 속성을 value 값으로 설정합니다.
Element.hasAttribute(name) 는 name 에 해당하는 Attribute 가 있는지 없는지를
true / false 로 반환합니다.
Element.removeAttribute(name) 는 name 속성을 삭제합니다.
예제 코드로 확인해보도록 하겠습니다.
<a id="target" href="http://opentutorials.org">opentutorials</a>
<script>
var t = document.getElementById('target');
console.log(t.getAttribute('href')); //http://opentutorials.org
t.setAttribute('title', 'opentutorials.org'); // title 속성의 값을 설정한다.
console.log(t.hasAttribute('title')); // true, title 속성의 존재여부를 확인한다.
t.removeAttribute('title'); // title 속성을 제거한다.
console.log(t.hasAttribute('title')); // false, title 속성의 존재여부를 확인한다.
</script>
위 예제를 실행한 결과는 아래 그림과 같습니다.
자바스크립트 기본 문법 :: 속성 vs 프로퍼티
모든 엘리먼트의 (HTML)속성은 (JavaScript 객체의) 속성과 프로퍼티로 제어가 가능합니다.
예제로 확인합시다.
<p id="target">
Hello world
</p>
<script>
var target = document.getElementById('target');
// attribute 방식
target.setAttribute('class', 'important');
// property 방식
target.className = 'important';
</script>
위의 예제에서
target.setAttribute('class', 'important');
코드는 attribute 방식이라고 합니다.
target.className = 'important';
코드는 property 방식이라고 합니다.
setAttribute('class', 'important')와 className = 'important'는 같은 결과를 만들지만,
property 방식은 좀 더 간편하고 속도도 빠르지만,
자바스크립트의 이름 규칙 때문에 실제 html 속성의 이름과 다른 이름을 갖는 경우가 있습니다.
위 그림과 같이요.
심지어 속성과 프로퍼티는 값이 다를수도 있습니다.
아래 코드를 실행한 결과는 속성과 프로퍼티의 값이 꼭 같은 것은 아니라는 것을 보여주는 예시입니다.
<a id="target" href="./demo1.html">ot</a>
<script>
//현재 웹페이지가 http://localhost/webjs/Element/attribute_api/demo3.html 일 때
var target = document.getElementById('target');
// http://localhost/webjs/Element/attribute_api/demo1.html
console.log('target.href', target.href);
// ./demo1.html
console.log('target.getAttribute("href")', target.getAttribute("href"));
</script>
만약 property 방식을 사용하신다면,
위와 같은 사항을 주의하며 사용해야할 것 같습니다.