JavaScript Mastering Web-dom_javascript Tips

First, the full name of the DOM

Document Object Model

Second, what is DOM

DOM is a programming interface, which is a set of APIs.
Dom is a set of APIs for documents such as HTML documents, XML, and so on. Just like JDBC is a set of APIs for a database.

Third, the use of DOM

The DOM is used to access or manipulate HTML documents, XHTML documents, and node elements in an XML document.

Now basically all browsers have implemented the DOM specification published by the consortium, so it is possible to use the DOM APIs on browsers.

DOM provides a view of the script-friendly web page structure and content

Dom treats a Web page as a hierarchical tree of nodes

Dom Tree

The topmost node of each DOM tree is document, which is at the top of the HTML node

A Web page is a collection of DOM nodes

See Figure 1

Node type

Page nodes are categorized by category, with element nodes and text nodes as the main components.

See Figure 2

Node characteristics

Using node characteristics to navigate node tree

The following are common node features:

NodeValue values stored in nodes, restricted to text and attribute nodes (excluding elements)

NodeType node type, for example, it is document or text, and so on, but is represented by a code name

ChildNodes contains an array of all the child nodes under the node, arranged in the order in which they appear in the HTML code

The first child node under the FirstChild node

The last child node under the LastChild node

Example

document.getElementById ("id"). nodevalue;//Gets the plain text 
document.getelementsbytagname ("Body") under a node [0].childnodes[1 The last node of the second child node under].lastchild;//body

Using DOM to change the content of elements

First Remove all child nodes

Then create a new text node based on the new content

Finally append the newly created text child node to the node

Here are three methods involved

Removechidl () Removes a child node under the target node and passes in the child node that will be removed

createTextNode () Create a text node from a text string

Appendchildo () joins the new node with the start of the last child node, passing in the newly added child node

var Node=document.getelementbyid ("id")//Get element 
while (node.firstchild)//delete all child nodes under element (here to determine if the child node exists and exists as true) 
Node.removechild (Node.firstchild) 
node.appendchild (document.createTextNode ("message"))//Add new content to the element

Summarize

innerHTML is not a world Wide Web standard, but this feature accesses everything stored within the element

Document Object model, referred to as DOM, provides a standardized mechanism for accessing and modifying Web page data

The DOM view page is the hierarchy tree of the associated node

To change the content of a Web page using DOM instead of innerHTML, remove all the child nodes under the element, and then create and append a new child node that contains the new content.

About JavaScript Control Web page-dom to introduce here, the next chapter will give you an introduction to JavaScript Control page-CSS and DOM, interested friends click to view details!