Js entry-Dom Basics

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.