Javascript-dom Document Object Model 1

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.

One: 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
  • J Avascript can change all CSS styles in the page
  • JavaScript can react to all the events in the page

Two: Find 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

　　

1) Find the label

Get a single element document.getElementById (' I1 ')
Get multiple elements (list) document.getelementsbytagname (' div ')
Get multiple elements (list) Document.getelementsbyclassname (' C1 ')
A. Direct search
document.getElementById get a label by ID
Document.getelementsbyname get a collection of tags based on the Name property
Document.getelementsbyclassname get a collection of tags based on the class property
document.getElementsByTagName get a collection of tags by tag name

2) Indirect

Tag=document.getelementbyid ("L1")

parentelement//parent node Tag element

Children//All child node labels

Firstelementchild//First child tag element

Lastelementchild//Last child tag element

Nextelementsibling//Next sibling tag element

Previouselementsibling//Previous sibling tag element

Three: Label Operation 1) InnerText

Get the text content in a label

tags. innerText

　　　　

Modify the text of the label content

tags. innertext= "content"

2) ClassName

Tag.classname = Direct whole operation, get all class contents, string

Tag.classlist gets all the contents of the class, returns the list

Tag.classList.add ("style name") Add the specified style

Tag.classList.remove ("style name") Delete the specified style

3) checkbox

Get value
CheckBox object. Checked
Setting the value
CheckBox object. Checked = True

Ps:

　　　　　　　　

<div onclick= ' func (); ' > Point Me </div>
<script>
function func () {

}

</script>

Four: Example 1) Simulation dialog box

　　

<!    DOCTYPE html>2) Example of the full selection of the table to cancel the reverse selection
<!    DOCTYPE html>3) Example-left menu
　　
<!    DOCTYPE html>
Javascript-dom Document Object Model 1