JavaScript DOM is operating web interface, called the "Document Object Model" (Document Object Model). It is the role of the web page into a JavaScript object, which can perform various operations (such as add or delete content) script. DOM minimum constituent units, called nodes (node), a common type of node, there are four:
- Document: top node of the entire document tree.
- Element: page of various labels, such as
<body>.- Text: labels or tags contain text.
- Attr: page element attributes, such as
class="right".
One, Node
All DOM node objects inherit the Nodeinterface has some common properties and methods. This is the basis DOM operations.
1.1 Object Properties
baseURIProperty returns a string that represents the absolute path of the current page (browser URL path on the opposite page is calculated based on the property). The value of this attribute is generally by the current URL URL (iewindow.locationthe decision attribute). HTML can be used to<base>label changes the value of the attribute.isConnectedProperty returns a Boolean value that indicates whether the current node in the document.nodeTypeProperty returns an integer value representing the type of the current node. Node.DOCUMENT_XXX defined by the above-described various types.nodeNameProperty returns a string representing the name of the current node.nodeValueProperty returns a string that represents the current value of the text node itself. Only elements, text, annotated with text value, return all other types of nodesnull.textContentProperty returns a string that represents the current text node and all its descendant nodes. It will automatically ignore the current HTML tags inside a node, return all text content.parentNodeProperty returns the parent node of the current node. For a node, its parent node may be only three types: document node (Document), the element node (element) and the document fragments node (documentfragment).nextSiblingThe first sibling node of the current node returns the attribute (element, text, comment). As there are nonenull.previousSiblingThis property returns the first sibling node (element, text, comment) in front of the node. As there are nonenull.firstChildProperty returns the first child node of the current node (element, text, comment). If the current node has no children, it is returnednull.lastChildReturns the last child attribute node (element, text, comment) of the current node. If the current node has no children, it is returnednull.childNodesProperty returns an array object class (NodeListset), including members of all the child nodes of the current node (element, text, comment).Since the
NodeListobject is a dynamic collection, once the child node changes will immediately be reflected in the results are returned.
When the above returns the text node if the current node in front of a space, the property will return a text node, content spaces .
1.2 Object methods
hasChildNodesMethods used to indicate whether the current node has children.insertBeforeA method for inserting a node previously specified child node of the node (if the node to be inserted is currently existing DOM node, the node is removed from the original position, insert the new position). The first parameter is the method of the node to be insertednewNode, the second parameter is a child nodereferenceNode(if the second parameter isnull, the new node is inserted at the last position inside the current node, i.e., becomes the last child node). The return value is the new node is insertednewNode.removeChildA method for removing the sub-node from the current node. The method parameter is a child node to be removed. The return value is the node removed.replaceChildMethods used to a new node, replace a child of the current node. The method first parameternewChildis used to replace the new node, the second parameteroldChildis replaced to take the child node. The return value is the replacement node to gooldChild.getRootNode()Method returns the root node of the current document where the document.
Two, Document
documentNode object represents the entire document, each page has its own documentobjects. This node has two child nodes: a first node is a document type ( <!doctype html>); second top container tag of the HTML page <html>, which latter constitutes the root node (root node) of the tree structure, which are nodes other HTML tags lower node. documentThere are different ways objects can get:
- Normal web: using
documentorwindow.document. iframeWeb: UsingiframenodecontentDocumentproperties.
2.1 Object Properties
doctypeOwned property returns<DOCTYPE>nodes.document.firstChildUsually return this node.documentElementCurrent property returns the root element node of the document.document.lastChildUsually return this node.headAttribute points to<head>the node. This property is always there, if the page source code which is omitted, the browser will automatically be created.bodyProperty returns<body>nodes. This property is always there, if the page source code which is omitted, the browser will automatically be created.locationProperty is a native object provided by the browser, providing the relevant URL information and method of operation.cookieObject attributes native provided by the browser, for operating the browser Cookie.
2.2 Object Methods
querySelectorAllReturns the specified method of matching node selector element, a returnNodeListinstance. Return result is not a dynamic collection, it does not reflect real-time changes in element nodes. If multiple nodes satisfy the matching condition, a first matching node is returned. If a match is not found node is returnednull. It does not support CSS selectors pseudo-element (such as:first-lineand:first-letter) and pseudo-class selectors (such as:linkand:visited) that can not be selected pseudo-elements and pseudo-classes.getElementByIdMatch the specified method returns theidelement node attributes, return anNodeListinstance of non-real time to reflect changes in the document.getElementsByNameMethod returns the matchingnameelement node attributes, return anNodeListinstance of non-real time to reflect changes in the document.getElementsByTagNameMethod returns the matching tags node, returns anHTMLCollectioninstance, can reflect the changes in the document in real time.getElementsByClassNameMethod returns the name of the node class matches, returns anHTMLCollectioninstance of the document may reflect changes in real time.createElementA method for generating an element node, and returns the node.createAttributeThe method generates a new attribute node (Attrinstance), and returns to the node.createEventThe method of generating an event object (Eventinstance), the object may beelement.dispatchEventused a method, the specified triggering event. Parameter method is the type of event, such asUIEvents,MouseEvents,HTMLEventsand so on. Event Processing reference the next chapter.
Three, attribute
3.1 Object Properties
Element.attributesProperty returns a similar array of dynamic objects, the members are all attributes of the element tag node objects, attributes the change will be reflected in real time on the node object. Property itself is an object ( Attrthe object). Therefore, similar to the above properties of the array are returned node object, rather than an attribute value. Node object has properties nameand valueattributes, attribute names and values should properties equivalent to nodeNamethe properties and nodeValueattributes.
HTML attribute names turn keys JS: When you turn JS attribute names, all lower case; if the attribute names include multiple words, the use of camel spelling. Some HTML attribute name is a reserved word in JavaScript must be renamed when it turns JS property, mainly the following two:
forProperty tohtmlForclassProperty toclassName
Element.datasetProperty returns an object, the object can be read from this data-property. As <div data-timestamp="1522907809292"></div>, <div>element has a custom data-timestampproperty for the element used to add a time stamp.
HTML attribute names turn JS keys: turn into
datasetwhen the key name, followed by the conjunction line if followed by a lowercase letter, then the conjunction line is removed, the lowercase letters to uppercase letters, other characters unchanged. Converselydatasetwhen the keys turn into attribute names, all uppercase letters will be converted to the conjunction line + lowercase letters, and other characters unchanged. Asdataset.helloWorldwill turn intodata-hello-world.
3.2 Object Methods
hasAttributeMethod returns a Boolean value indicating whether the current node contains the elements of the specified property.getAttributeMethod returns the current element node of the specified property. If the specified property does not exist, it returnsnull.setAttributeThe method used for the current new property element. If the attribute of the same name already exists, edit existing properties is equivalent.removeAttributeA method for removing the specified property.