JavaScript: DOM programming 1

JavaScript: DOM programming 1
Zookeeper

JavaScript: DOM Programming
1. nodes and their types
1) Element Node
2) attribute node: the attribute of the element. Generally, the Operation attribute node directly reads and writes the attribute value through "element node. attribute name ".
3) text node: a subnode of an element whose content is text
Example

Donot forget me

Element node: p
Attribute node: title = "name"
Text node: donot forget me

2. js location in html
In, Written in window. onload = function () {// js Code };
The window. onload event is executed after the document is loaded. Therefore, any element can be obtained here.

3. How to obtain element nodes
Element getElementById (String elementId): obtains a Single Node Based on the id attribute.
NodeList getElementByTagName (String tagName): obtains the set of specified nodes based on the tag name.
NodeList getElementByName (String elementName): obtains the set of Nodes Based on the node name attribute.
However, the implementation of IE is different from the W3C standard: in html documents, if a node (such as li) does not have the name attribute, IE cannot obtain the node using getElementByName, but Firefox can

4. Get attribute nodes
1) ** you can use Node. id (Node. Attribute) to obtain and set the attribute Node value.
2) The getAttributeNode (name) method of the element node is used to obtain the attribute node, and then the nodeValue is used to read and write the attribute value.

5. Obtain the subnode of an element node (** only an element node has a subnode !!)
1) The childNodes attribute obtains all the subnodes, but the method is not practical. If you want to obtain the combination of the specified child node of the specified node, you can directly call the getElementByTagName () method of the element node to obtain
2) obtain the first subnode from the firstChild attribute
3) lastChild attribute
4) obtain the parent node from the parentNode attribute

6. Get text nodes:
1) Step: Get the child nodes of an element node
2) If the element node has only one text node and one subnode
For example

Beijing

You can first obtain the specified Element Node eleNode, and then use the eleNode. forstChild. nodeValue method to read and write the value of its text node.

7. node attributes (nodeType, nodeName, and nodeValue)
NodeType, nodeName, and nodeValue are all attributes of each Node. id and name are attributes of a specific Node.
1) nodeName: indicates the name of the current node. It is read-only. ** If the given node is a text node, nodeName is # text
2) nodeType: return an integer, which indicates that the given node is of the type. Read-only attribute. 1 -- Element Node, 2 -- attribute node, 3 -- text node
** 3) nodeValue: returns the current value (string) of the given node ). Read/write attributes
① Element Node. the return value is null.
② Attribute node. The returned value is the value of this attribute.
③ Text node. The returned value is the content of this text node.
8. Create an element node
1). createElement (String elementName): creates an element node based on the given tag name.
The method has only one parameter: the name of the created element node, which is a string.
Method return value: A Reference pointer pointing to a new node. The returned value is an element node, so its nodeType attribute value is equal to 1.
** The new element node is not automatically added to the document. It is only an object in the JavaScript context.
9. Create a text node
1). createTextNode (String textValue): Creates a new text node that contains the given text. The returned value is a reference pointer pointing to the new text node.
The method has only one parameter: The text string contained in the new text node lock. The new element node is not automatically added to the entire document.
10. Add a subnode to an element node
1) appendChild (Node node)
Var reference = element. appendChild (newChild );
NewChild is the last child node of the given element.
The Return Value of the method is a reference pointer pointing to the newly added subnode.
11. node replacement
1). replaceChild (): replace one subnode in a given parent element with another subnode.
Var reference = element. replaceChild (newChild, lodChild)
The returned value is a reference pointer pointing to the child node that has been replaced.
2) In addition to the replacement function, the node also has the function of moving.
3) This method can only complete one-way replacement. If bidirectional replacement is required, you need to customize the function.
12. delete a node
1). removeChild (): deletes a subnode from a specified element.
Var reference = element. removeChild (node)
The returned value is a reference pointer pointing to a deleted subnode. When a node is deleted by the removeChild () method, all the subnodes contained in this node will be deleted at the same time.
If you delete a node but do not know its parent node, you can obtain it through the parentNode attribute.
13. Insert a node
1). insertBefore (): Insert a given node to the front of a given element node to the child node.
Var reference = element. insertBefore (newNode, targetNode)
The node newNode is inserted into the element of the element and appears before the targetNode.
The node targetNode must be a subnode of the element.
14. innerHTML attributes
1). Almost all browsers support this attribute, but it is not part of the DOM standard.
The innerHTML attribute can be used to read and write HTML content from a given element.
15. Other attributes
ParentNode attribute: gets the parent node of a given element.
NextSibling property: gets the previous element of a given element.
Previussibling attribute: gets the next element of a given element.