🤯TIL/Javascript & jQuery

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

Dorothy_YANG 2023. 3. 7. 22:48
728x90

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에 선언된 애들만 세부설정

 

Element 객체 - 웹브라우저 JavaScript

소개 Element 객체는 엘리먼트를 추상화한 객체다. HTMLElement 객체와의 관계를 이해하기 위해서는 DOM의 취지에 대한 이해가 선행되야 한다. DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML,

opentutorials.org

 

728x90