The DOM foundation of JavaScript--I want to talk to you.

Small series into the study stage of the BS for a period of time, learning procrastination, need to carefully organize the knowledge before learning. Review the DOM (document ObjectModel) Documentation object model for the knowledge points in JavaScript, for HTML and XML document APIs (application interfaces).

is a standard programming interface recommended by the Organization for the processing of extensible flag languages.

I. Introduction to the DOM

Three letters in the DOM: D (document) understood as D (document) can be understood as the entire Web page document loading, O (object) can be understood as a Window object, such as things, can invoke properties and methods, here we are talking about the Document object M (model) can be understood as a tree structure of a Web page document.

Dom Rating: According to the W3CDOM specification, the DOM is an application programming interface (API) for HTML and XML, and the DOM maps the entire page to a file composed of hierarchical nodes. There are 1 levels, 2 levels, 3 levels and a total of 3.

All DOM objects in Ps:ie are implemented in the form of COM objects, which means that the DOM in IE may differ somewhat from other browsers.

Node

Each component in the dom,html document is a node.

This is what the DOM provides:

The entire document is a document node

Each HTML tag is an element node

Text that is contained in an HTML element is a text node

Each HTML attribute is an attribute node

Comments belong to note nodes

PS: From the tree structure, we understand several concepts, HTML tags without fathers, no brothers, so the HTML tag is the root tag. The head tag is an HTML sub-tag, and the meta and title tags are sibling relationships. If each tag is treated as a node, then these nodes are combined into a tree of nodes.

Node tree

The nodes are divided into three categories:

1. ELEMENT node: is the label <div></div>
2. Text node: Is the plain text inside the tag, "Test Div"
3. Attribute node: Is the property of the tag. id= "Box"

Two. Find elements

It provides a convenient and simple method and properties for locating nodes so that we can quickly operate on the nodes. respectively: getElementById (), getElementsByTagName (), Getelementsbyname (), getattribute (), SetAttribute (), and RemoveAttribute ( )。

A page can only allow one ID to represent uniqueness

getElementById recommendations are case-sensitive to avoid incompatibility

If it is IE5.0 incompatible getElementById, can make a judgment

Three. DOM node

Node properties

Nodes can be divided into element nodes, attribute nodes, and text nodes, and these nodes have three very useful properties: NodeName, NodeType, and NodeValue.

The presence of these nodes is not only easy to find, but can also create nodes, copy nodes, insert nodes, delete nodes, and replace nodes.

Dome

Dom is more concise in manipulating HTML, and we can use <table > tags to create the DOM.
There can be only one footer within a table

/**/window.onload =function () {//alert (node); alert (typeof node);} Window.onload =function () {//alert (document); alert (document.childnodes[0].nodename);//alert (typeof Node);} Window.onload=function () {var box=document.getelementbyid (' box '); box.outerhtml= ' <b>123</b> '; alert ( document.getElementById (' box '));} Use the DOM to create a label window.onload=function () {var table =document.createelement (' table '); table.width=300;// Table.setatrribute (' width '), Table.border=1;var caption=document.createelement (' caption '); Table.appendchild ( caption);//caption.innerhtml= ' personnel table '; var captiontitle =document.createtextnode (' Personnel table '); Caption.appendchild ( Captiontitle); var thead=document.createelement (' thead '); Table.appendchild (thead); var tr=document.createelement (' TR '); Thead.appendchild (tr); var th=document.createelement (' th '); tr.appendchild (th); Th.appendchild ( document.createTextNode (' Data One ')); var th2=document.createelement (' th '); Tr.appendchild (Th2); Th2.appendchild ( document.createTextNode (' Data Two '));d Ocument.body.appendChild (table);} Using the DOM to get the table

Display effect:

Table one is implemented by adding <table> tags under the <body></body> node.

Small speech:

Some knowledge needs to be noted:

The 1.window object acts as a global object, meaning you can access the Global object through window.

Properties are stored as variables under the object, and all global objects created on the page become properties of the Window object.

Methods are stored as functions under the object, because the left and right functions are stored under the Window object, so they can also be called methods.

2.DOM creates hierarchical results for Web documents, which are made up of node nodes, and there are several DOM node types, the most important of which is element, text,document.

The element node shows a component on the page, so if you have a paragraph element (<p>), you can access it through this DOM node.

The text node displays all of the textual elements in the page, so if your paragraph has text in it, you can access the text directly from the DOM's text node.

The document node represents the entire documentation, which is the root node of the DOM.

3. Each engine has a slightly different implementation of the DOM standard. For example, the Gecko engine used by the Firefox browser has a good implementation (although not fully compliant), but the implementation of the Trident engine used by IE is incomplete and has bugs, which brings a lot of problems to the development.

The DOM foundation of JavaScript--I want to talk to you.