JavaScript DOM programming common methods and properties __ programming

DOM is an abbreviation of the Document Object model. Based on the DOM specification, Dom is a browser, platform, language-independent interface that allows you to access other standard components of the page.

characteristics and methods of node interface

Features/Methods	type/put back type	Description
NodeName	String	The name of the node, defined by the type of the node
NodeValue	String	The value of the node, defined by the type of the node
NodeType	Number	One of the type constant values of the node
Ownerdocument	Document	Point to the document to which this node belongs
FirstChild	Node	Point to the first node in the ChildNodes list
LastChild	Node	Point to the last node in the ChildNodes list
ChildNodes	NodeList	List of all child nodes
PreviousSibling	Node	Point to the previous sibling node; If this node is the first sibling node, then the value is null
NextSibling	Node	Point to the latter sibling node; If this node is the last sibling node, then the value is null
HasChildNodes ()	Boolean	When childnodes contains one or more nodes, returns true
Attributes	NamedNodeMap	Contains a Attr object that represents an attribute of an element; only for ELEMENT nodes
AppendChild (node)	Node	Add node to end of ChildNodes
RemoveChild (node)	Node	Remove node from childnodes
ReplaceChild (NewNode, OldNode)	Node	Replace OldNode in childnodes with NewNode
InsertBefore (NewNode, Refnode)	Node	Insert NewNode before refnode in ChildNodes

HasChildNodes ()--see if child nodes exist
This method is used to check whether an element has child nodes, and the return value is true or false.

var booleanvalue = Element.haschildnodes ();

Text nodes and attribute nodes cannot contain any child nodes, so the return value of using the HasChildNodes method for both types of nodes is always false.

ReplaceChild ()--node replacement
Replaces a 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.
If the child node being inserted also has child nodes, those child nodes are also inserted into the target node

GetAttribute ()--Find attribute node
Returns the value of a given attribute node for a given element

var attributevalue = Element.getattribute (AttributeName);

The name of the given property must be passed to the method as a string.
The value of the given property is returned as a string, and getattribute () returns an empty string if the given property does not exist.

SetAttribute ()--Setting the property node
Adds a new property value to the given element node or changes the value of its existing property.

Element.setattribute (Attributename,attributevalue);

The name and value of the property must be passed as a string to this method
If this property already exists, its value will be refreshed;
If it does not exist, the setattribute () method first creates it and assigns it a value.

CreateElement ()--Create a new element node
Creates a new element node according to the given label name. Method has only one argument: the name of the element that will be created, is a string.

var reference = document.createelement (element);

Method return value: 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, the new node has no nodeparent attribute, it is just an object that exists in the JavaScript context.

var pelement = document.createelement ("P");

createTextNode ()--Create a new text node
Creates a new text node that contains the given text. The return value of this method is a reference pointer to a new text node.
var textnode = document.createTextNode (text);
Method has only one parameter: The text string contained in the new text node
Method return value: is a reference pointer to the new node. It is a text node, so its NodeType property equals 3.
The new element node is not automatically added to the document, and the new node does not have the Nodeparent attribute

var pelementtext=document.createelement ("Li");
var textelement=document.createtextnode ("Nanjing");
Pelementtext.appendchild (TextElement);

AppendChild ()--Insert node (1)
Adds a child node to a given element:
var newreference = Element.appendchild (newchild).
The given child node newchild becomes the last child node of the given element node element.
The return value of the method is a reference pointer to the new child node.
This method is usually used in conjunction with createelement () createTextNode ()
The new node can be appended to any one of the elements in the document

var newlielement=document.createelement ("Li");
 var textnode=document.createtextnode ("Beijing");
 Newlielement.appendchild (textnode);
 Document.body.appendChild (newlielement);
 
 var lielement=document.getelementsbytagname ("Li");
 var Textvalue=lielement[0].firstchild.nodevalue;
 alert (TextValue);

insertbefore ()--Insert Node (2)
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 node TargetNode.
Node TargetNode must be a child of element elements.
This method is usually used in conjunction with createelement () and createTextNode ().

<ul id= "City" >     <li value= "beijing^" id= "Beijing" > Beijing </li>        </ul>
<ul id= " City01 ">   <li value=" shanghai^ "id=" Shanghai "> Shanghai </li>          </ul>
 //Get parent node
 var Parentcitynode=document.getelementbyid ("City");
 Gets the child node
 var beijingnode=document.getelementbyid ("Beijing");
 var Shanghainode=document.getelementbyid ("Shanghai");
 Insert
 Parentcitynode.insertbefore (Shanghainode,beijingnode);

removechild ()--Delete child nodes
Deletes 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 of the child nodes that the node contains will be deleted at the same time.

<ul id= "City" >  <li value= "beijing^" id= "Beijing" > Beijing </li> </ul>
var ulelement= document.getElementById ("City");
var Lielement=document.getelementbyid ("Beijing");
Ulelement.removechild (lielement);

If you want to delete a node, but do not know which parent node it is, the ParentNode attribute can help.

<ul id= "City" >  <li value= "beijing^" id= "Beijing" > Beijing </li> </ul>
var lielement= document.getElementById ("Beijing");
var Parentelement=lielement.parentnode;
Parentelement.removechild (lielement);

ChildNodes--Traversing the node tree

ChildNodes: Returns an array that consists of the child nodes of a given element node:

var nodelist = node.childnodes;

Neither the text node nor the attribute node can contain any child nodes, so their childnodes properties always return an empty array.
If you want to know if an element has child nodes, you can use the HasChildNodes method.
If you want to know how many child nodes an element has, you can use the Length property of the ChildNodes array.
The ChildNodes property is a read-only property.

FirstChild--Get first child node

FirstChild: This property returns the first child node of a given element node, which returns a pointer to this node object.

var reference = Node.firstchild;

Neither the text node nor the attribute node can contain any child nodes, so their firstchild properties always return null.
The FirstChild property of an element is equivalent to the first node in the ChildNodes node collection of this element, namely:

var reference = node. Childnodes[0];

The FirstChild property is a read-only property.

LastChild: Gets the last child node.

NextSibling: Returns the next sibling node of a given node.

PreviousSibling: Returns the previous sibling node of a given node.

ParentNode: Returns the parent node of a given node.
The ParentNode property returns a node that is always an element node because only element nodes can contain child nodes.
The document node does not have a parent node.

Collection of Document objects

Collection	Description
All[]	Provides access to all HTML elements in a document.
Anchors[]	Returns a reference to all Anchor objects in the document.
Applets	Returns a reference to all the Applet objects in the document.
Forms[]	Returns references to all Form objects in the document.
Images[]	Returns a reference to all the Image objects in the document.
Links[]	Returns references to all area and Link objects in the document.

properties of the Document object

Property	Description
Body	Provides direct access to <body> elements. For documents that have a frameset defined, this property refers to the outermost <frameset>.
Cookies	Sets or returns all cookies associated with the current document.
Domain	Returns the domain name of the current document.
LastModified	Returns the date and time the document was last modified.
Referrer	Returns the URL of the document that is loaded into the current document.
Title	Returns the title of the current document.
Url	Returns the URL of the current document.

method of Document object

Method	Description
Close ()	Closes the output stream opened with the Document.open () method and displays the selected data.
getElementById ()	Returns a reference to the first object that has the specified ID.
Getelementsbyname ()	Returns a collection of objects with the specified name.
getElementsByTagName ()	Returns a collection of objects with the specified label name.
Open ()	Opens a stream to collect output from any document.write () or Document.writeln () method.
Write ()	Writes an HTML expression or JavaScript code to a document.
Writeln ()	Equivalent to the Write () method, which is different from writing a newline character after each expression.