문서 객체 모델

 문서 객체 모델 메서드

jQuery 공부중에 javascript와 비교해보고싶어서 정리해보았다.

document.getElementById(아이디) - 아이디를 사용해 문서 객체를 선택합니다

document.querySelector(선택자) - 선택자로 가장 처음 선택되는 문서 객체를 가져옵니다.

cf) getElementById와 querySelector의 차이점은 getElementById는 css선택자중에 id만을 가져오고

querySelector는 css선택자를 이용해서 가져올수있다는 거다.

document.getElementsByName(이름) - name 매개변수와 일치하는 문서객체를 배열로 가져옵니다.

document.getElementsByTagName(태그) - 태그와 일치하는 문서 객체를 배열로 가져옵니다

document.getElementsByClassName(클래스) - class 속성으로 여러개의 문서 객체를 선택합니다

document.querySelectorAll(선택자) - 선택자를 통해 선택되는 문서 객체를 배열로 가져옵니다.

document.createElement(tagName) - 요소 노드를 생성합니다.

document.createTextNode(text) - 텍스트 노드를 생성합니다.

appendChild(node) - 객체에 노드를 연결합니다, ex) 상위 노드.appendChild(하위노드);

 문서 객체 모델 메서드 -2

setAttribute(속성이름, 속성값) - 속성값을 지정합니다 ex) 문서객체변수.setAttribute('속성'.'속성값');

getAttribute(속성이름) - 속성을 추출합니다. ex) 문서객체변수.getAttribute('속성');

cf) 웹브라우저가 지원한다면 문서객체변수.속성 = 속성값; 으로 해도된다

 문서 객체 모델 메서드 - 3

var 문서객체변수1 = document.createElement(tagName);

var 문서객체변수2 = document,createTextNode(text);

문서객체변수1.appendChild(문서객체변수2);

의과정을 문서객체변수.innerHTML = '택스트';로 추가 가능하다.

객체변수의 내용을 추가하고 싶다면

document.문서객체변수.innerHTML += '텍스트'i 이다.

innerHTML은 텍스트의 HTML태그를 인식한다. 태그를 인식시키지않고 문자그대로 출력하게 하려면

innerHTML 대신에 textContent를 입력한다.

removeChild(자식노드) - 문서 객체의 자식 노드를 제거합니다.