DOM 노드 접근

(2022-04-30)

getElementByID, getElementsByTagName, getElementsByClassName, getElementsByName, querySelector, querySelectorAll


1. DOM 노드 객체로의 접근 (메소드에 의한 접근 방법)

  ㅇ id명,태그명,클래스명,name명에 의한 접근

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

     * (결과값이 복수/컬렉션인 경우)
     - ② 태그명 접근 : getElementsByTagName(tag) => 결과가 유사 배열 형태(컬렉션) 임
        . 리턴 타입 : HTMLCollection (복수 형태)
     - ③ 클래스명 접근 : getElementsByClassName(class) => 결과가 유사 배열 형태(컬렉션) 임
        . 리턴 타입 : HTMLCollection (복수 형태)
     - ④ name 접근 : getElementsByName(name) => 결과가 유사 배열 형태(컬렉션) 임
        . 리턴 타입 : NodeList (복수 형태)
        . 단, name 접근 방식은, HTML에서 만 가능, XML 경우는 안됨

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


  ㅇ CSS 선택자 API에 의한 접근
     - querySelector(selector)
     - querySelectorAll(selector) => 결과가 유사 배열 형태(컬렉션 : NodeList) 임
     - 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 프로퍼티   5. DOM 노드 접근   6. DOM 요소 컬렉션   7. DOM 크기,위치  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"