1. DOM 노드 접근 메소드
ㅇ 노드 찾기/접근 ☞ DOM 노드 접근 참조
- getElementById(id), getElementsByTagName(tag), getElementsByClassName(class),
getElementsByName(name)
ㅇ 노드 워킹(walking) 또는 돌아다님(traverse)
- 메소드 이용 방법
. Element.closest(selector) : 가장 근접한 상위 요소 1개 만 반환
- 프로퍼티 이용 방법 ☞ DOM 프로퍼티 (3.항) 참조
ㅇ 노드의 속성(attribute) 접근,변경
- 속성 읽기/접근 : getAttribute(속성이름)
- 속성 추가/변경 : setAttribute(속성이름,속성값)
ㅇ 노드 일치 여부
- 노드 일치 : matches(selectors)
. 인수로 전달된 선택자에 의해, 특정 노드를 탐색 가능한지 여부를 확인 함
2. DOM 노드 조작(생성/추가/제거/교체/복사) 메소드
ㅇ 노드 생성
- 요소 노드 생성 : createElement(tag)
- 텍스트 노드 생성 : createTextNode(text)
- 속성 노드 생성 : createAttribute(attr)
- 주석 노드 생성 : createComment(text)
* 생성 例) var element = document.createElemet('tag명');
* 한편, 노드 생성은, 단지 생성 만 된 것이고, 실제 DOM 트리에 적용하기 전임
ㅇ 노드 추가
- 마지막 자식 노드 추가 : var new = parentNode.appendChild(new)
- 지정 자식 노드 바로 앞에 추가 : var insertedNode = parentNode.insertBefore(new,reference)
- ParentNode.prepend() : 부모 노드 ParentNode의 처음 자식 노드로 추가
- ParentNode.append() : 부모 노드 ParentNode의 마지막 자식 노드로 추가
ㅇ 노드 제거 ☞ MDN removeChild 참조
- 자식 노드 제거 : parentNode.removeChild(child)
- 노드 자신 제거 : currentNode.remove()
ㅇ 노드 교체 : parentNode.replaceChild(new,old)
ㅇ 노드 복사 : cloneNode()
ㅇ 자식 노드 유무
- element.hasChildNodes()
* property로 확인하는 경우
- if (element.firstChild)
- if (element.firstElementChild)
- if (element.childNodes.length > 0)
- if (element.children.length > 0)
3. DOM 기타 메소드
ㅇ 웹문서에 쓰기 (document 객체에 소속된 유용한 메소드)
- document.write() : 문자열을 전달 받아 웹문서에 쓰기
- document.writeln() : write() 뒤에 줄바꿈 문자를 추가
ㅇ form 요소 관련 메소드
- submit(), reset()
- focus(), blur()
- select()