[ Element ] 속성 API

 

 

생활코딩 웹브라우저 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 :  https://opentutorials.org/course/743inf.run/pBzy)

---

 속성 API 

속성은 HTML에서 태그명만으로는 부족한 부가적인 정보라고 할 수 있다. 

 

각각의 기능은 아래와 같다.

1. Element.getAttribute(name)
    : name이라는 속성의 값을 가져오겠다.

2. Element.setAttribute(name, value)
    : 속성값을 변경시주거나, 인자에 해당되는 name없을 경우는 생성시켜준다.
    ex) element.setAttribute('href', ' https://power-girl0-0.tistory.com/ ' ) -> href속성에 해당 주소로 변경한다. 

3. Element.hasAttribute(name); 
    : 원하는 속성이 있는지 없는지에 대한 유무를 확인해준다.

4. Element.removeAttribute(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>

---

 속성과 프로퍼티 

모든 엘리먼트의 (HTML)속성은 (JavaScript 객체의) 속성과 프로퍼티로 제어가 가능하다. 

<p id="target">
    Hello world
</p>
<script>
    var target = document.getElementById('target');
    
    // attribute 방식
    target.setAttribute('class', 'important');
    
    // property 방식
    target.className = 'important';
</script>

setAttribute('class', 'important')와 className = 'important'는 같은 결과를 만든다.

하지만 전자는 attribute 방식이고 후자는 property 방식이다.

 

property 방식은 좀 더 간편하고 속도도 빠르지만 실제 html 속성의 이름과 다른 이름을 갖는 경우가 있다.

그것은 자바스크립트의 이름 규칙 때문이다.

두가지 비교에 대한 표는 아래와 같다.

attribute	property
class	className
readonly	readOnly
rowspan	rowSpan
colspan	colSpan
usemap	userMap
frameborder	frameBorder
for	htmlFor
maxlength	maxLength

심지어 속성과 프로퍼티는 값이 다를수도 있다.

아래 코드를 실행한 결과는 속성과 프로퍼티의 값이 꼭 같은 것은 아니라는 것을 보여준다.

<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>

위 소스와 같이  href를 property방식으로 가져왔을 때는 속성값이 전체 경로 url을 가져오고, attribute 방식으로 가져왔을 때는 속성값에 적힌 경로만 가져온다.