Document 객체

Document는 html에 대한 객체라고 하였다.

 

자주 쓰이는 것만 집어 보고 넘어가려고 한다. 

 

document.getElementById(아이디) 

 

html에서 해당 아이디를 가진 태그를 선택한다.

 

document.getElementsByClassName(클래스), document.getElementsByName(이름), document.getElementsByTagName(태그)

 

클래스, 네임, 태그명을 가진 태그를 선택한다. 여러개가 선택되어 배열으로 리턴된다.

메소드 이름에도 s가 붙어있다.

 

document.querySelector(선택자), document.querySelectorAll(선택자)

 

css 선택자로 선택할 수 잇게 해준다. 아이디는 #, 클래스는 . 태그명[속성명=속성값] 같은 것도 할 수 있고,

부모 > 자식, 부모 자손 등등 css의 선택자는 다 사용 가능하다. 위의 메소드보다 훨씬 많이 사용할 것이다.

실제로 공부할 때도, 많이 편하다고 느꼈다.

 

document.createElement(태그명)

 

document에 새로운 태그를 만든다. 바로 html에 추가 되는 것이 아닌, 

메모리에 저장되게 된다.

 

document.createDocumentFragment() 

 

가짜 document를 만든다고 한다. 자바스크립트로 document의 태그를 조작하는 것은 성능이 떨어져서, 

여러 태그를 반목문을 통해 동시에 추가할 때 사용한다고 한다. 이 메소드로 가짜 document를 만들어 

여기에 추가 한후, 한번에 document에 추가를 하는 것이다.