Javascript:dom programming



Javascript:dom programming
1. Nodes and their types
1) Element node
2) attribute node: An attribute of an element, typically, an action attribute node reads and writes a property value directly through the "element node. Property name" method.
3) Text node: Is the child node of the element, whose contents are text
Example <p title= "name" >donot Forget me</p>
Element node:p
Attribute node:title= "Name"
Text node:d onot Forget Me

Location of 2.js in HTML
In The Window.onload event is executed after the document is loaded, so any element can be obtained here.

3. How to get ELEMENT nodes
Element getElementById (String elementid): Gets the corresponding individual node based on the id attribute
NodeList getelementbytagname (String tagName): Gets the collection of the specified node according to the tag name
NodeList getelementbyname (String elementname): Gets a collection of nodes based on the Name property of the node
However, the implementation of IE and the standard is different: in the HTML document, if a node (for example, Li) does not have a name attribute, ie using getelementbyname () can not get to the node, but Firefox may

4. Get the attribute node
1) * * The value of the attribute node can be obtained and set by Node.id (node. property)
2) Get the attribute node through the element node GetAttributeNode (name) method, and then read and write the property value through NodeValue

5. Get 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 practical. Because if you want to get a combination of the specified child nodes of the specified node, you can call the Getelementbytagname () method of the element node directly to get
2) FirstChild property gets the first child node
3) LastChild Property last child node
4) ParentNode Property gets parent node

6. Get the text node:
1) Step: Element node--Get child node of element node
2) If the element node has only one child node of a text node
For example <li id= "BJ" name= "Beijing" > Beijing </p>
You can get to the specified element node Elenode first, and then use the EleNode.forstChild.nodeValue method to read and write the value of its text node

7. Node properties (NodeType, NodeName, NodeValue)
NodeType, NodeName, nodevalue are attributes that each node has, such as ID, name, which is the attribute
1) NodeName: Represents the name of the current node, read-only property. * * If a given node is a text node, nodename is #text
2) NodeType: Returns an integer that represents the type of the given node. Read-only property. 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, 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
8. Create an element node
1). createelement (String elementname): Creates a new element node according to the given label name.
Method has only one parameter: the name of the element node being created, is 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 value equals 1
* * The new element node is not automatically added to the document, it is just an object that exists in the JavaScript context
9. Create a text node
1). createTextNode (String TextValue): Creates a slap on a new text node containing the given text, the return value is a reference pointer to a new text node
Method has only one argument: the new text node lock contains a text string, and the element node is not automatically added to the document whole.
10. Adding child nodes to an element node
1) AppendChild (node node)
var reference = Element.appendchild (NewChild);
The given child node newchild becomes the last child node of the given element node elements
The return value of the method is a reference pointer to the new child node
11. Replacement of nodes
1). ReplaceChild (): Replace one child node in a given parent element with another child node
var reference = Element.replacechild (Newchild,lodchild)
The return value is a reference pointer to the child node that has been replaced
2). The node has a moving function in addition to the replacement function
3). This method can only complete one-way substitution, and if you need to use bidirectional substitution, you need a custom function
12. Delete a node
1). RemoveChild (): Removes a child node from a specified element
var reference = Element.removechild (node)
The return value is a reference pointer to a child node that has been deleted, and when a node is deleted by the RemoveChild () method, all child nodes contained by the node are deleted at the same time.
If you delete a node but do not know its parent, you can get the ParentNode property by using the
13. Inserting nodes
1). InsertBefore (): Inserts a given node in front of a given child node of a given element node
var reference = Element.insertbefore (Newnode,targetnode)
The node newnode will be inserted into element node elements and appear in front of the TargetNode
Node TargetNode must be a sub-node of element elements
14.innerHTML Properties
1). This property is supported by almost all browsers, but is not part of the DOM standard
The innerHTML property can be used to read and write HTML content in a given element
15. Other properties
ParentNode property: Gets the parent node of the given element
NextSibling property: Gets the previous element of the given element
PreviousSibling property: Gets the next element of the given element

Javascript:dom programming