[JavaScript] Document & DOM

Document 종류

 

• document.getElementByid('아이디');    html에서 해당 아이디를 가진 태그를 선택한다.
• document.getElementsByClassName('클래스');    html에서 ClassName을 가진 태그를 선택한다. 항상 배열이 된다.(여러 개 선택되기 때문)
• document.getElementsByname('이름');    html에서 Name을 가진 태그를 선택한다. 항상 배열이 된다.(여러 개 선택되기 때문)
• document.getElementsByTagName('태그');    html에서 TagName을 가진 태그를 선택한다. 항상 배열이 된다.(여러 개 선택되기 때문)
• document.querySelector('선택자');    css 선택자로 선택할 수 있게 해 준다.
• document.querySelectorAll('선택자'); css 선택자로 선택할 수 있게 해 준다.(여러 개 선택 가능)
• document.createElement('태그명');    document에 새로운 태그를 만들 때 사용한다. 만들 때 바로 생기는 것이 아닌 변수를 통해서 메모리에 저장된다.
• document.createTextNode('텍스트');    텍스트를 따로 만들 수 있고, Node는 태그와 텍스트를 가리키는 명칭이다. 변수를 통해 메모리에 저장을 한다.
• document.createDocumentFragment();    가짜 document를 만든다. JavaScript로 document의 태그를 조작하는 것은 성능이 떨어지기 때문에 가짜 document를 만들어서 추가한 후 한 번에 document를 추가하면 한 번만 조작하면 되어서 성능에 부담이 덜 하다.
• document.head;    html의 head에 접근 가능하게 해 준다.
• document.body;    html의 body에 접근 가능하게 해 준다.
• document.anchors;    anchors에 접근 가능하게 해 준다.
• document.links;    links에 접근 가능하게 해 준다.
• document.forms;    forms에 접근 가능하게 해 준다.
• document.images;    images에 접근 가능하게 해 준다.
• document.script;    script에 접근 가능하게 해 준다.
• document.title;    title에 접근 가능하게 해 준다.

DOM

 

문서 객체 모델(Document Object Model)을 의미한다. 웹 페이지의 모든 컨텐츠를 객체로 표현하는 모델로써 자바 스크립트를 통해 웹 문서에 접근과 제어를 할 수 있도록 객체를 사용해 웹 문서를 관리한다.

DOM 트리: DOM을 계층적으로 표현한다. 계층적인 단위는 Node이다.

Document 객체: 웹 페이지 자체를 의미하며 모든 HTML 요소에 접근하기 위해서는 Document 객체로부터 시작이 되어야 한다.