[자바스크립트] Element 객체 :: 조회 API와 속성 API

[자바스크립트] Element 객체 :: 조회 API와 속성 API

참조 :: 생황코딩

1. 조회 API

조회 API는 엘리먼트를 조회하는 기능이다. 조회 방법에 대해서는 이미 여러차례 살펴봤기 때문에 이번 시간에 알아볼 내용은 조회 대상을 제한하는 방법에 대한 것이다. 

지금까지 document.getElementsBy* 메소드를 통해서 엘리먼트를 조회했다. document 객체는 문서 전체를 의미하는 엘리먼트이기 때문에 document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회한다. 

Element 객체 역시도 getElementsBy* 엘리먼트를 가지고 있는데 Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행한다.

2. 속성 API

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

속성을 제어하는 API는 아래와 같다. 각각의 기능은 이름을 통해서 충분히 유추할 수 있을 것이다.

• Element.getAttribute(name)
• Element.setAttribute(name, value)
• Element.hasAttribute(name); ->name조건이 있으면 true 없으면 false.
• Element.removeAttribute(name);

모든 엘리먼트의 (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 방식은 target.setAttribute('class', 'important');

*property 방식은 target.className = 'important';

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

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

1 2 3 4 5 6 7 8 9

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