Web Development Technology--javascript HTML DOM1 (base, change HTML, change CSS)

Last Update:2014-12-16 Source: Internet

Author: User

Tags tag name

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

JavaScript HTML DOM

Through the HTML DOM, you can access all the elements of a JavaScript HTML document.

HTML DOM (Document Object model)

When a Web page is loaded, the browser creates a Document object model for the page.

The HTML DOM model is constructed as a tree of objects.

HTML DOM Tree

With the programmable object model, JavaScript has the ability to create dynamic HTML.

· JavaScript can change all HTML elements in a page

· JavaScript can change all HTML attributes in a page

· JavaScript can change all CSS styles in a page

· JavaScript can react to all the events in the page

Finding HTML elements

Typically, with JavaScript, you need to manipulate HTML elements.

In order to do this, you must first find the element. There are three ways to do this:

· Find HTML elements by ID

· Find HTML elements by tag name

· Find HTML elements by class name

Find HTML elements by ID

The simplest way to find HTML elements in the DOM is by using the ID of the element.

Instance

This example finds the id= "Intro" element:

var X=document.getelementbyid ("Intro");

If the element is found, the method returns the element in the form of an object (in X).

If the element is not found, the X will contain null.

Find an instance of an HTML element with a tag name

This example finds the element that id= "main" and then looks for all the <p> elements in "main":

var x=document.getelementbyid ("main"); var y=x.getelementsbytagname ("P");

tip: finding HTML elements through the class name is not valid in IE 5,6,7,8.

JavaScript HTML DOM-changing HTML

HTML DOM allows JavaScript to change the contents of HTML elements.

Changing the HTML output stream

JavaScript is able to create dynamic HTML content:

today's date is: Fri APR 16:44:31 gmt+0800 (China Standard Time)

In JavaScript, document.write () can be used to write content directly to the HTML output stream.

Instance

 
<!DOCTYPE html>
<html>
<body> 
    <script>
        document.write(Date());
    </script> 
</body>
</html>

tip: never use document.write () after the document is loaded. This overwrites the document.

Change HTML Content

The simplest way to modify HTML content is to use the InnerHTML property.

To change the contents of an HTML element, use this syntax:

document.getElementById (ID). innerhtml=New HTML

Instance

This example changes the contents of the <p> element:

 
<html>
    <body> 
        <p id="p1">Hello World!</p> 
        <script>document.getElementById("p1").innerHTML="New text!";</script> 
    </body>
</html>

Instance

This example changes the contents of the

 
<!DOCTYPE html>
<html>
    <body> 
        <h1 id="header">Old Header</h1> 
        <script>var element=document.getElementById("header");element.innerHTML="New Header";</script> 
    </body>
</html>

Example Explanation:

· The above HTML document contains the

· We use the HTML DOM to get the id= "header" element

· JavaScript changes the contents of this element (InnerHTML)

Changing HTML Properties

To change the attributes of an HTML element, use this syntax:

document.getElementById (ID). attribute=New Value

Instance

This example changes the SRC attribute of the element:

 
<!DOCTYPE html>
<html>
    <body>
        <img id="image" src="smiley.gif">
        <script>
            document.getElementById("image").src="landscape.jpg";
        </script>
    </body>
</html>

Example Explanation:

· The above HTML document contains the elements of the id= "image"

· We use the HTML DOM to get the elements of the id= "image"

· JavaScript changes the attributes of this element (change "smiley.gif" to "landscape.jpg")

JavaScript HTML DOM-changing CSS

HTML DOM allows JavaScript to change the style of HTML elements.

Change HTML Style

To change the style of your HTML elements, use this syntax:

document.getElementById (ID). style.property=New Style

Example 1

The following example changes the style of the <p> element:

<PID= "P2">Hello world!</P> <Script>document.getElementById ("P2"). Style.color="Blue";</Script>

Example 2

This example changes the style of the HTML element of the id= "ID1" when the user taps the button:

<id= "Id1">My Heading 1</H1  >

<type= "button"  onclick= "document.getElementById (' id1 '). Style.color= ' red '> Click here </button>

Web Development Technology--javascript HTML DOM1 (base, change HTML, change CSS)

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More