With JavaScript, you can reconstruct the entire HTML document. You can add, remove, change, or re -arrange items on the page. To change something on the page, JavaScript needs to access the entrance to all elements in the HTML document. This entrance, together with the method and attributes of the HTML element to add, move, change, or remove, is obtained by the document object model (DOM). In 1998, W3C released the first -level DOM specification. This specification allows access and operation of each individual element in the HTML page. All browsers execute this standard, so the compatibility of DOM is almost difficult to find. DOM can be used by JavaScript to read and change HTML, XHTML and XML documents.
DOM is divided into different parts (cores, XML, HTML) and level (DOM Level 1/2/3):Core domom
Define a set of standards for any structured document object
XML DOM
Define a set of standards for XML documents
HTML DOM
Define a set of standards for HTML documents.
nodeAccording to the DOM, each component in the HTML document is a node.
DOM is provided like this:
Nodes have a hierarchical relationship with each other. All nodes in the HTML document form a document tree (or node tree). Each element, attribute, text, etc. in the HTML document represents a node in the tree. The tree starts at the document node, and it continues to extend the branches until all the text nodes at the lowest level of the tree are everywhere.
The following picture shows a document tree (node tree):
Document tree (number of nodes)Please see the following html document:
HTML; "> <HTML> <Head> <Title> DOM TUTORIAL </Title> </Head> <body> <H1> DOM Lesson One </h1> <p> Hello World! </P> </body> </html>
All the above nodes have a relationship with each other. Each node except for document nodes has parent nodes. For example, the parent nodes of <head> and <body> are <HTML> nodes, and the parent nodes of the text node Hello World! Are <p> nodes. Most element nodes have sub -nodes. For example, the <head> node has a sub -node: <Title> node. <Title> There is also a sub -node: text node Dom Tutorial. When nodes share the same parent node, they are the same generation (the same node). For example, <H1> and <p> are their peers, because their parent nodes are both <body> nodes. Nodes can also have offspring. The descendants refer to all sub -nodes of a node, or the sub -nodes of these sub -nodes, and so on. For example, all text nodes are descendants of <HTML> nodes, and the first text node is the offspring of the <head> node. Nodes can also have ancestors. The ancestor is the parent node of a node, or the parent node of the parent node, and so on. For example, all text nodes can use <HTML> nodes as predecessor nodes.