※ 이 글은 예전 블로그에서 퍼온 글입니다. 가독성이 나쁘다면 예전 블로그에서 읽어주세요.
※ 이 글은 프론트엔드 개발자를 위한 자바스크립트 프로그래밍의 글을 참고한 것입니다.
문서 객체 모델 (DOM, Document Object Model)
텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱 하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는 데 이를 DOM이라 한다.
· DOM API는 DOM에 접근하고 변경할 수 있는 프로퍼티와 메서드가 집합된 자바스크립트 객체입니다.
· 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 DOM API를 이용해 메모리 상에 존재하는 DOM을 변경하는 것입니다.
DOM Level 1
· DOM Level1은 1998년 10월에 w3c 권고가 되었으며 기본적인 문서 구조와 쿼리 인터페이스를 제공합니다.
노드의 계층 구조
· DOM은 문서를 노드의 계층 트리 구조로 표현하며, 개발자는 페이지의 각 부분을 추가, 제거 수정합니다.
· HTML과 XML 문서는 모두 DOM을 통해 노드의 계층구조를 표현할 수 있습니다.
· Node 타입에는 여러 가지가 있으며 각 타입은 문서에서 서로 다른 정보나 마크업을 표현합니다.
· 각 노드 타입은 서로 다른 특징, 데이터, 메서드를 가지며 각 노드는 다른 노드와 관계가 있을 수 있습니다.
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
· 문서 노드(document node)는 각 문서를 경로(root)로 표현합니다.
· 문서 요소(document element)는 문서의 최상위 요소이며 다른 요소는 모두 이 안에 존재합니다.
· 문서 하나에 문서 요소 하나만 있을 수 있습니다.
· HTML 페이지에서 문서 요소는 항상 <HTML> 요소입니다.
· XML에서는 미리 지정된 문서 요소가 없으면 어떤 요소든 문서 요소가 될 수 있습니다.
· 각 마크업은 트리에서 노드로 표현되며 총 12가지의 Node 타입이 있습니다.
· 모든 노드는 기반 타입(base type)을 상속합니다.
앞으로의 내용과 연관이 깊은 그림입니다.
Node 타입
· DOM Level 1에는 Node라는 인터페이스가 있습니다.
· DOM에 존재하는 Node 타입은 모두 이 인터페이스를 구현합니다.
· 자바스크립트의 Node 타입은 모두 Node를 상속하므로 모든 노드 타입에서 같은 기본 프로퍼티와 메서드를 공유합니다.
· 모든 노드에는 타입을 나타내는 nodeType 프로퍼티가 있습니다.
Node.ELEMENT_NODE (1)
Node.ATTRIBUTE_NODE (2)
Node.TEXT_NODE (3)
Node.CDATA_SECTION_NODE (4)
Node.ENTITY_REFERENCE_NODE (5)
Node.ENTITY_NODE (6)
Node.PROCESSING_INSTRUCTION_NODE (7)
Node.COMMENT_NODE (8)
Node.DOCUMENT_NODE (9)
Node.DOCUMENT_TYPE_NODE (10)
Node.DOCUMENT_FRAGMENT_NODE (11)
Node.NOTATION_NODE (12)· 노드 타입을 알아보려면 다음과 같이 이 상수와 비교하면 됩니다.
if (someNode.nodeType == Node.ELEMENT_NODE){
alert("Node is an element.")
} // IE 9 미만에서는 동작하지 않음
if (someNode.nodeType == 1){
alert("Node is an element.")
} // 모든 브라우저에서 동작nodeName, nodeValue 프로퍼티
· 해당 노드의 정보를 알기 위해서 nodeName, nodeValue 프로퍼티를 사용할 수 있습니다.
· 요소의 nodeName은 요소의 태그명과 일치하고, nodeValue는 null입니다.
텍스트 노드일 경우 nodeValue는 문자열입니다.
노드 사이의 관계
· 노드 사이의 관계 포인터는 모두 읽기 전용입니다.
· DOM Tree를 가족 계보처럼 생각하며, 가족 관계로 설명하곤 합니다.
예를 들어, <html>은 <head>의 부모 요소입니다. <head>와 <body>는 <html> 요소를 부모로 삼기 때문에 형제 요소입니다.
1. childNodes 프로퍼티
· Nodelist가 저장됩니다.
· Nodelist는 배열과 비슷한 객체(유사 배열 객체)인데, 노드를 순서 있는 목록으로 저장하여 위치 기반으로 접근할 수 있습니다.
· Nodelist 객체는 DOM 구조에 대한 쿼리 결과이며, 문서가 바뀌면 Nodelist 객체에 자동으로 반영됩니다.
· 처음 호출했을 때 얻은 결과를 계속 저장하는 것이 아니라 계속 바뀌므로 "살아 있는 객체"라고 불리기도 함.
· Nodelist에 접근하는 방법은 대괄호 표기법과 item( ) 메서드가 있습니다.
2. parentNode 프로퍼티
· parentNode 프로퍼티는 DOM Tree에서 특정 노드의 부모를 반환합니다.
· childNodes 목록에 포함된 노드는 모두 부모가 같아서 parentNode 프로퍼티를 사용하면 같은 노드를 가리킵니다.
· childNodes 목록의 각 노드들은 형제 관계이며 previousSibling 및 nextSibling 프로퍼티로 이동할 수 있습니다.
· 자식 노드가 하나뿐이라면 해당 노드의 nextSibling과 previousSibling은 모두 null이다.
point 1. childNodes 프로퍼티로 ul의 자식 태그에 접근함.
point 2. childNodes [0]은 #text를 가리키기 때문에 nextSibling 프로퍼티로 li의 첫 번째 태그를 가리킴.
point 3. li 태그의 parentNode 프로퍼티를 사용하였을 때 ul 태그를 가리키는 걸 보아 ul 태그가 li 태그의 부모임을 알 수 있음.
point4. innerText 프로퍼티를 이용하여 값을 바꿈으로써 Nodelist도 바뀌었음을 알 수 있음.
3. firstChild와 lastChild 프로퍼티
· firstChild와 lastChild는 각각 Nodelist의 첫 번째와 마지막 노드를 가리킵니다.
4. hasChildNodes 프로퍼티
· 노드에 자식 노드가 있으면 true를 반환합니다.
· length로 자식 노드 확인하는 것보다 효과적입니다.
5. ownerDocument 프로퍼티
· 전체 문서를 표현하는 문서 노드에 대한 포인터입니다.
· 노드 계층 구조를 따라 위로 거슬러 올라갈 필요 없이 문서 노드에 빠르게 접근 가능합니다.
· #document, 즉 문서 노드를 반환하는 듯함.
노드 조작
1. appendChild( ) 메서드
· childNodes 목록 마지막에 노드를 추가합니다.
· 노드를 추가할 경우 모든 관계 포인터가 업데이트됩니다.
· 이미 문서에 존재하고 있는 노드를 추가한다면, 해당 노드는 이전 위치에서 추가된 위치로 옮겨집니다.
2. insertBefore( ) 메서드
· childNodes 목록의 특정 위치로 노드를 옮길 경우 사용합니다.
· 첫 번째 매개변수로 삽입할 노드를, 두 번째 매개변수로 기준 노드를 매개변수로 받습니다.
(기준 노드가 null일 시 노드는 부모 노드의 자식 노드 리스트 맨 끝에 추가됩니다.)
3. replaceChild( ) 메서드
· 기존의 노드를 교체합니다.
· 첫 번째 매개변수로 삽입할 노드를, 두 번째 매개변수로 교체할 노드를 매개변수로 받습니다.
· 교체할 노드를 문서 트리에서 제거해 반환하며, 교체할 노드가 있던 자리에 삽입할 노드를 대신 삽입합니다.
· 노드를 삽입하게 되면, 교체할 노드의 관계 포인터를 모두 삽입할 노드에 복사합니다.
· 교체할 노드는 아직 같은 문서 소유이긴 하지만 문서에서 위치를 지정받지는 못한 채 붕 떠있는 상태입니다.
4. removeChild( ) 메서드
· 기존의 노드를 제거합니다.
· 제거할 노드 하나만 매개변수로 받습니다.
· 제거된 노드는 아직 같은 문서 소유이긴 하지만 문서에서 위치를 지정받지는 못했다.
기타 메서드
1. cloneNode( ) 메서드
· 자신을 호출한 노드의 복사본을 생성합니다.
· 자손 노드의 복제에 관한 불리언을 매개변수로 받습니다.
( true: 자손 노드 천체를 복제 / false: 해당 노드 하나만 복제 )
· 복제된 노드를 반환하는데, 이는 여전히 문서 소유이지만 부모 노드가 할당되지 않은 고아 노드입니다.
· 따라서 추가 기능을 지닌 메서드를 통해 문서에 추가하기 전에는 DOM Tree 안에 존재하지 않습니다.
2. nomalize( ) 메서드
· 문서 서브 트리에 존재하는 텍스트 노드를 다룹니다.
· 파서의 구현 방식이나 DOM 조작 결과로 텍스트 없는 텍스트 노드가 생기거나 텍스트 노드끼리 형제 노드가 될 가능성이 있습니다.
· nomalize를 호출하면 노드의 자손에서 아래 두 가지 상황이 생기지 않았는지 검색합니다.
· 빈 텍스트 노드를 찾으면 제거하고 텍스트 노드끼리 형제인 경우를 발견하면 두 노드를 하나로 합칩니다.
Document 타입
· 자바스크립트는 문서 노드를 Document 타입으로 표현합니다.
· 브라우저에서 전체 HTML 페이지를 표현하는 문서 객체는 HTMLDocument의 인스턴스입니다.
· HTMLDocument는 Document를 상속합니다.
· document 객체(문서 노드)는 window의 프로퍼티이므로 전역에서 접근 가능합니다.
· Document 타입은 HTML 페이지 또는 XML 기반 문서를 표현합니다.
· Document 노드는 다음과 같은 특징을 지닙니다.
· nodeType은 9입니다.
· nodeName은 “#document”입니다.
· nodeValue는 null입니다.
· parentNode는 null입니다.
· ownerDocument는 null입니다.
· 자식 노드로 DocumentType(최대 1개) Element(최대 1개), Processing Instruction,
Comment를 가질 수 있습니다.- document 객체를 통해 페이지에 대한 정보를 얻고 구조 및 외관을 조작합니다.
Document 자식 노드
· Document 자식 노드는 다음과 같습니다.
· Document
· Element
· ProcessingInstruction
· Comment
· documentElement 프로퍼티
· Doctype
1. documentElement 프로퍼티
· HTML 페이지의 <HTML> 요소를 가리킵니다.
· childNodes의 document 요소보다 documentElement 프로퍼티가 해당 요소에 더 빨리, 더 직접적으로 접근합니다.
document.childNodes [1] // 보다, document.documentElement // 가 더 빠르고 직접적으로 접근함.
· document 객체는 HTMLDocument의 인스턴스이므로 <body> 요소를 직접적으로 가리키는 body 프로퍼티를 갖습니다.
2. DocumentType
· <! DOCTYPE> 태그는 문서의 다른 부분과는 별도의 엔티티로 간주하며 포함된 정보는 다음과 같이 doctype 프로퍼티를 통해 접근할 수 있습니다.
· 물론 document.childNodes [0]으로도 접근 가능합니다.
문서 정보
· document 객체는 HTMLDocument의 인스턴스이므로 표준 Document 객체에는 존재하지 않는 프로퍼티를 여러 가지 가집니다.
· 이들 프로퍼티는 현재 불러들인 웹 페이지에 대한 정보입니다.
1. title 프로퍼티
· <title> 요소의 텍스트가 들어가 있습니다.
· 읽을 수도 있고 재설정도 가능합니다.
2. 웹페이지 요청과 관련한 프로퍼티
· 웹페이지 요청과 관련한 프로퍼티는 다음과 같습니다.
· URL 프로퍼티
· domain 프로퍼티
· referrer 프로퍼티· URL 프로퍼티는 페이지의 완전한 URL을 내포하고 있습니다. 수정 불가능합니다.
· domain 프로퍼티는 페이지의 도메인 이름을 내포하고 있습니다. 수정 가능합니다.
· referrer 프로퍼티는 이 페이지를 링크한 페이지의 URL을 내포하고 있습니다. 수정 불가능합니다.
요소 위치
· 특정 요소나 요소 그룹에 대한 참조를 얻는 일을 할 때 사용합니다.
1. getElementById( ) 메서드
· 찾으려는 요소 ID를 매개변수로 받고 해당 요소를 찾아 반환하며 그런 ID의 요소가 존재하지 않으면 null을 반환합니다.
· 소문자와 대문자를 구분해야 합니다.
· 같은 요소가 2개 이상 존재하면 첫 번째 요소를 반환합니다.
· document.getElementBy~: 단일 요소를 선택하는 메소드.
· document.getElementsBy~: 다중 요소를 선택하는 메소드. 배열 형태로 불러옵니다.
2. getElementById( ) 메서드
· 요소의 태그 이름을 매개변수로 받고 해당하는 요소가 담긴 Nodelist를 반환합니다.
(HTML 문서에서는 HTMLCollection 유사 배열 객체를 반환합니다.)
3. getElementByName( ) 메서드
· name 속성(attribute) 값이 주어진 문자열에 일치하는 요소를 반환합니다.
· 라디오 버튼과 함께 자주 사용됩니다.
· id 속성은 label 요소와 연결하는 역할을 합니다.
· name 속성은 값을 서버에 보낼 때 여러 개의 버튼 중 체크된 단 하나의 값만 보내는 역할을 합니다.
특별한 컬렉션
· document 객체에는 특별한 컬렉션이 몇 가지 있습니다.
· 각 컬렉션은 모두 HTML Collection 객체이고 문서에 공통된 요소들에 빠르게 접근할 수 있도록 만들어졌습니다.
· document.anchors: name속성이 있는 <a> 요소를 모두 가져옵니다.
· document.links: href속성이 있는 <a> 요소를 모두 가져옵니다.
· document.forms: <form> 요소를 모두 가져옵니다.
· document.images: <img> 요소를 모두 가져옵니다.문서에 쓰기
· document 객체의 오래된 기능 중에는 웹 페이지 출력을 직접 조작하는 기능도 있습니다.
· 이 기능을 담당하는 매서드는 write( ), writeIn( ), open( ), close( ) 네 가지입니다.
· write( ): 문자열을 매개변수로 받아 문서에 씁니다. 넘겨받은 텍스트를 그대로 작성합니다.
· writeIn( ): 문자열을 매개변수로 받아 문서에 씁니다. 줄바꿈 문자(\n)를 문자열 마지막에 추가합니다.
· open( ): 페이지 스트림을 엽니다.
· close( ): 페이지 스크림을 닫습니다.Element 타입
· 웹 프로그래밍에서 Document 타입 다음으로 자주 쓰이는 타입은 Element 타입입니다.
· Element 타입은 XML/HTML 요소를 표현하며 이를 통해 태그 이름이나 자식 속성 같은 정보에 접근 가능합니다.
· Element 노드는 다음과 같은 특징을 지닙니다.
· nodeType은 1입니다.
· nodeName은 요소의 태그 이름 입니다.
· nodeValue는 null입니다.
· parentNode는 Document 또는 Element 입니다.
· 자식노드로 Element나 Text, Comment, ProcessingInstruction,
CDATASection, EntityReference를 가질 수 있습니다.· 요소의 태그 이름은 nodeName 프로퍼티나 tagName 프로퍼티로 얻을 수 있습니다.
(후자가 더 직관적이라 후자를 더 많이 씁니다.)
HTML 요소
· HTMLElement 타입을 통해 표현됩니다.
· HTMLElement는 Element를 직접적으로 상속합니다.
· 다음 그림은 각 HTML 요소와 그 타입을 정리한 것입니다.
(각 타입에는 연결된 속성과 메서드가 있습니다. / italic체로 쓰인 것은 폐기된 것들입니다.)
속성 얻기 ( getAttibute( ) )
· 각 요소는 속성을 가질 수 있으며, 속성에는 일반적으로 해당 요소나 콘텐츠에 대한 정보가 들어 있습니다.
· 속성에 대한 DOM 메서드는 다음과 같습니다.
· getAttribute( )
· setAttribute( )
· removeAttribute( )· 위 메서드들은 HTMLElement 타입에 정의된 프로퍼티를 포함해 모든 속성을 다룰 수 있도록 만들어졌습니다.
· 속성 이름은 대소문자를 구분하지 않습니다.
· HTML5 명세에서는 커스텀 속성 앞에 전치사 data- 를 붙여야 유효한 것으로 인정합니다.
· getAttribute(“style”)은 객체를 반환, getAttribute(“onclick”)은 함수를 반환합니다.
· 위의 속성과 차이점 때문에 개발자들은 getAttribute()는 거의 사용하지 않고 객체 프로퍼티를 사용합니다.
· getAttribute( ) 메서드는 주로 커스텀 속성의 값을 가져올 때 사용합니다.
속성 설정 ( setAttibute( ) )
· 속성 이름과 설정할 값 두 가지를 매개변수로 받습니다.
· 속성이 존재하면 해당 속성의 값을, 해당 속성이 존재하지 않으면 속성을 새로 생성하고 값을 설정합니다.
· 속성 이름은 소문자로 통일됩니다.
속성 제거 ( removeAttibute( ) )
· 속성의 값만 지우는 것이 아니라 요소에서 속성을 완전히 제거합니다.
· 주로 쓰이진 않으나, DOM요소를 직렬화 할 때 원하는 속성만 남기는 용도로 유용합니다.
attributes 프로퍼티
· Element 타입은 DOM 노드 타입 중에서 attributes 프로퍼티를 갖는 유일한 타입입니다.
· attributes 프로퍼티에는 Nodelist와 비슷한 NamedNodeMap이 저장됩니다.
· 요소의 속성은 모두 Attr 노드로 표현되며 각 Attr 노드는 NamedNodeMap 객체에 저장됩니다.
· NamedNodeMap 객체에는 다음과 같은 메서드가 있습니다. (자주 쓰이진 않습니다.)
· getNamedItem(name): nodeName 프로퍼티가 name인 노드를 반환합니다.
· removeNamedItem(name): nodeName 프로퍼티가 name인 노드를 목록에서 제거합니다.
· setNamedItem(node): node를 목록에 추가하고 nodeName 프로퍼티에 따라 색인합니다.
· item(pos): index가 pos인 노드를 반환합니다.요소 생성 ( document.createElement( ) )
· createElement( ) 메서드는 새 요소를 생성하고 ownerDocument 프로퍼티를 설정합니다.
· 생성 이후에는 문서 트리의 일부가 아니므로 appendChild(), insertBefore(), replaceChild() 메서드를 통해 요소를 문서 트리에 추가해야 합니다.
요소의 자식
· 요소는 자식 요소나 자손 요소를 가질 수 있으며 그 숫자에는 제한이 없습니다.
· childNodes 프로퍼티에는 요소의 자식 요소가 모두 담기는데, 다른 요소나 텍스트 노드, 주석, 처리 지침(processing instructure)이 이에 해당합니다.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>· 위의 마크업의 Nodelist의 length값은 7입니다. ( <li> 요소 3개와, text 노드 4개(<li> 요소 사이의 공백) )
· 하지만 아래와 같이 마크업 한다면 Nodelist의 length값은 3입니다.
<ul><li>1</li><li>2</li><li>3</li></ul>· childNodes 프로퍼티를 이용해 자식 요소 사이를 이동할 때는 이 차이를 꼭 염두에 두어야 합니다.
Text 타입
· Text 노드는 Text 타입으로 표현됩니다.
· 이 노드에는 평범한 텍스트가 포함되고 글자 그대로 사용되며 이스케이프 된 HTML문자는 포함할 수 있지만 HTML 코드는 포함할 수 없습니다.
· nodeType은 3입니다.
· nodeName은 “#text”입니다.
· nodeValue는 노드에 포함된 텍스트.
· parentNode는 Element입니다.
· 자식 노드는 가질 수 없습니다.· Text 노드에 포함된 텍스트는 nodeValue 프로퍼티나 data 프로퍼티로 가져올 수 있으며, 두 프로퍼티에는 같은 값이 저장됩니다.
· 다음 메서드들을 이용하여 노드의 텍스트를 조작할 수 있습니다.
(Text노드(#text)가 아니면 사용할 수 없으니 주의하시기 바랍니다.)
· appendData(text): 노드 마지막에 텍스트를 추가합니다.
· deleteData(offset, count): offset부터 count만큼 삭제합니다.
· insertData(offset, text): offset 위치에 text를 삽입합니다.
· replaceData(offset, count, text): offset부터 ( offset + count )까지의 텍스트를 text로
교체합니다.
· splitText(offset): offset 위치를 기준으로 텍스트 노드를 둘로 나눕니다.
· substringData(offset, count): offset 위치부터 (offset + count)까지의 텍스트를 꺼냅니다.· Text노드를 갖는 기준은 다음과 같습니다.
<div></div> // 콘텐츠가 없으므로 텍스트 노드도 없음.
<div> </div> // 공백을 콘텐츠로 간주하므로 텍스트 노드가 하나 있음.
<div>Hello World!</div> // 콘텐츠가 있으므로 텍스트 노드가 하나 있음.텍스트 노드 생성 ( createTextNode( ) )
· 새 텍스트 노드를 생성할 때는 createTextNode( ) 메서드를 사용합니다.
· 이 메서드는 매개변수로 삽입할 텍스트를 받습니다.
텍스트 노드 통일 ( nomalize( ) )
· 단순한 텍스트 문자열은 모두 텍스트 노드로 표현 가능하기 때문에 형제 텍스트 노드 관계는 혼란스러울 수 있습니다.
· normalize( ) 메서드는 형제 텍스트 노드를 하나로 합치는 메서드입니다.
let element = document.createElement("div");
element.className = "message";
let textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
let anotherTextNode = document.createTextNode("Yippee!");
element.appendChild(anotherTextNode);
document.body.appendChild(element);
alert(element.childNodes.length); // 2
element.normalize();
alert(element.childNodes.length); // 1
alert(element.firstChild.nodeValue); // "Hello world!Yippee!"텍스트 노드 분할 ( splitText( ) )
· splitText(offset) 메서드는 offset을 기준으로 텍스트 노드를 둘로 나눕니다.
· 원래 텍스트 노드에 오프셋까지의 텍스트가 담기고, 새 텍스트 노드에는 오프셋부터 나머지 텍스트가 담깁니다.
let element = document.createElement("div");
element.className = "message";
let textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
let newNode = element.firstChild.splitText(5);
alert(element.firstChild.nodeValue); // "Hello"
alert(newNode.nodeValue); // " world!"
alert(element.childNodes.length); // 2Comment 타입
· 주석은 DOM에서 Comment 타입으로 표현됩니다.
· Comment 노드에는 다음과 같은 특징이 있습니다.
· nodeType은 8입니다.
· nodeName은 “#comment”입니다.
· nodeValue는 주석 콘텐츠입니다.
· parentNode는 Document또는 Element입니다.
· 자식 노드는 가질 수 없습니다.· Comment 타입은 Text 타입과 같은 원형을 상속하므로 Text 타입에 있는 문자열 메서드를 대부분 갖고 있는데 splitText( )는 예외입니다.
· nodeValue나 data 프로퍼티로 주석의 콘텐츠를 가져올 수 있습니다.
CDATASection 타입
· CDATA 섹션은 XML 기반 문서 전용이며, CDATASection 타입으로 표현됩니다.
· CDATASection 타입은 Text 타입과 같은 원형을 상속하므로 Text 타입에 있는 문자열 메서드를 대부분 갖고 있는데 splitText( )는 예외입니다.
· CDATASection 노드에는 다음과 같은 특징이 있습니다.
· nodeType은 4입니다.
· nodeName은 “#cdata-section”입니다.
· nodeValue는 CDATA 섹션의 콘텐츠입니다.
· parentNode는 Document또는 Element입니다.
· 자식 노드는 가질 수 없습니다.DocumentType 타입
· DocumentType 타입은 주로 쓰이지 않습니다.
· DocumentType 객체에는 다음과 같은 특징이 있습니다.
· nodeType은 10입니다.
· nodeName은 독타입 이름입니다.
· nodeValue는 null입니다.
· parentNode는 Document입니다.
· 자식 노드는 가질 수 없습니다.
DocumentFragment 타입
· DocumentFragment 타입은 마크업에 표현되지 않는 유일한 노드 타입입니다.
· DocumentFragment 노드를 생성해서 사용하면 라이브 DOM 트리 외부에 경량화된 문서 DOM을 만들 수 있습니다.
· DocumentFragment 노드에는 다음과 같은 특징이 있습니다.
· nodeType은 10입니다.
· nodeName은 “#document-fragment”입니다.
· nodeValue는 null입니다.
· parentNode는 null입니다.
· 자식 노드로 Element, ProcessingInstruction, Comment, Text, CDATASection,
EntityReference를 가질 수 있습니다.Attr 타입
· 요소의 속성은 DOM에서 Attr 타입으로 표현됩니다.
· Attribute 노드에는 다음 특징이 있습니다.
· nodeType은 11입니다.
· nodeName은 속성 이름입니다.
· nodeValue는 속성 값입니다.
· parentNode는 null입니다.
· HTML에서는 자식 노드를 가질 수 없습니다.
· XML에서는 자식노드로 Text, EntityReference를 가질 수 있습니다.· 속성 역시 노드이지만 DOM 문서 트리의 일부분으로 간주되지는 않습니다.
· Attr 객체에는 세 가지 프로퍼티가 있습니다.
+ 참고하면 좋은 글들
DOM | PoiemaWeb
브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델. Document Object Model)을 생성한다. 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하기 위해서는 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉, 모든 요소와 요소의
poiemaweb.com
자바스크립트 엔진이란? 렌더링 엔진이란? :: 마이구미
이번 글은 자바스크립트 엔진(Javascript Engine)과 렌더링 엔진(Rendering Engine)에 대해 다뤄본다. 정의와 오해를 알아본다. 자바스크립트 엔진이란 무엇인가? 자바스크립트 코드를 실행하는 인터프리터 또는..
mygumi.tistory.com
소년코딩의 자바스크립트 강좌 44. DOM: DocumentFragment 타입
DocumentFragment 타입 DocumentFragment 타입은 마크업에 표현되지 않는 유일한 노드 타입이다. DocumentFragment 노드를 생성해서 사용하면 라이브 DOM 트리 외부에 경량화된 문서 DOM을 만들 수 있다. 메모리상..
boycoding.tistory.com
'Programming > Javascript' 카테고리의 다른 글
| ES6 String에 추가된 메서드들 (0) | 2020.04.09 |
|---|---|
| Babel의 뜻과 사용법 (0) | 2020.04.07 |
| BOM (Browser Object Model)에 대한 정리 (0) | 2020.04.02 |
| 생성자의 문제점 (생성자 함수를 쓸 때 주의 할 점) (0) | 2020.04.02 |
| 자바스크립트 관점에서 정리한 클래스(Class)와 프로토타입(Prototype)에 대하여 (0) | 2020.04.02 |