DOM (JavaScript learning notes)

The DOM is an API (application interface) for HTML and XML documents.

All DOM objects in IE are implemented in the form of COM objects, so it is important to note that DOM objects in IE are inconsistent with the behavior or activity characteristics of native JavaScript objects.

1. Node hierarchy

The document node is the root node of each document .

1.1Node type

NODE. Element_node (1)

NODE. Attribute_node (2)

NODE. Text_node (3)

Node.comment_node (8)

NODE. Document_node (9)

NODE. Document_type_node (10)

NODE. Document_fragment_node (11)

(somenode.nodetype==1) Use this method to determine the type of the element, not somenode.nodetype = = NODE. Element_node, because IE browser does not support

(1) NodeName and NodeValue

If it is an element node, NodeName is the signature and nodevalue is null

(2) Node relationship

ChildNodes Property

Each node has a ChildNodes property, which holds a NodeList object, which is the result of dynamically executing the query based on the DOM structure. To access the elements in the nodelist, you can either use the [ordinal] or the SomeNode.childNodes.item (ordinal) method.

NodeList are class array objects that can be converted into arrays:

var nodearray=array.prototype.slice.call (somenode.childnodes,0);

(In IE, you need to enumerate all the members manually)

ParentNode Property

NextSibling Property

PreviousSibling Property

FirstChild Property

LastChild Property

HasChildNodes () Method: Returns True when the node contains one or more child elements

Ownerdocument property: Points to a document node that represents the entire document

(3) Operation node

AppendChild (NewNode) method: Adds a node to the end of the ChildNodes list. If the incoming node is in the ChildNodes list, it will move the node from its original position to the last. The return value is NewNode

InsertBefore (Newnode,refnode) method: Inserts a new node before referring to node, if the reference is null then the same as the AppendChild () method. The return value is NewNode

ReplaceChild (insert node, replaced node) method: Deletes the replaced node, and the insertion node occupies its position. The return value is the node that is being replaced. That is, the replacement node is still in the document, but there is no location.

RemoveChild (Deleted node) method: Returns the deleted node, which is still in the document, but does not have its own location

All four of these methods have to get the parent element

(4) Other methods

Somenode.clonenode (): parameter is true, copy element and child element; false copy element itself

Somenode.normalize (): Delete an empty text node, merging two adjacent text nodes

DOM (JavaScript learning notes)