What is the DOM
DOM is not an object, not a method
DOM stands for Document Object Model, translated the document object model, it is a W3C standard interface specification developed a writing HTML parser.
DOM is the Document Object Model, model the entire document as an object, and the object is again a node objects.
DOM node is used to build the entire page, all the things that are inside the HTML node.
He said plainly, a API DOM is to provide an HTML document (interface). The API provides a set of operational methods and properties of HTML document elements, attributes, and text.
DOM version
DOM0 (non-standard)
DOM1: 1998 October 1
DOM2: November 13, 2000
DOM3: 2004 Year 04 Yue 07 Ri
DOM4: 2015 Year 11 Yue 19 Ri
DOM historical development will be divided into DOM0 to DOM4 level.
Non-standard, meaning that there is no uniform standard, not to "DOM" the concept of special mention. General did not say how many versions are generally said DOM2 or DOM0.
DOM0 stage provides quick access to some of the properties of the page common element node.
DOM2 class began, offers many ways to find an element node.
Before DOM2 level is usually to find an element node by node relationships between elements.
DOM node
In the HTML DOM (Document Object Model), each element is a node:
1, the document is a document node (document).
2, all HTML elements are the element node (elementNode).
3, all attributes are HTML attribute node (attributeNode).
4, the text element is inserted into the HTML text node (textNode).
5, the comment is a comment node.
Generally, we use the node can be roughly divided into: element nodes, attribute nodes, text nodes.
Note: In the DOM tree structure, the special attribute node, it is not a child element node.
| Node Type | nodeName | nodeType | nodeValue |
| Element node | Label name | 1 | null |
| Attribute nodes | Property name | 2 | Property Value |
| Text node | #text | 3 | Text content |
Note: nodeName get the tag name is pure capitalized.
Find some old node attributes:
document.body return body element of the document
document.images return all of the objects referenced images
document.links return all links and references to objects Area
document.anchors return all references to objects Anchors
document.forms return all forms object reference
Now commonly used method to find an element node:
document.getElementById ( "id string value"); a return element node dom
document.getElementsByName ( "name string attribute value"); dom element node returns a dummy array
parentNode.getElementsByTagName ( "tag name string"); dom element node returns a dummy array
parentNode.getElementsByClassName ( "class name character string"); dom element node returns a dummy array
parentNode.querySelector ( "selector string"); to get the (strong) by the selector, always get only the first element
parentNode.querySelectorAll ( "selector string") to obtain the (strong) by the selector, to obtain a pseudo-array
Note: Up to the last two with the best so, belonging to the ES6.
Finding common node attributes:
Two ways to see their name means.
Element nodes: ordinary node:
element.parentElement ement.parentNode
element.firstElementChild element.firstChild
element.lastElementChild element.lastChild
element.children element.childNodes
element.previousElementSibling node.previousSibling
element.nextElementSibling node.nextSibling
Note: Pseudo array of objects: a single node is not selected when the return is a pseudo array of objects.
There are two types: htmlCollectionList NodeList
But using it is the same, with variable catch it wants.
Operating element node:
Create a node:
document.createElement (tagString) to create an empty tag with the specified label name
Note: You can only call the document, and the return value is create an element node object, not added to the html document.
Adding a node:
parentElement.appendChild (newChildNode) is added to the last child of a parent node
parentElement.insertBefore (newChildNode, oldChildNode) insert the new node before the existing child node
Delete node:
parentElement.removeChild (ChildNode) is removed from the child node elements
Element.remove (Node) nodes removed
Alternatively Node (change):
parentElement.replaceChild (newnode, oldnode) replacing the child node elements
Cloning nodes:
element.cloneNode (boolean) clone node
CRUD element node is its common operation, DOM provides a number of ways to implement these operations
Note: The return value is a clone of a node, and did not join html document.
Text node operations:
This node content acquisition:
textNode.nodeValue
Note: The contents of a text node operation in general we are not required to get the text nodes, but to get the value of the text directly through the element node, this method is rarely used.
Gets only the contents of the text node:
elementNode.innerText only just a string of text
Get all the content element node below:
elementNode.innerHTML This method is resolved, you can write tags, attributes, know
NOTE: Both attributes are readable and writable, which value is a string, or can be obtained directly modified for the content.
Text node operation are generally accomplished by the element node, and includes an attribute innnerHTML innerText.