머리말
DOM의 기능은 웹 페이지를 JavaScript 객체로 변환하여 JavaScript를 사용하여 웹 페이지에서 다양한 작업 (예 : 컨텐츠 추가 및 삭제)을 수행 할 수 있도록하는 것입니다. 브라우저는 HTML 문서를 DOM 모델을 기반으로 일련의 노드로 구문 분석 한 다음 이러한 노드의 트리 구조를 형성합니다. DOM의 가장 작은 구성 단위를 노드라고하며 문서의 트리 구조 (DOM 트리)는 12 가지 유형의 노드로 구성됩니다.
재산
일반적으로 노드에는 Nodetype , Nodename 및 Nodevalue의 최소한 세 가지 기본 속성이 있습니다.
다른 노드 유형,이 세 가지 속성의 값도 다릅니다.
Nodetype
Nodetype 속성은 노드 유형의 일정한 값을 반환합니다. 다른 유형은 상이한 상수 값에 해당하고 12 가지 유형은 각각 1에서 12의 상수 값에 해당합니다.
요소 노드 Node.element_node (1)
속성 node node.attribute_node (2)
텍스트 노드 노드 .text_node (3)
cdata node node.cdata_section_node (4)
엔티티 참조 이름 노드 노드 .Entry_Reference_Node (5)
엔티티 이름 노드 노드 .entity_node (6)
프로세스 명령 노드 노드 .processing_instruction_node (7)
주석 노드 노드 .comment_node (8)
문서 노드 노드 .document_node (9)
문서 유형 노드 노드 .document_type_node (10)
문서 조각 노드 노드 .document_fragment_node (11)
DTD 선언 노드 노드 .notation_node (12)
dom은 JavaScript의 노드 유형으로 구현되는 노드 인터페이스를 정의하고 IE8-Browser의 모든 DOM 객체는 COM 객체로 구현됩니다. 따라서 IE8-Browser는 노드 객체의 쓰기를 지원하지 않습니다.
// 표준 브라우저에서 1을 반환하고 IE8-Browser에 오류 가보고되어 Console.Log (Node.Element_Node)의 노드를 프롬프트합니다. // 1
Nodename
Nodename 속성은 노드의 이름을 반환합니다
nodevalue
nodevalue 속성은 문자열로 형식으로 현재 노드의 값을 반환하거나 설정합니다.
다음으로, 상세한 설명은 노드 유형의 상수 값의 해당 순서에 따라 1에서 12까지 작성됩니다.
【1 n 요소 노드
요소 노드 요소는 웹 페이지의 HTML 태그 요소에 해당합니다. 요소 노드의 노드 유형 NodeType 값은 1이고, 노드 이름 Nodename 값은 대문자 레이블 이름이고 Nodevalue 값은 null입니다.
신체 요소를 예로 들어 보겠습니다
// 1 'body'nullconsole.log (document.body.nodeType, document.body.nodename, document.body.nodevalue) console.log (node.element_node === 1); // true
【2 n 기능 노드
요소 속성의 속성은 웹 페이지의 HTML 태그의 속성에 해당합니다. 요소의 속성 속성에만 존재하며 DOM 문서 트리의 일부가 아닙니다. 특성 노드의 노드 유형 NodeType 값은 2, 노드 이름 Nodename 값은 속성 이름이고 NoDevalue 값은 속성 값입니다.
이제 div 요소에는 id = "test"의 속성이 있습니다.
<div id = "test"> </div> <cript> var att
【3 n 텍스트 노드
텍스트 노드 텍스트는 웹 페이지의 HTML 태그 컨텐츠를 나타냅니다. 텍스트 노드의 노드 유형 Nodetype 값은 3이고, 노드 이름 Nodename 값은 '#Text'이고 NoDevalue 값은 레이블 내용 값입니다.
이제 div 요소의 내용은 '테스트'입니다.
<div id = "test"> test </div> <cript> var txt = test.firstChild; // 3 '#Text' 'test'console.log (txt.nodeType, txt.Nodename, txt.nodevalue) copole.log (node.text_node == 3); // true </script>
【4 ata cdata 노드
CDATASECTION 유형은 XML 기반 문서에만 해당되며 XML 문서에만 나타납니다. 그것은 cdata 영역을 나타내고 형식은 일반적으로
<! [cdata []]>
이 유형 노드의 노드 유형 NodeType의 값은 4이고, 노드 이름 Nodename의 값은 '#cdata-section'이고 NoDevalue의 값은 cdata 영역의 내용입니다.
【5 ity 엔티티 참조 이름 노드
엔티티는 컨텐츠 나 태그 대신 XML에 사용 된 이름을 지정하는 선언입니다. 엔티티에는 두 부분이 포함되어 있습니다. 첫째, 이름은 엔티티 선언을 사용하여 대체 컨텐츠에 바인딩되어야합니다. 엔티티 선언은 <! 엔티티 이름 "value"> 구문을 사용하여 문서 유형 정의 (DTD) 또는 XML 스키마에서 작성됩니다. 둘째, 엔티티 선언에 정의 된 이름은 XML에 사용됩니다. XML에서 사용하면이 이름을 엔티티 참조라고합니다.
엔티티 참조 이름 Node Entry_reference의 노드 유형 NodeType는 5, 노드 이름 Nodename은 Entity Reference의 이름이고 Nodevalue는 null입니다.
// 엔티티 이름 <! Entity Publisher "Microsoft Press"> // 엔티티 이름 참조 <BubInfo> 게시 및 게시자; </pubinfo>
【6 ity 엔티티 이름 노드
위에서 자세히 설명되어 있으므로 반복하지 않을 것입니다.
이 노드의 노드 유형 NodeType는 6이고, 노드 이름 Nodename은 엔티티 이름이고 Nodevalue는 null입니다.
【7 ing 처리 명령 노드
명령어 노드 프로세스 인스턴트를 처리하는 노드 유형 Nodetype의 값은 7이고, 노드 이름 Nodename은 대상의 값을 가지며, NoDevalue는 대상을 제외한 전체 컨텐츠를 가지고 있습니다.
주석 노드
주석 노드 주석은 웹 페이지에서 HTML 주석을 나타냅니다. 주석이 붙은 노드의 노드 유형 NodeType의 값은 8이고, 노드 이름 Nodename의 값은 '#comment'이고 NoDevalue의 값은 주석의 내용입니다.
이제 <!-나는 댓글 내용-> id id id mydiv가있는 div 요소에 댓글 내용입니다.
<div id = "mydiv"> <!-나는 주석 내용입니다-> </div> <cript> var com = mydiv.firstChild; // 8 '#comment' 'i am is ame content'console.log (com.nodetype, com.nodename, com.nodevalue) console.log (node.comment_node == 8); // true <// script>
【9 n 문서 노드
문서 노드 문서는 루트 노드라고도하는 HTML 문서를 나타냅니다. 문서 노드의 노드 유형 Nodetype은 9이고, 노드 이름 Nodename은 '#document'이고 Nodevalue는 null입니다.
<cript> // 9 "#document"nullconsole.log (document.nodetype, document.nodename, document.nodevalue) console.log (node.document_node === 9); // true </script>
【10 type 문서 유형 노드
DocumentType Node DocumentType에는 문서의 문서 유형에 대한 모든 정보가 포함되어 있습니다. 문서 유형 노드의 노드 유형 NodeType 값은 10, 노드 이름 Nodename 값은 DocType의 이름이고 NoDevalue 값은 null입니다.
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document </title> </head> <body> <cript> var nodedocumenttype = document.firstchild; // 10 "html" nullConsole.log (NodedocumentType.NodeType, NodedOcumentType.NodeName, NodedOcumentType.Nodevalue); console.log (node.document_type_node === 10); </script> </body> </html>
【11 frag 문서 조각 노드
문서 조각 노드 DocumentFragment에는 문서에 해당 태그가 없습니다. 노드를 포함하고 제어 할 수 있지만 완전한 문서와 같은 추가 리소스를 극복하지는 않는 가벼운 문서입니다. 이 노드의 노드 유형 Nodetype은 11이고, 노드 이름 Nodename은 '#document-fragment'이고 Nodevalue는 null입니다.
<cript> var nodedocumentfragment = document.createDocumentFragment (); // 11 "#docum
【12 t DTD 선언 노드
DTD 선언 노드 표기법은 DTD에서 선언 된 기호를 나타냅니다. 이 노드의 노드 유형 Nodetype은 12이고, 노드 이름 Nodename은 기호 이름이고 Nodevalue는 null입니다.
요약
이 12 개의 DOM 노드 유형 중 일부는 XML 문서에 적합하며 일부는 일반적으로 사용되지 않습니다. 일반적으로 사용되는 유형의 경우 나중에 자세히 소개합니다. 이 기사는이 12 개의 노드 유형에 대한 개요 만 제공합니다. 이 기사가 모두에게 도움이되기를 바랍니다.