Let's talk about the DOM in js, that is, the Document Object Model.

Source: Internet
Author: User
DOM is the Document Object Model: the purpose of DOM creation is to reconstruct the entire HTML page and add, change, or rearrange projects on the page. Look at the simplest html file: & amp; lt; html & amp; gt; & amp; lt; head & amp; gt; & amp; l

DOM is the Document Object Model: the purpose of DOM creation is to reconstruct the entire HTML page and add, change, or rearrange projects on the page.
Look at the simplest html file:

DOM

Hello phpddt.com

Hello world!

Let's see:

Clearly, there is only one root node., Which has two subnodes:AndIn the same way, there are subnodes!
Since you want to refactor the html page, you have to get the node value. How can you get the node value?
(1) getElementById () and getElementsByTagName () getElementsByName ()
The getElementById () method returns a reference to the first object with the specified ID. Note that a value is returned.
The getElementsByTagName () method returns a set of objects with the specified tag name. Note that an array is returned.
The getElementsByName () method returns a set of objects with the specified name. It mainly returns an array, which can be seen from the s behind the Element!
This method is similar to the getElementById () method, but it queries the name attribute of an element rather than the id attribute.
You can fully understand the following example:
Test it by yourself. You can easily see the differences between the three!


   
   Php point-through-www.phpddt.com Script function getId () {$ val = document. getElementById ("myId"); alert ($ val. innerHTML);} function getName () {var x = document. getElementsByName ("myInput"); alert (x. length);} function getTagName () {var x = document. getElementsByTagName ("input"); alert (x. length);} script  

This is a demonstration of the getElementById method.



(2) Use parentNode, firstChild, and lastChild to perform "short-distance travel" in the document ".


                
           Untitled Document          
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.