DOM based

I. Introduction to DOM

The three letters in DOM, D (document), can be understood as a Web page document loaded by the entire Web. O (object) can be thought of as something like a window object, you can call properties and methods, and here we’re talking about a Document object; M (model) can be understood as the tree structure of a web document.

DOM has three levels: DOM1, DOM2, and DOM3. DOM1 supports Internet explorer 6+, Firefox, Safari, Chrome, and Opera1.7+.

PS: All DOM objects in IE are implemented as COM objects, which means that the DOM in IE may differ somewhat from other browsers.

1. The node

When an HTML page is loaded, the Web browser generates a tree structure that represents the internal structure of the page. DOM understands this tree structure as consisting of nodes.

2. Node types: element node, text node, attribute node.

two Look for the element

Element node method

  1. GetElementById () gets the node of a particular ID element

  2. GetElementsByTagName () gets a list of nodes for the same element

  3. GetElementsByName () gets a list of nodes with the same name

  4. GetAttribute () gets the value of the node attribute of a particular element

  5. SetAttribute () sets the value of the node attribute of a particular element

  6. RemoveAttribute () removes a specific element node attribute

3. DOM node

1. Node Node properties

Nodes can be classified as element nodes, attribute nodes, and text nodes, which in turn have three very useful attributes: nodeName, nodeType, and nodeValue.

2. Hierarchy node attributes

The hierarchy of nodes can be divided into two types: parent node, child node and sibling node. When we get one of the element nodes, we can use the hierarchy node attribute to get the nodes of its related hierarchy.

  • ChildNodes: Gets all the children of the current element node
  • FirstChild: gets the firstChild of the current element node
  • LastChild: gets the lastChild of the current element node
  • OwnerDocument: Gets the document root of this node, equivalent to document
  • ParentNode: obtains the parentNode of the current node
  • PreviousSibling: gets the previousSibling of the current node
  • NextSibling: gets the nextSibling of the current node
  • Attributes: Gets a collection of all attribute nodes for the current element node

Four. Node operation

The DOM can not only find nodes, but also create nodes, copy nodes, insert nodes, delete nodes, and replace nodes.

  • The write() method inserts any string into the document
  • CreateElement () creates an element node
  • AppendChild () appends the new node to the end of the child node list
  • CreateTextNode () creates a file node
  • InsertBefore () inserts the new node in front of it
  • RepalceChild () replaces the old node with the new one
  • CloneNode () replicates the node
  • RemoveChild () removes a node