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 등