Home > Developer > JavaScript
Dom is the short name of the Document Object model, the basic idea of DOM is to parse a structured document into a series of nodes, composed of these nodes into a number of Dom trees, all of these nodes and the final tree structure has a unified external interface, to use the programming language to manipulate the document, the DOM can be understood as an XML document, The programming interface API for SVG documents and HTML documents. The DOM does not belong to JavaScript, but it can manipulate the DOM through JavaScript.
Concept of node:
The smallest constituent unit of the DOM is called node, and the tree structure (DOM tree) of a document is made up of a variety of different types of nodes.
For HTML documents, there are six main types of nodes:
Document node: the documentation node, which refers to the entire document (Window.document).
DocumentType: Document type node, which refers to the type of document, such as <! DOCTYPE html>
element: Elements nodes, HTML elements, such as <body>, <p>.
Attribute: attribute nodes, attributes of HTML elements, such as: class = "right".
Text: Text node that appears in the HTML document.
documentfragment: Document fragment node, fragment of document.
The node interface is implemented as a node type in JavaScript, which is accessible to all browsers except IE, and all node types in JavaScript inherit from node type, so all node types share the same basic properties and methods.
Properties of the node:
//nodetype Property : Returns the constant value of a node
Type nodeName odetypedocument_node #document 9element_node Uppercase HTML element name 1attribute_node equivalent to Attr.name 2text_node #text 3document_fragment_node#document-fragment11document_type_ node is equivalent to Documenttype.name10//ownerdocument // Returns the Pin Document object where the current node is located, that is, the file object var doc = Nod.ownerdoctype;doc = = = Document//true//Returns the first sibling node immediately following the current node. Returns null if there are no sibling nodes after the current node, note that the property includes a text node, a space after the node, a text node, and a space for the contents. previoussibling //returns one of the closest sibling nodes in front of the current node. Returns null if no sibling node is in front of the current node. Similarly, a space is preceded by a text node that returns an empty content. parentnode //Returns the parent node of the current node. For a node, its parent node can be only three types: element node, document node, and DocumentFragment node. parentelement //Returns the parent element node of the current node. Returns null if the current node does not have a parent node, or if the parent node type is not an element node.textcontent //property returned when The text content of the previous node and all its descendant nodes . <div id= "DivA" >this is <span>some</span> Text</div>document.getelementbyid ("DivA"). Textcontent//This is some text//the property is read-write and automatically escaped HTML tags. document.getElementById (' foo '). Textcontent = ' <p>GoodBye!</p> '//automatically interpreted as text <p> not treated as a label, For the text node and the comment node, the value of this property is the same as the NodeValue property nodevalue //Returns or sets the value of the current node, formatted as a string. However, this property Only the text node, comment node, and the CDATA node of the XML document are valid, and all other types of nodes return NULL.Returns the child node of the current node childNodes//Returns a NodeList collection that includes all child nodes of the current node. In addition to the HTML element nodes, this property returns the text node and the comment node. If the current node does not include any child nodes, an empty NodeList collection is returned. Since the NodeList object is a dynamic collection, once a child node changes, it is immediately reflected in the return result. var ulelementchildnodes = document.queryselector (' ul '). ChildNodes; firstnode//Returns the first child node of the current node, or null if the current node has no child nodes. Note that in addition to the HTML element child nodes, this property also includes the text node and the comment node. lastchild//Returns the last child node of the current node, or null if the current node has no child nodes.BaseURI//Returns a string that consists of the protocol, domain name, and directory of the current Web page, representing the absolute path of the current page. If this value cannot be taken, NULL is returned. This property not only has the Document object (document.baseURI), but also the element node (element.baseURI). Typically, their values are the same.
TheNode method
appendchild ()//accepts a node object as a parameter and takes it as the last child node. Inserts the current node. If the parameter node is an existing other node in the document, the AppendChild method moves it from its original position to the new location. var p = document.createelement ("P");d Ocument.body.appendChild (p); The haschildnodes//method returns a Boolean value that indicates whether the current node has child nodes.//method related to node operation clonenode () // The CloneNode method is used to clone a node. It takes a Boolean value as a parameter that indicates whether the child node is cloned at the same time, false by default, that is, no child nodes are cloned. insertbefore //method is used to insert a node into the specified position of the current node. It takes two parameters, the first parameter is the node to be inserted, the second parameter is a child node of the current node, and the new node is inserted in front of the node. The method returns the new node that was inserted. If the second argument of the InsertBefore method is null, the new node is inserted at the last position of the current node, which becomes the last child node. removechild //accepts a child node as a parameter that is used to remove the node from the current node. It returns the node that was removed. replacechild //is used to replace a new node with one of the child nodes of the current node. It takes two parameters, the first parameter is a new node to replace, and the second parameter is going to be replaced by the child node. It returns the node that was replaced.
The following methods are used for comparing nodes. contains//accepts a node as a parameter and returns a Boolean value that indicates whether the parameter node is the descendant node of the current node. comparedocumentposition//is exactly the same as the Contains method, returning a binary value of 7 bits representing the relationship of the parameter node to the current node. Binary value meaning 2 nodes same 112 nodes are not in the same document (that is, there is one node not in the current document) 0000102 parameter node in front of the current node 0001004 parameter node at the back of the current node 0010008 parameter node contains current node 01000016 current node Package With parameter node 10000032 the private use of the browser can check the result with the bit operator Isequalnode//Returns a Boolean value that checks whether two nodes are equal. The so-called equal node, refers to the two nodes of the same type, the same attributes, the same child nodes. normailize//is used to clean up all text nodes inside the current node. It removes empty text nodes and merges adjacent text nodes into one.
JavaScript Advanced Programming---Node
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
