DOM 노드 접근

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

  ㅇ id명,태그명,클래스명에 의한 접근
     - id명 접근 : getElementByID(id) => 결과가 맨처음 찾은 1개로 얻어짐
        . 리턴 타입 : HTML*Element (단일 형태)
           .. 즉, HTMLFormElement, HTMLLIElement 등 구체화된 단일 태그 요소

     - 태그명 접근 : getElementsByTagName(tag) => 결과가 유사 배열 형태(컬렉션) 임
     - 클래스명 접근 : getElementsByClassName(class) => 결과가 유사 배열 형태(컬렉션) 임
     - name 접근 : getElementsByName(name) => 결과가 유사 배열 형태(컬렉션) 임
        . 리턴 타입 : HTMLCollection (복수 형태)
           .. 유사 배열 형태의 결과 내용이 실시간적으로 DOM 트리를 반영함
        . 단, name 접근 방식은, HTML에서 만 가능, XML 경우는 안됨

     - 例) document.getElementByID("myElem").getElementsByClassName("username current");
        . 단일 요소 myElem 자손 중에 username,current가 있는 복수의 요소들을 찾아내서 접근


  ㅇ 선택자 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[], images[], applets[], embeds[] 등
     - forms[]
        . 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 노드 접근

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