Element 객체

DOM은 HTML 만을 프로그래밍적으로 제어하기 위한 규격이 아니다. XML, SVG, XUL과 같이 마크업 형태의 언어를 모두 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있고, 각각 구체적인 언어를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다.

-Element의 주요기능

• 식별자 : Element.classList, Element.className, Element.id, Element.tagName

• 조회 : Element.getElementByClassName, Element.getElementsByTagName, Element.querySelector, Element.querySelectorAll

• 속성 : Element.getAttribute(name), setAttribute(name, value), hasAttribute(name), removeAttribute(name)

-식별자 API 엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다. HTML에서 엘리먼트의 이름과 id 그리고 class는 식별자로 사용된다. 식별자 API는 이 식별자를 가져오고 변경하는 역할을 한다.

document.getElementById('active').tagName ;

-> active라는 id를 가지는 Element (지금은 HTMLElement)의 태그 이름을 가져온다. (읽기전용, 변경불가능)

document.getElementById('active').id ;

-> 각 엘리먼트를 식별하는 단 하나의 식별자. 단 하나만 존재할 수 있음. (변경 가능)

document.getElementById('active).className ;

-> 여러개의 엘리먼트를 그룹핑하는 Class 이름을 가져온다. (변경 가능)

단점 ; class 를 추가하려면 += " CLASSNAME"처럼 해야된다. (추가\/제거가 불편함) \/\/ HTML 태그에 class는 공백으로 구분된다.

ex, <li id="active" class="marked current important"> <\/li> -> class가 3개 : marked, current, importantvar

active = document.getElementById('active); active.classList.add('marked'); // add class active.classList.remove('important'); // remove class active.classList.toggle('current'); // toggle (on/off) class

-> classList 속성을 이용하여 편리하게 클래스 추가\/제거가 가능하다.

-조회 API

엘리먼트를 조회하는 기능. getElements* 들은 충분히 봤다! 그러므로 이번에는 조회 대상을 제한하는 방법에 대한 것!어떤 객체의 하위 엘리먼트만 조회하고 싶을 때.

ex, id 값이 'active' 하위의 class이름이 'marked'인 엘리먼트만을 조회하고 싶을 때

var active = document.getElementById('active'); var list = active.getElementsByClassName('marked); // document

-> active -> className = 'marked'

-속성 API

var t = document.getElementById('target'); // get element with id is 'target' t.getAttribute('href'); // get value of href attribute t.setAttribute('href','http://naver.com'); // set value of href to naver.com t.removeAttribute('href'); // remove href attribute t.hasAttribute('href');var target = document.getElementById('target'); target.setAttribute('class', 'important'); // attribute 방식 target.className = 'important'); // property 방식

HTML tag상 property 접근

※ 가끔 프로퍼티로 접근할 때와 속성 method를 통해 접근할 때의 값이 서로 다를 수가 있다.

(ex, target.href \/ target.getAttribute('href') 는 같은 기능이지만 하나는 절대경로, 다른 하나는 상대경로를 가져올 수 있다.)-jQuery 속성 제어 APIjQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr이고 removeAttribute에 대응되는 메소드는 removeAttr이다.

var t= $('target'); t.attr('href'); t.attr('href', 'http://www.naver.com'); t.removeAttr('href');var t1 = $('#t1'); t1.attr('href'); // attribute 방식 -> 상대경로 t1.prop('href'); // property 방식 -> 절대경로

jQuery에서는 DOM에서와는 다르게 프로퍼티의 이름으로 어떤 것을 사용하건 올바른 것으로 교정해준다. 이것이 라이브러리의 장점

$('#t1').prop('className', 'important'); $('#t2').prop('class', 'current');

-jQuery 조회 범위 제한

getElement*를 두, 세 단계로 할 필요 없이 CSS처럼 하면 된다.

$("#active .marked").css("background-color", "red"); $(".marked", "#active").css("background-color", "red");

-> id가 active 하위의 class 이름이 marked인 엘리먼트들을 대상으로 작동.

find() method : jQuery 객체 내에서 엘리먼트를 조회하는 메소드

$("#active").find('.marked').css("background-color", "red"); // chaining $("#active").css('color', 'blue').find('.marked').css("background-color", "red"); // id with 'active' = color blue and element with active

-> marked = background color red-> active 하위에 있는 애들도 글씨색이 blue로 바뀐다..