Js entry-Dom basics, js entry-dom

Js entry-Dom basics, js entry-dom

DOM = jsonentobject Model, Document Object Model.

Dom has three different parts.

1. The core DOM is also the Standard Model of the most basic document structure.

2. XMLDOM Standard Model for XML documents

3. Standard html dom model for HTML documents

 

For a new programmer. What HTML is, in fact, not important. But we all know. Html file, which can be opened in a browser.

HTML and XML are basically the same. The only difference is that the node tag in HTML is pre-defined. Nodes in XML are defined by the author of the document. Therefore, XML is extensible.

 

HTML: hypertext markup language. The main function is to be parsed and displayed by the browser. HTML can be seen as a special markup language.

XML: extensible markup language.

 

DOM serves as the above standard. Of course, we will plan the above:

According to the DOM, each component of the document is a node. For the above document. It is actually a tree.

 

 

Here is an example:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

 
 
What is a node?
All tags in the document are called nodes.

Nodes in the DOM node tree are divided:
Element Node, text node, and attribute node.
 
Element Node: tag names such as html body div
Text node: marked content such as "test div" "p tag"
Attribute node: used to modify the tag name. It is also a tag attribute. For example, id = 'boxs'
 
Query element elements:
There are many ways to query elements.
According to the Tag name (getElementsByTagName), id name (getElementById), name (getElementsByName ). Can be searched
InnerHTML: Get text nodes from element nodes
Modify element attribute nodes. After checking the element, you can also modify the attribute.
 
If more than one element is found during searching, it is returned as a node array. Therefore, the array label must not be missing during use. Use the childNode attribute to retrieve all child nodes
 
It is also a tree structure for nodes. After an element node is queried, this element node also contains many small nodes.

 
The nodes shown above are composed of attribute nodes and text nodes. Use childNodes. length to obtain all child nodes in the Element Node
When used, it is similar to the array childNodes [I] to operate on the subnode I.

 
Subnode operations

 
There is a lot of DOM basics, and it cannot be remembered. Browse it and find out that the next time you use it, you will know that there is one thing. You just need to know where to query the information.
Of course, you can also follow the smart prompts of IDE.
 
 

Js dom operations
Dd. childNodes. length = 2 in IE
Dd. childNodes. length = 5 in firefox; why?
<Div id = "dd">
---- The blank text node is ignored in IE, and firefox is included according to the standard.
<A href = "#" id = 'A'> Read Network </a>
---- The blank text node is ignored in IE
<A href = "#" id = 'B'> Read Network </a>
---- The blank text node is ignored in IE
</Div>

How to get started with JS quickly?
There are a lot of things in a mess, so it is a little difficult to get started!
I usually learn to sell it now. Which effect can be used to learn.
To systematically learn DOM is to understand DOM as a series of documents.
Others are some functions provided by javascript.
I have written a book called javascript!