DOM [ Document Object Model ]
문서 개체 모델
자바스크립트 Node 개체의 계층화된 트리
브라우저는 HTML 코드를 해석해서
트리 형태로 구조화된 노드들을 가지고 있는 문서(DOM)을 생성한다.
DOM의 목적은 JavaScript를 사용해서
이 문서에 대한 스크립트 작성(삭제, 추가, 바꾸기, 이벤트 처리, 수정)을
위한 프로그래밍 인터페이스를 제공하는 것.
쉽게 설명하면,
자바스크립 입장에서 HTML코드는 문자열로만 취급되고,
HTML과 CSS는 화면에서 보여주는 역할하지만
자바스크립트는 그 화면을 제어해주는 역할을 함.
문자열을 할 수 있는 정보는 별로 없기때문에
문자열을 좀 더 유용하게 사용할 수 있는 형태로 바꿀 수 있게
(Document = HTML)를 Object Model로 바꾼 형태에
추가적인 기능을 사용할 수 있게 해주는 역할
예) <body>요소는 element노드이자 HTMLBodyElement인터페이스의 인스턴스
DOM은 원래 XML문서를 위한 애플리케이션 프로그래밍 인터페이스 였지만,
HTML문서에서도 사용되도록 확장되었음
노드 개체 일반적인 노드 유형
- DOCUMENT_NODE (예: window.cdocument)
- ELEMENT_NODE (예: <body>, <a>, <p>, <script>, <style>, <html>, <h1>...)
- ATTRIBUTE_NODE (예: class="funEdges")
- TEXT_NODE (예: 줄바꿈과 공백을 포함한 HTML문서 내의 텍스트 문자)
- COMMENT_NODE (예: 코멘트)
- DOCUMENT_TYPE_NODE (예: <!DOCTYPE html>)
Node 개체로부터 상속받은 하위 노드 개체
모든 노드 유형은 Node로부터 상속받는다는 것뿐만 아니라
상속 체인이 길어질 수 있음을 알아두는 것이 중요함.
Node속성
- childNodes
- firstChild
- lastChild
- nextSibling
- nodeName
- nodeType
- nodeValue
- parentNode
- previousSibling
Node 메서드
- appendChild() // 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙음
<div id="parentElement">
<span id="childElement">
foo bar
</span>
<!-- <p></p> 여기에 p element가 삽입됨 -->
</div>
<script>
// 새로 생성한 p element
var p = document.createElement("p");
// 부모 노드 선택
var parentDiv = document.getElementById("childElement").parentNode;
// 부모 노드의 자식의 마지막 노드 뒤에 p element 추가됨
parentDiv.appendChild(p);
</script>- cloneNode() // node 복제 *메소드로 만들어진 복사된 노드들은 자동적으로 문서에 적용되지 않는다는 것에 주의
<div id="parentElement">
<span id="childElement">
foo bar
</span>
<p id="childElement2">hello</p>
</div>
<script>
var parentDiv = document.getElementById("childElement").parentNode;
// 해당 node의 children 까지 복제하려면 true, 해당 node 만 복제하려면 false
var p_prime = parentDiv.cloneNode(true);
// 복제만 할 뿐 따로 화면에서 출력이 따로 되지않음
// console 또는 innerText또는 innerHTML을 통해 복제된 node를 담아야지만
// 화면에서 복제된 출력 값을 확인 가능
console.log(p_prime);
</script>- compareDocumentPosition()
- contains() // node.contains( otherNode ) 현재 부모 노드에서 자식 노드가 있는 여부를 결과값으로 출력
- hasChildNodes() // 현재 노드에서 자식노드가 있는지 여부를 결과값으로 출력
var foo = document.getElementById("foo");
if ( foo.hasChildNodes() ) {
foo.removeChild( foo.childNodes[0] );
}- insertBefore() // 참조된 노드 앞에 특정 부모 노드의 자식노드를 삽입
<div id="parentElement">
// <a></a>태그가 생성됨
<span id="childElement">
foo bar
</span>
</div>
<script>
// 새로 추가될 Node 생성
var newNode = document.createElement("a");
// 부모 노드 참조
var parentDiv = document.getElementById("childElement").parentNode;
// 참조 된 자식노드
var sp2 = document.getElementById("childElement");
// .insertBefore로 새로운 node를 추가하기 위해서는
// 부모 노드와 자식 노드가 꼭 필수임.
// 부모 노드에서 어떤 자식노드에 추가할지 알 수 있음
parentDiv.insertBefore(newNode, sp2);
</script>- isEqlalNode() // 노드 비교 결과값을 출력(true, false)
- removeChild() // node.removeChild(child); DOM에서 제거할 자식 노드
- replaceChild() // parentNode.replaceChild(newChild, oldChild);
<div id="parentElement">
<span id="childElement">
foo bar
</span>
<!--
<span id="childElement">
foo bar
</span>는
<p>Hello</p>로 변경됨
-->
</div>
<script>
// p element 새로 생성
var p = document.createElement("p");
// hello라는 textNode 생성
var newContent = document.createTextNode("Hello");
// p element에 textNode 추가
p.appendChild(newContent); // <p>Hello</p>
// 참조할 부모node
var parentElement = document.getElementById("parentElement");
// 교체하고자 하는 자식 node
var changeElement = document.getElementById("childElement");
//특정 부모 노드의 한 자식 노드를 다른 노드로 교체
// parentNode.replaceChild(newChild, oldChild);
parentElement.replaceChild(p, changeElement);
</script>
Document 메서드
- document.createElement()
- document.createTextNode()
HTML*Element 속성
- innerHTML
- outerHTML
- textContent
- innetText
- outerText
- firstElementChild
- lastElementChild
- nextElementChild
- previousElementChild
- children
DOM을 깨우치다
『DOM을 깨우치다』는 DOM 라이브러리 없이 문서 개체 모델에 대한 스크립트를 작성하여 HTML을 효율적으로 조작하는 방법을 소개한다. 최신 브라우저에 기본적으로 존재하는개념들과 코드를 사
book.naver.com
책과 김버그의 youtube을 참고하여 학습한 내용입니다.
'웹프로그래밍 무작정따라하기 > JS' 카테고리의 다른 글
| [JavaScript] 구조 분해와 구조 분해 할당 사용 방법 (0) | 2021.02.24 |
|---|---|
| [JavaScript] 배열 함수 정리 (0) | 2021.02.24 |
| [JavaScript] 회원가입 약관동의 체크박스 전체선택, 해제 (0) | 2021.01.25 |
| [TypeScript] 타입스크립트 기본타입 (0) | 2021.01.24 |
| [TypeScript] 타입스크립트 설정 파일 (0) | 2021.01.24 |
댓글