javascript-Element객체란

Element 객체-엘리먼트를 추상화한 객체이다.

식별자API-문서내에서 특정한 엘리먼트를 식별하기 위한 용도로 사용되는 API

Element.classList - classname보다 편리하다.

Element.className -클래스는 여러개의 엘리먼트를 그룹핑할 때 사용한다.

Element.id -단 하나만 등장할 수 있는 식별자이다

<li id ='active'>java</li>

<script>

 var active = document.getElementById('active');

console.log(active.id);

active.id='deactive';  deactive로 변경

console.log(active.id);

</script>

Element.tagName -해당 엘리먼트의 태그 이름을 알아낸다. 태그 이름을 변경하지는 못한다.

<li id ='active'>java</li>

<script>

console.log(document.getElementById('active').tagName)

</script>

조회API-엘리먼트의 하위 엘리먼트를 조회하는 API

Element.getElementsByClassName

Element.getElementsByTagName

Element.querySelector

Element.querySelectorAll

속성API-엘리먼트의 속성을 알아내고 변경하는 API

Element.getAttribute(name)

Element.setAttribute(name, value)

Element.hasAttribute(name);

Element.removeAttribute(name);

var target =document.getElementById('target');

target setAttribute('class', 'important'); 속성방식

target className = 'important'; 프로퍼티 방식

jQuery 속성 제어 API

-jQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr이다. 또한 removeAttribute에 대응되는 메소드로는 removeAttr이 있다.

<a id="target" href="www.">ex</a>

<script src="jquery......></script>

<script>

var t =$('#target');

console.log(t.attr('href')); //www

t.attr('title','www.ht'); //title 속성의 값을 설정한다.

t.removeAttr('title'); //title 속성을 제거한다.

</script>