The methods and properties commonly used by JavaScript DOM programming

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

Features and methods of the Node interface

Features/Methods	type/put back type	Description
NodeName	String	The name of the node, as defined by the type of the node
NodeValue	String	The value of the node. Defined according to 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; Suppose 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, the value is null
HasChildNodes ()	Boolean	When childnodes includes one or more nodes. return True
Attributes	NamedNodeMap	Includes a Attr object that represents the attributes of an element. Only for ELEMENT nodes
AppendChild (node)	Node	Add node to the 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 a child node exists
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 can no longer include any child nodes, so the return value of using the HasChildNodes method for both types of nodes is always false.

ReplaceChild ()--node substitution
Replaces 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.
Assuming that the child nodes that are inserted have 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 in the form of a string.
The value of the given property is returned as a string, assuming that the given property does not exist, and getattribute () returns an empty string.

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

Element.setattribute (Attributename,attributevalue);

The name and value of the property must be passed to this method in the form of a string
Assume that this property already exists. Its value will be refreshed;
Assuming it does not exist, the SetAttribute () method will first create it and assign it a value.

CreateElement ()--Create a new element node
Creates a new element node according to the given tag name.

The method has only one parameter: the name of the element that will be created. is a string.

var reference = document.createelement (element);

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 does not actively join the document itself, and the new node does not have the 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 includes the given text.

The return value of this method is a pointer to the new text node reference.

var textnode = document.createTextNode (text);
Method has only one parameter: The text string that is included in the new text node
The return value of the method: is a reference pointer to the new node. It is a text node, so its NodeType property equals 3.
The new element node does not actively participate in the document itself, the new node does not have the Nodeparent property

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

AppendChild ()--insertion node (1)
To add a child node for a given element:
var newreference = Element.appendchild (newChild).
Given a 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.
This method is typically used in conjunction with createelement () createTextNode ()
The new node can be appended to whatever element 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 ()--insertion 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 the element node elements and appears in front of the node TargetNode today.
The node TargetNode must be a child node of element elements.

This method is typically 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
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 included in the node are 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);

Suppose you want to delete a node, but you don't know which one it's parent node is. The ParentNode property 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 consisting of the child nodes of the given element node:

var nodeList = node.childnodes;

Neither the text node nor the attribute node can include any child nodes, so their ChildNodes property will always return an empty array.
Suppose you want to know if an element has a child node and can use the HasChildNodes method.

Suppose you want to know how many child nodes an element has. Ability to use the length property of the ChildNodes array.

The ChildNodes property is a read-only property.

FirstChild--Get the first child node

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

var reference = Node.firstchild;

Neither the text node nor the attribute node can include any child nodes, so their FirstChild property will always return null.
The FirstChild attribute 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 node returned by the ParentNode property is always an element node, because only element nodes are possible to include child nodes.
There is no parent node for the document node.

Collection of Document objects

Collection	Descriptive narrative
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 Applet objects in the document.
Forms[]	Returns a reference to all Form objects in the document.
Images[]	Returns a reference to all the Image objects in the document.
Links[]	Returns a reference to all area and Link objects in the document.

Properties of the Document object

Properties	Descriptive narrative
Body	Provides direct access to <body> elements. For a document that defines a frameset, this property refers to the outermost <frameset>.
Cookies	Sets or returns all cookies related to the current document.
Domain	Returns the domain name of the current document.
LastModified	Returns the date and time when the document was last changed.
Referrer	Returns the URL of the document that loads the current document.
Title	Returns the title of the current document.
Url	Returns the URL of the current document.

Method of Document Object

Method	Descriptive narrative
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 owns 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 ()	Open a stream to collect the output from whatever document.write () or Document.writeln () method.
Write ()	Write an HTML expression or JavaScript code to the document.
Writeln ()	Equivalent to the Write () method, the difference is to write a newline character after each expression.

The methods and properties commonly used by JavaScript DOM programming