DOM programming in JavaScript

DOM programming in JavaScript

Today I read some knowledge about web Front-end. The DOM programming notes for JavaScript are as follows:

1. nodes and their types:
1). Element Node
2). attribute node: the attribute of an element, which can be operated directly by attributes.
3). Text node: a subnode of an element node whose content is text.

2. Where can I write js Code?

0). write code directly on the html page.
Click Me!
Disadvantages:
①. Js and html are strongly coupled without code Maintenance
②. If the corresponding function of click is complex, you need to define a function first, and then reference the function in the onclick attribute, Which is troublesome.


1). Generally, nodes in the body cannot be directly obtained before the body node, because the html document tree has not been loaded yet,
The specified node cannot be obtained:

 Untitled Document<Script type = "text/javascript"> var cityNode = document. getElementById ("city"); // print the result as null. alert (cityNode); </script>......

2). Similar code can be written at the end of the entire html document, but this is not a habit

3). Generally, JavaScript code is written before the body node, but the window. onload event must be used,
This event is triggered after the current document is fully loaded, so the code in this event can obtain any node of the current document.

 
 Untitled Document<script type="text/javascript">window.onload = function(){var cityNode = document.getElementById("city");alert(cityNode);};</script>......

3. How to obtain element nodes:


1). ** document. getElementById: obtains a Single Node Based on the id attribute.


2). ** document. getElementsByTagName:

Obtains the array of the specified node name based on the tag name. The length attribute of the array object can obtain the length of the array.

3). document. getElementsByName:

Obtain the node array that meets the criteria based on the node name attribute,

However, the implementation of ie differs from W3C standards:

In the html document, if a node (li) does not have the name attribute,

The node array cannot be obtained by ie using getElementsByName, but Firefox can.

4). ie does not support the other two methods at all, so it is not recommended to use

4. Get attribute nodes:

1). ** you can directly obtain and set the attribute node value through cityNode. id.

2). Get the attribute node through the getAttributeNode method of the element node,

Then, read and write the attribute values through nodeValue.

5. Obtain the subnode of an element node (** only an element node has a subnode !!) :

1). the childNodes attribute is used to obtain all the child nodes, but this method is not practical.

You can directly call the getElementsByTagName () method of the element node to obtain the set of child nodes.

2). Obtain the first subnode from the firstChild attribute.

3) The lastChild attribute obtains the last subnode.

6. Get text nodes:

1). Step: Get the child nodes of the Element Node

2) If the element node has only one child node,

For example

Beijing

,

Which city do you like?

,

You can obtain the specified Element Node eleNode first,

Then, the eleNode. firstChild. nodeValue method is used to read and write the value of its text node.

7. node attributes:

1). nodeName: indicates the name of the current node. Read-only attribute.

If a given node is a text node, the nodeName attribute returns a string whose content is # text

2). nodeType: returns an integer representing the type of the given node.

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 (): Creates a new 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 the new node. the return 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 (): Creates a new text node that contains 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 attribute is equal to 3. the method has only one parameter: The text string contained in the new text node. the new element node is not automatically added to the document.

10. Add a subnode to an element node:

1 ). appendChild (): var reference = element. appendChild (newChild): newChild is the last child node of the given element node. 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, oldChild );

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 define a function:

/*** Interchange aNode and bNode * @ param {Object} aNode * @ param {Object} bNode */function replaceEach (aNode, bNode) {if (aNode = bNode) {return;} var aParentNode = aNode. parentNode; // if aNode has a parent node if (aParentNode) {var bParentNode = bNode. parentNode; // if bNode has a parent node if (bParentNode) {var tempNode = aNode. cloneNode (true); bParentNode. replaceChild (tempNode, bNode); aParentNode. replaceChild (bNode, aNode );}}}

12. Insert nodes:
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 of the node. The Node targetNode must be a subnode of the element.

2). Custom insertAfter () method

/*** Insert newChild to the back of refChild * @ param {Object} newChild * @ param {Object} refChild */function insertAfter (newChild, refChild) {var refParentNode = refChild. parentNode; // determine whether refChild has a parent node if (refParentNode) {// determine whether the refChild node is the last child node of its parent node if (refChild = refParentNode. lastChild) {refParentNode. appendChild (newChild);} else {refParentNode. insertBefore (newChild, refChild. nextSibling );}}}

13. delete a node:
1). removeChild (): deletes a subnode from a given element.
Var reference = element. removeChild (node );
The returned value is a reference pointer pointing to the deleted child node. When a node is deleted by the removeChild () method, all the child nodes contained in the node will be deleted at the same time.
If you want to delete a node but do not know which parent node it belongs to, the parentNode attribute can help.

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 the HTML content of a given element.

15. For other attributes, see API: nsextSibling, previussibling, etc.