DOM 노드 접근

(2019-02-12)
1. DOM 노드 객체메소드에 의한 접근 방법

  ㅇ id명,태그명,클래스명에 의한 접근
     - id명 접근 : getElementByID(id) => 결과가 맨처음 찾은 1개로 얻어짐
     - 태그명 접근 : getElementsByTagName(tag) => 결과가 유사 배열 형태(컬렉션) 임
     - 클래스명 접근 : getElementsByClassName(class) => 결과가 유사 배열 형태 임
     * 例) document.getElementByID("myElem").getElementsByClassName("username current");
        . myElem 자손 중에 username,current가 있는 요소들을 찾아내서 접근
     - name 접근 : getElementsByName(name) => 결과가 유사 배열 형태 임 (HTML 만, XML 안됨)

  ㅇ 선택자 API로 접근 (CSS 선택자에 의해 요소 찾기)
     - querySelector(selector)
     - querySelectorAll(selector)
     - matchSelector(selector) 등


2. DOM 노드 객체프로퍼티에 의한 접근 (DOM 단축 표기 접근, DOM Level 0)

  ㅇ 단일 요소 접근 방식
     - document (전체 문서를 가리킴)
     - document.documentElement (html 요소)
     - document.head (head 요소)
     - document.title (title 요소)
     - document.body (body 요소) 등

  ㅇ 컬렉션 요소 접근 방식 (HTMLCollection 객체)
     - links[], scripts[], anchors[], forms[], images[], applets[], embeds[] 등
     - elements[] : form 요소 내 자식 요소들을 순차적으로 접근

  ㅇ 요소 내 속성 접근 방식
     - HTML 속성 : id, class, name, src, href, style, width, height 등
     - 이벤트 처리기 속성표준 DOM 이벤트 참조
        . onclick, oncontextmenu, ondblclick, onmousedown, onmouseenter, onmouseleave,
          onmousemove, onmouseover, onmouseout, onmouseup 등


[JS DOM 제어] 1. DOM 트리 2. DOM 메소드 3. DOM 프로퍼티 4. DOM 노드 접근

 
        최근수정     요약목록     참고문헌