질문

엘리먼트 객체

1. 식별자API

   • Element.tagName
   • Element.className
   • Element.classList

2. 조회API

   • document.getElementsBy*

3. 속성API

   • Element.getAttribute(name)
   • Element.setAttribute(name, value)
   • Element.hasAttribute(name);
   • Element.removeAttribute(name);

   프로퍼티방식과 어트리뷰트 방식으로 두가지가 있다.

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

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

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