[ JavaScript ] JS 속성 API , attribute vs property

 

 

 

 

 

이미지 출처 :    https://www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

 

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다.

 

 

 

---

 

 

 

 

 

 

- 속성 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 방식을 사용하려면 위와 같이 다를 수도 있다는 점을 인지하고 사용해야 합니다.

 

 

 

 

 

 

 

 

 

SUA 정보보안 멘토링에 참여하고 있습니다.