[생활코딩] Element 객체(식별자 API, 조회 API, 속성 API, jQuery 속성 제어 API)

Element 객체

• element를 추상화한 객체
• DOM의 계층구조에서 Element 객체의 위치

Node
Document	CharacterData	Element	Attr
HTML Document	Text | Comment(주석)	HTML Element | - HTMLHeadElement - HTMLLIElement

• var t = document.getElementById('active');
• .style : inline 수식

---

식별자 API

• 자신을 찾을 수 있도록 이름을 갖는 것
• Element.tagName : ONLY 읽어오기
• Element.id : id 값 읽고 변경가능
• Element.className : 까다로움. / 클래스 네임 지정, 변경 추가 가능
• Element.classList : 훨씬 사용이 쉽다. / 여러개 DOM 수정시 편리 / DOMtockenList 객체가 저장되어있다.

---

조회 API

• (ex. getElementsBy~ 사용)
• document 객체의 조회              vs          Element 객체의 조회
  문서 전체에서 조회된다.           vs          특정 하위 범위 조회를 원할 경우

---

속성 API

• var t = document.getElementById('target');
• 'target' : element 객체
• t.getAttribute('href');
• t.setAttribute('id', 'dorot2');
• t.removeAttribute('title');
• t.hasAttribute('title'); ➡ 값 유무 조회
• 속성 vs 프로퍼티( 더 간편하고 빠르지만 html과 js에서 사용하는 이름이 다르다.
• target.setAttribute(' '); vs target.className = ' ';

---

jQuery 속성 제어 API

• attr 메소드 (인자 2개 ➡ setAttribute, 인자 1개 ➡ getAttribute)
• .attr (attribute 방식)       vs      .prop (property 방식)
  갖고 있는 값 그대로      vs      전체 url / T F 리턴

 

jQuery 조회 범위 제한

• - .find : id/class 중 find에 선언된 애들만 세부설정

---

• 출처
  http://opentutorials.org/module/904/6681

Element 객체 - 웹브라우저 JavaScript