Home > Developer > JavaScript

Describes the basic method for JavaScript to operate html dom, including javascriptdom.

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

Describes the basic method for JavaScript to operate html dom, including javascriptdom.

With html dom, you can access all elements of JavaScript HTML documents.
Html dom (Document Object Model)
When a webpage is loaded, the browser creates a Document Object Model on the page ).
The html dom model is constructed as an object tree:

Through the programmable object model, JavaScript has sufficient capabilities to create dynamic HTML.

  • JavaScript can change all HTML elements on the page
  • JavaScript can change all HTML attributes on the page
  • JavaScript can change all CSS styles on the page
  • JavaScript can respond to all events on the page

Search for HTML elements
Generally, you need to operate HTML elements through JavaScript.
To do this, you must first find this 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
  • Search for HTML elements by id

The simplest way to search for HTML elements in the DOM is to use the element id.
In this example, find the id = "intro" element:
Instance

var x=document.getElementById("intro");

If this element is found, the method returns the element in the form of an object (in x.
If this element is not found, x contains null.
Search for HTML elements by Tag Name
In this example, find the element id = "main", and then find all <p> elements in the id = "main" element:
Instance

var x=document.getElementById("main");var y=x.getElementsByTagName("p");

Find HTML elements by Class Name
In this example, the getElementsByClassName function is used to find the elements of class = "intro:
Instance

var x=document.getElementsByClassName("intro");

Change HTML
Html dom allows JavaScript to change the content of HTML elements.
Change the HTML output stream
JavaScript can create dynamic HTML content:
Today's date is: Wed Oct 21 2015 14:43:25 GMT + 0800 (China Standard Time)
In JavaScript, document. write () can be used to directly output the stream content to HTML.
Instance

<!DOCTYPE html>


Lamp never uses document. write () after the document is loaded (). This will overwrite this document.


Change HTML content
Use the innerHTML attribute when modifying HTML content in the simplest way.
To change the content of HTML elements, use this syntax:
Document. getElementById (id). innerHTML = new HTML
In this example, the content of the <p> element is changed:
Instance


In this example, the content of the Instance


<!DOCTYPE html>



Example:


   
     
 
    
  • The preceding HTML document contains the  
    • 
    
  • We use html dom to obtain the id = "header" element.
    •  
 
    
  • JavaScript changes the content of this element (innerHTML)
    • 

   


Change HTML attributes
To change the attributes of HTML elements, use this syntax:


document.getElementById(id).attribute=new value



In this example, the src attribute of the  element is changed:
Instance


<!DOCTYPE html>

Example:


    
     
 
     
  • The preceding HTML document contains the element of id = "image ".
    •  
 
     
  • We use html dom to obtain the id = "image" element.
    •  
 
     
  • JavaScript changes the attributes of this element (Change "smiley.gif" to "landscape.jpg ")
    •

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.

Related Keywords:
html to dom tree how to operate chromecast basic html codes for beginners how to operate cmd how to operate outlook how to operate fitbit how to operate wordpress

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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