Measure the test taker's knowledge about how to operate HTMLDOM in JavaScript.

This article mainly introduces the basic method of using JavaScript to operate HTMLDOM. HTMLDOM is a Document Object Model specifically applicable to HTMLXHTML. If you need it, refer to html dom, attackers 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

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

《script》document.write(Date());《script》

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
This example changes

Element Content:
Instance

Hello World!
《script》document.getElementById("p1").innerHTML="New text!";《script》

In this example, the element content is changed:
Instance

Old Header《script》var element=document.getElementById("header");element.innerHTML="New Header";《script》

Example:

• The preceding HTML document contains the id = "header" element.
• 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

《script》document.getElementById("image").src="landscape.jpg";《script》

Example:

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