"JavaScript" JavaScript DOM programming

at the time of development, the main thing is to manipulate the DOM. dom:document An object model text object.

Dom is able to access and change the contents of a document in a platform-independent and linguistic way and structure.

The DOM is a tree-based API for XML (HTML).

Dom Tree: Represents the hierarchy of nodes. For example, with:

DOM nodes and their types: all of the content in an HTML document is a node.

ELEMENT nodes: Each HTML element is an element node.

Attribute node: An attribute of an element, an attribute node. Can be manipulated directly through attributes.

Text node: is a child node of an element node whose contents are text.

Example: <li id = "Hello" > Homecoming Dream </li>

In the example above,,<li> is the element node, id= "Hello" is the attribute node, Homecoming dream is a text node.

First write a HelloWorld program, to feel it.

</button>     </body> 

How to get ELEMENT nodes
1. Via document.getElementById ("id value"): Gets the corresponding individual node according to the id attribute

var bj =document.getelementbyid ("BJ"); by id= "BJ". To get the node alert (BJ) with the id "BJ";

To ensure that the id attribute value is unique. The method is the method of the Document object.

2) by document.getElementsByTagName ("tag name"): Gets the array of the specified node name according to the tag name, the length property of the array object can get the lengths of the array

var liNode = document.getelementsbytagname ("Li"); An array is obtained. The elements of the array include all tag names Li.
alert (linode.length);

The above method is to get the number of all LI nodes.
Assume that you want to get the byte point of a specified node by using the following methods:

var citynode = document.getElementById ("city");//Get the element node with ID city var citylinode = citynode.getelementsbytagname ("Li"); Gets the ID of the child node under the city element Alert (citylinode.length);

3) Get an array of nodes that match the criteria by Document.getelementsbyname (the value of "name"): The Name property of the node.

var gendernode = document.getelementsbyname ("gender"); alert (gendernode.length);

Note: When usingGetelementsbyname, there is only the attribute of the node has the name attribute, talent enough to obtain, assume that the name attribute is added. is not available in IE.

Get attribute node:

1) ability to get and set the value of an attribute node directly through the "node. Properties" method

First gets the specified element node var name = document.getElementById ("name");//reads the value of the specified node alert (name.value);//sets the value of the property of the specified node name.value= " Homecoming Dream ";

2) GetAttributeNode () Gets the attribute node by name and then reads and writes the property value through NodeValue

var nameNode = document.getElementById ("name"); Get node var by id nameattr = Namenode.getattributenode ("value"); Use the GetAttributeNode () method to get the attribute node alert (nameattr.nodevalue);//Get the value of the attribute node Nameattr.nodevalue = "Homecoming Dream"; Change the value of a property <input type= "text" name= "username" id= "name" value= "123"/>

Gets the child nodes of the element node (* * Only the ELEMENT nodes have child nodes!!):
1). The. ChildNodes property gets all the child nodes, but the method is not useful.

Given that you want to get a collection of the specified child nodes for the specified node, you can directly

Invokes the getElementsByTagName () method of the element node to get it.

2). FirstChild property gets the first child node.

3). LastChild property gets the last child node.

Gets all the child nodes of the city node var citynode  = document.getElementById ("city"); alert (cityNode.childNodes.length);// Gets all the child nodes of the city node. var Cityli = citynode.getelementsbytagname ("li"); alert (cityli.length);//Gets the first node and last node of the specified node alert ( Citynode.firstchild); alert (citynode.lastchild);

Get text node:
1). Step: Element node--Get child node of element node
2). If the element node has only one child node of the text node,
For example <li id= "BJ" name= "Beijing" > Beijing </li>, <p> which city do you like?

</p>,
Can get to the specified element node Elenode first,
Then use the EleNode.firstChild.nodeValue method to read and write the value of its text node

Gets the element node where the text node is located var bjtext = document.getElementById ("BJ");//Navigate to the text node by firstchild var bjtextnode = bjtext.firstchild;// NodeValue to manipulate the value of the text node alert (bjtextnode.nodevalue); bjtextnode.nodevalue = "Homecoming Dream";

Properties of the node:
1). NodeName: Represents the name of the current node. Read-only properties.
Assuming that a given node is a text node, the NodeName property returns a string with #text content
2). NodeType: Returns an integer that represents the type of the given node.
Read-only properties. 1--element node, 2--attribute node, 3--text node
3). NodeValue: Returns the current value (string) of the given node.

Readable and Writable properties
①. Element node, the return value is null.
②. Attribute node: The return value is the value of this property
③. Text node: The return value is the content of this text node

NodeType and NodeName are read only, and nodevalue can be changed. The above three properties only have the most use when reading and writing text values using NodeValue in a text node.

Create an element node:
1). createelement (): Creates a new element node according to the given tag name.

Method has only one parameter: the name of the element node being created is a

A string. The return value of the method: is a reference pointer to the new node, and the return value is an element node, so its NodeType property

The value is equal to 1. The new element node does not actively add itself to the document, it is simply an object that exists in the JavaScript context.
Create a text node:
1). createTextNode (): Creates a new text node that includes the given text. The return value of this method is a pointer to the new text node reference.

It is a text node, so its NodeType property equals 3. Method has only one parameter: The text string that is included in the new text node. New

ELEMENT nodes are not actively added to the document themselves.
To join a child node for an element node:
1). appendchild (): var reference = Element.appendchild (NewChild): Given child node NewChild will be the given element node

The last child node of the element. The return value of the method is a reference pointer to the new child node.

Creates a new element node. and add the node as a child of the specified node//Create Element child node var liNode = document.createelement ("li");//Get the element node of the child node to join var Citynode = document.getElementById ("city");//Append the created child node to the element node City.appendchild (liNode);//Create text node var textnode = document.createTextNode ("Homecoming Dream");//Add a text node to the child node Linode.appendchild (textnode);

Replacement of the node:
replacechild (): replaces one child node in a given parent element with another child node
var reference = Element.replacechild (Newchild,oldchild);
The previous parameter in the parentheses is the new value after the substitution, and the subsequent parameters are the nodes to be replaced.

var bjnode = document.getElementById ("BJ");  //Get BJ node var rlnode = document.getElementById ("RL");     Get RL node var citynode = document.getElementById ("city"); Gets the parent node of the BJ Node Citynode.replacechild (rlnode,  bjnode);         Make a replacement for a node

the node has a moving function in addition to the Replace function.
This method can only complete one-way substitution, if you need to use bidirectional substitution, you need to define the function:

function Replaceeach (anode, BNode) {//parentnode gets the parent node of the child node. var aparent = Anode.parentnode; var bparent = Bnode.parentnode; if (aparent && bparent) {var aNode2 = Anode.clonenod E (true); Clone the node Bparent.replacechild (ANode2, BNode); Aparent.replacechild (BNode, anode);}}

"JavaScript" JavaScript DOM programming