무적강사
2019. 7. 15. 09:09
2019. 7. 15. 09:09
1. document
DOM객체의 최상위 객체이며 HTML문서의 엘리먼트를 변경하기 위해서
제공되는 다양한 메소드가 존재한다.
[DOM의 구성요소]
- document : DOM객체의 가장 상위객체
- element(엘리먼트) : html문서를 구성하는 컨텐츠
- attribute(속성) : 태그 내부에 정의되어 있는 속성
- text(텍스트) : 태그와 태그 사이에 입력한 문자열. 공백도 문자열 객체로 인식
[엘리먼트를 가져오는 메소드]
1) getElementById("id명") : id로 정의된 엘리먼트를 Element의 형태로 반환한다.
2) getElementByTagName("태그명") : 매개변수로 전달된 태그명으로 정의된 모든 엘리먼 트를 NodeList객체로 반환하며 배열로 관리할 수 있
다.
[Node를 생성할 수 있는 메소드]
1) createElement(엘리먼트) : 엘리먼트를 생성한다.
2) createTextNode("텍스트") : 텍스트 노드를 생성한다.
2. Node
DOM내부를 구성하는 객체 하나를 Node객체라 하며 모든 Element객체는 Node객체이다.
[Node객체를 탐색할 수 있는 속성]
1) childNodes - 지정한 노드객체의 하위 노드들을 NodeList로 반환
2) firstChild - 첫 번째 자식 노드를 반환
3) lastChild - 마지막 자식 노드를 반환
4) nextSibling - 다음 형제 노드 반환
5) previousSibling - 이전 형제 노드 반환
6) nodeName - 노드의 이름을 반환
7) nodeValue - 노드의 값을 반환
[Node객체를 변경할 수 있는 메소드]
1) removeChild(노드명) - 노드를 제거한다.
2) insertBefore(newtext, targetnode)
새로운 노드를 targetNode로 지정한 노드객체 이전에 삽입한다.
targetnode : 형제노드
3) appendChild(노드명) - 매개변수로 전달된 노드를 추가한다.
[Node의 속성 제어]
1) getAttribute("속성명") - 매개변수로 전달된 속성의 값을 반환한다.
2) setAttribute("속성명","속성값") - 매개변수로 전달된 속성을 속성값으로 변경한다.