Change Font Size:

Visit DOM node 1 - getElementById ()

This section describes the use of getElementById () visit DOM node approach.

This section notes reference guide:

Just read the DOM structure - node tree. Now we can visit to see how the DOM nodes in a specific tree node.

GetElementById () - scored direct method

This is a joint visit to the most simple method, for example, has a web page id "testId" element, you can getElementById ( "testId") to access the node. So that it is not clear, or to see an example.

Use getElementById () Case

First, we now add this site a paragraph, HTML code below

  <p Id=" testId " /> 
This paragraph is to demonstrate getElementById () method visit DOM node. <br />
<img Src="images/logo.gif" alt=" Zhanqiruhefangwen DOM" /> <br />
</ P>

Then we can use getElementById ( "testId") to visit this section, the following section we will use examples of JavaScript code to control the display and hidden paragraphs. JS code as follows:

  <script Type="text/javascript" /> function hide () (document.getElementById ( "testId"). Style.display = "none";) function show () (document.getElementById ( "testId"). Style.display = "block";) </ script> 
...
<form Action="#" />
<button Onclick="hide(); return false;" value="Hidden" /> eaten it </ button>
<button Onclick="show(); return false;" value="Show" /> it spit it out </ button>
</ Form>

Actual results are as follows, click the button to test

This paragraph is to demonstrate getElementById () method visit DOM node.
Demonstrate how the visit DOM

Review JavaScript variables

We already know JS variables can be stored in digital or anything like that, but I believe that we, like me, learning JavaScript is not to do addition and subtraction multiplication and division. Below we look at the variables of the new application.

In fact, we can use the above examples in paragraphs with variable storage, the code below:

  Para = document.getElementById ( "testId") 

After para can use this variable to the paragraphs of this visit.


  1. On one: the structure of DOM
  2. Visit DOM node 1 - getElementById ()
  3. The following section: Visit DOM Node 2 - getElementsByTagName ()