JavaScript Learning (i)

1. Nodes and their types:

1). Element node
2). Attribute node: An attribute of an element that can be manipulated directly by a property.
3). Text node: is a child node of an element node whose contents are text.

2. Where do you write the JS code in the HTML document?

0). Write the code directly in the HTML page.

<button id= "button" onclick= "alert (' Hello World ');" >click me!</button>

Disadvantages:
①. js and HTML strongly coupled, without the use of code maintenance
②. If the click function is more complex, you need to define a function and then complete a reference to the function in the OnClick property, which is more troublesome

1). Generally, the node within the body cannot be obtained directly before the body node, because the HTML document tree is not loaded yet.
Cannot get to the specified node:

var Citynode = document.getElementById ("city"); // The print result is null. alert (citynode); </script> ...

2). You can write similar code at the end of the entire HTML document, but this is not customary

3). Generally, the JS code is written before the body node, but requires the use of the Window.onload event,
The event is triggered after the current document is fully loaded, so the code in it can get to any node in the current document.

  function() {var citynode = document.getElementById ("city"); alert (citynode);}; </script> ...

3. How to get the element node:

1). **document.getelementbyid: Gets the corresponding individual node based on the id attribute

2). **document.getelementsbytagname:
Gets an array of the specified node names based on the tag name, the length property of the array object can get the lengths of the array

3). Document.getelementsbyname:
Gets an array of nodes that match the criteria based on the Name property of the node.
However, the way IE is implemented differs from the standard:
In an HTML document, if a node (LI) does not have a name attribute,
Then IE uses getelementsbyname cannot get to the node array, but Firefox can.

4). Other two methods, IE is not supported at all, so it is not recommended to use

4. Get the attribute node:

1). * * You can get and set the value of an attribute node directly through Citynode.id

2). Gets the attribute node through the GetAttributeNode method of the element node,
and read and write the property values 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 the specified node
A collection of specified child nodes that can be directly called by the getElementsByTagName () method of the element node.
2). FirstChild property gets the first child node
3). LastChild property gets the last child 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 the text node,
For example <li id= "BJ" name= "Beijing" > Beijing </li>, <p> which city do you like? </p>
You 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

7. Properties of the node:

1). NodeName: Represents the name of the current node. Read-only property.
* * If a given node is a text node, the NodeName property will return a string with #text content
2). NodeType: Returns an integer that represents the type of the given node.
Read-only property. 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

8. Create an element node:

1). createelement (): 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. The return value is an element node, so its NodeType property value is equal to 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 (): Creates a new text node that contains the given text. The return value for 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 the new text node contains. New element nodes are not automatically added to the document

10. Add a child node for the element node:

1). appendchild (): var reference = Element.appendchild (NewChild): The given child node NewChild becomes the last child node of the given element nodes element.
The return value of the method is a reference pointer to the new child node.

11. Replacement of the node:

1). ReplaceChild (): Replace one child node in a given parent element with another child node
var reference = Element.replacechild (Newchild,oldchild);
The return value is a reference pointer to the child node that has been replaced
2). This node has a mobile 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:

/** * Interchange anode and bnode* @param {object} anode* @param {object} BNode*/functionReplaceeach (Anode, BNode) {if(Anode = =BNode) {return;}varAparentnode =Anode.parentnode;//If anode has a parent nodeif(aparentnode) {varBparentnode =Bnode.parentnode;//if BNode has a parent nodeif(bparentnode) {varTempnode = Anode.clonenode (true); Bparentnode.replacechild (Tempnode, BNode); Aparentnode.replacechild (BNode, anode); }}} 

12. Insert the node:

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 the element node elements and appear in front of the node TargetNode. The node TargetNode must be a child node of element elements.

2). Customize the InsertAfter () method

/** * Insert newChild behind Refchild * @param {object} newchild* @param {object} refchild*/functionInsertAfter (NewChild, refchild) {varRefparentnode =Refchild.parentnode;//determine if the Refchild has a parent nodeif(refparentnode) {//determines whether the Refchild node is the last child node of its parent nodeif(Refchild = =refparentnode.lastchild) {Refparentnode.appendchild (newChild);}Else{refparentnode.insertbefore (newChild, refchild.nextsibling);} }}

13. Delete the node:

1). RemoveChild (): Removes a child node from a given element

var reference = element.removechild (node);

The return value is a reference pointer to a child node that has been deleted. When a node is deleted by the RemoveChild () method, all child nodes contained by the node are deleted at the same time.
If you want to delete a node, but do not know which parent node it is, the ParentNode property can help.

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, see api:nsextsibling, previoussibling, etc.

JavaScript Learning (i)