Common methods and attributes of javaScript DOM programming, javascriptdom

Common methods and attributes of javaScript DOM programming, javascriptdom

DOMIs the abbreviation of Document Object Model. According to W3C DOM specifications, DOM is an interface unrelated to browsers, platforms, and languages, allowing you to access other standard components on the page.

Features and methods of the Node interface

Features/methods	Type/release type	Description
NodeName	String	The node name. It is defined based on the node type.
NodeValue	String	Value of a node. It is defined based on the node type.
NodeType	Number	Node type constant value
OwnerDocument	Document	Document pointing to the node
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
Previussibling	Node	Indicates a forward sibling node. If this node is the first sibling node, the value is null.
NextSibling	Node	Point to the next sibling node. If this node is the last sibling node, the value is null.
HasChildNodes ()	Boolean	Returns true if childNodes contains one or more nodes.
Attributes	NamedNodeMap	Contains Attr objects that represent the characteristics of an Element. It is only used for Element nodes.
AppendChild (node)	Node	Add node to the end of childNodes
RemoveChild (node)	Node	Delete a node from childNodes
ReplaceChild (newnode, oldnode)	Node	Replace oldnode in childNodes with newnode
InsertBefore (newnode, refnode)	Node	Insert newnode before refnode in childNodes

HasChildNodes () -- check whether a subnode exists
This method is used to check whether an element has subnodes. the return value is true or false.

var booleanValue = element.hasChildNodes();

Text nodes and attribute nodes cannot contain any subnodes. Therefore, the return value of the hasChildNodes method for these two types of nodes is always false.

ReplaceChild () -- node replacement
Replaces one child node in a given parent element with another child node.

var reference = element.replaceChild(newChild,oldChild);

The returned value is a reference pointer pointing to the child node that has been replaced.
If the inserted child node has a child node, the child nodes are also inserted into the target node.

GetAttribute () -- search for Attribute nodes
Returns the value of a given attribute node for a given element.

var attributeValue = element.getAttribute(attributeName);

The name of a given attribute must be passed to this method as a string.
The value of a given attribute is returned as a string. If the given attribute does not exist, getAttribute () returns an empty string.

SetAttribute () -- set attribute nodes
Add a new attribute value to a given element node or change its existing attribute value.

 element.setAttribute(attributeName,attributeValue);

The attribute name and value must be passed to this method in the form of a string
If this property already exists, its value will be refreshed;
If it does not exist, the setAttribute () method will first create it and assign a value to it.

CreateElement () -- create a new element node
Creates a new element node based on the given tag name. The method has only one parameter: the name of the element to be created, which is a string.

var reference = document.createElement(element);

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. The new node does not have the nodeParent attribute. It is only an object in the JavaScript context.

var pElement = document.createElement("p");

CreateTextNode () -- create a new text node
Create a new text node that contains the given text. The return value of this method is a pointer to the new text node reference.
Var textNode = document. createTextNode (text );
The method has only one parameter: The text string contained in the new text node
Method return value: A Reference pointer pointing to a new node. It is a text node, so its nodeType attribute is equal to 3.
The new element node is not automatically added to the document. The new node does not have the nodeParent attribute.

Var pElementText = document. createElement ("li"); var textElement = document. createTextNode ("Nanjing"); pElementText. appendChild (textElement );

AppendChild () -- insert a node (1)
Add a subnode to a given element:
Var newreference = 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 a new subnode.
This method is usually used with createElement () createTextNode ().
The new node can be appended to any 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 () -- insert a node (2)
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 targetNode must be a subnode of the element.
This method is usually used in combination 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> // obtain the parent node var parentCityNode = document. getElementById ("city"); // obtain the subnode var beijingNode = document. getElementById ("beijing"); var shanghaiNode = document. getElementById ("shanghai"); // insert parentCityNode. insertBefore (shanghaiNode, beijingNode );

RemoveChild () -- delete a subnode
Deletes a subnode from a given element.

var reference = element.removeChild(node);

The returned value is a reference pointer to a deleted subnode.
When a node is deleted by the removeChild () method, all the child nodes contained in the node are also deleted.

<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 belongs to, 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 -- traverse the node tree

ChildNodes: returns an array consisting of subnodes of the given element node:

var nodeList = node.childNodes;

Neither the text node nor the attribute node can contain any subnodes. Therefore, their ChildNodes attribute always returns an empty array.
If you want to know whether an element has subnodes, you can use the hasChildNodes method.
To know the number of subnodes of an element, you can use the length attribute of the childNodes array.
The childNodes attribute is a read-only attribute.

FirstChild -- get the first subnode

FirstChild: This attribute returns the first child node of a given element node and the pointer of this Node object.

var reference = node.firstChild;

Neither a text node nor a property node can contain any child node. Therefore, their firstChild attribute always returns null.
The firstChild attribute of an element is equivalent to the first node in the childNodes node set of this element, that is:

var reference = node.ChildNodes[0];

The firstChild attribute is a read-only attribute.

LastChild: gets the last subnode.

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

Previussibling: returns the previous sibling node of a given node.

ParentNode: returns the parent node of a given node.
The node returned by the parentNode attribute is always an element node, because only an element node can contain subnodes.
The document node does not have a parent node.

Document Object set

Set	Description
All []	Provides access to all HTML elements in the 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 reference to all Form objects in the document.
Images []	Returns a reference to all Image objects in the document.
Links []	Returns reference to all Area and Link objects in the document.

Document Object Attributes

Attribute	Description
Body	Provides direct access to the <body> element. For documents that define a framework set, this attribute references the <frameset> of the outermost layer.
Cookie	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 modified.
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.

Document Object Method

Method	Description
Close ()	Close the output stream opened using document. open () and display the selected data.
GetElementById ()	Returns a reference to the first object with the specified id.
GetElementsByName ()	Returns a set of objects with the specified name.
GetElementsByTagName ()	Returns an object set with the specified tag name.
Open ()	Open a stream to collect output from any document. write () or document. writeln () method.
Write ()	Write HTML expressions or JavaScript code to the document.
Writeln ()	It is equivalent to the write () method. The difference is that a line break is written after each expression.

Question about javascript dom attributes?

This may be caused by different implementations of different browsers.
I tested ie6.0 and firefox3.0.11 with different results.

Whether or not the checked attribute of input is specified, they can get this attribute, but the attribute values are different. When the checked attribute is specified, ie gets false, and firefox gets true.

That is to say, ie does not support this js operation, whereas firefox does.

Your personal opinions are for reference only. If you have any mistakes, please correct them.

How to Learn DOM programming in Javascript

Dom-Document Object Model, simply put, is to split your client (IE/Firefox) into a single object in a tree structure from large to small for you to operate.
To put it bluntly, all the elements you see on the client (browser) can be operated by JavaScript.
If you have learned other languages, especially java or C # object concepts, I believe that dom can be quickly used. You don't need to define classes or instance objects. You just need to use these existing objects.

The dom tree is what you can imagine.

Window (form object)-document (document Object)-documentElement (document content root)-body-table-tr-td-span .....