Js entry-Dom Basics

Js entry-Dom Basics

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:

 DOM<Script src = "base. js"> </script> <script src = "index. js"> </script>
 Title H1
P tag
 
 

  
  
Topic 1
  
  
Topic 2
  
  
Topic 3
 
 
Test div

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 <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KPHA + yrnTw7XEyrG68qOs0 + vK/fingerprint = "http://www.2cto.com/uploadfile/Collfiles/20140825/2014082508535690.png" alt = "\">

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.