ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [12/05] jQuery 객체 & Element 객체
    Javascript 2017. 12. 5. 20:38

    jQuery 객체
    - $() 함수를 실행한 결과의 객체 
    - jQuery가 선택한 Element를 제어

    $.css(arg1, agr2)
    - arg1만 입력하면 css 속성값을 가져옴
    - arg2까지 입력하면 css 속성을 arg2로 수정

    .constructor 
    - HTML Element 객체의 타입을 확인

    $('arg1')
    - arg1 - css 선택자 : CSS 태그에 해당하는 jQuery Object 반환
    - arg1 - id 선택자 : ID를 갖는 해당하는 jQuery Object 반환

    $().map(function(index, elem){});
    - jquery로 선택한 Element를 순회하면서 function을 호출 첫번째 인자로는 index를 전달
    두번째 인자는 DOM 객체(elem)를 반환
    - dom 객체는 $() jQuery 함수로 감싸서 jQuery Object를 통해 제어가 가능.

    jQuery 객체 API Document



    Element 객체
    - html Element들을 추상화한 객체 
    - 모든 Tag Element는 HTMLElement를 상속하는 자식
    - Element는 HTMLElement의 부모 객체, 문서상에 나타나는 모든 Element들에 대한 기능을 정의 
    - Element객체 아래 HTMLElement가 있는 이유 : DOM이 꼭 HTML 만을 제어하기 위한 규격이 아니기 때문.
    ex) Markup 언어를 제어하기위한 규격이 DOM이기 때문에 XML, SVG, XUL 등의 markup 표준 제어를 위해 Element 객체를 공통으로 가짐.


    DOM 계층 구조 


    Element 주요기능
    식별자 : 문서 내에서 특정 엘리먼트를 선택하는 API
    조회 : 엘리먼트의 하위 엘리먼트 조회하는 API
    속성 : 엘리먼트의 속성을 알아내고 변경하는 API


    식별자 API 
    Element.tagName : 해당 엘리먼트의 태그 이름을 확인, 수정불가 일기전용
    Element.id : 문서에서 한번만 등장하는 식별자, 수정가능
    Element.className : class 값을 변경할때 사용. 클래스 추가를 위해 '기존의 클래스 + 추가클래스' 를 작성
    Element.classList : DOMTokkenList 객체를 반환, 태그에 클래스 각각을 유사배열로 반환 
    - classList.add('arg1') 와 같은 방법으로 class 추가 가능 className과는 다른 방식.
    - classList.toggle('arg1') 존재하면 삭제하고, 없으면 추가함.
    - classList.remove('arg1') 특정 클래스 삭제




























Designed by Tistory.