Javascript DOM Programming

Javascript DOM Programming

Access HTML elements

→ Access HTML elements by ID.

→ Access HTML elements based on node relationships.

 

Commonly used

Document. getElementById ("idVal ");

The node whose ID is idVal is obtained.

Document. getElementsByName ("name ");

The returned tag set with the name attribute as name

Document. getElementsByTagName ("input ")

Returns the set of all input tags.

 

---------------- Addition, deletion, modification, and query of DOM

Add:

 

1. Create a node using document. createElement (Tag). The Tag must be a legal HTML Tag name.

The replication Node uses Node cloneNode (boolean deep). When deep is set to true, it indicates that when the current Node is copied, it also copies all the content in it. Otherwise, it copies itself.

2. Add the Node appendChild (Node newNode) as the last Node.

InsertBefore (Node newNode, Node refNode) is added to the front of the refNode Node

ReplaceChild (Node newNode, Node oldNode) replace Node

Delete:

Delete a node using removeChild (oldNode) to delete the oldNode node parameter. The object can also be a number.

 

Change:

Obtain the element to be modified and then modify innerHTML or its value.

 

Query:

 

Access Node: Use document. getElementById ("id ");

You can also use the sibling relationship between nodes.

Access form: the first element in the form is returned using document. getElementById ('form'). elements [0.

Document. getElementById ('form'). elements ['pass'] returns the form element whose name is pass.

Access the list box: document. getElementById ('select'). options [n] select the nth element in the list.

 

Access table element: document. getElementById ('table'). row [1]. cells [2] returns the third row of table 2nd.