Learn HTML DOM

What is DOM? The DOM is the standard for accessing HTML and XML documents, which defines the standard Document Object Model (DOM), which is neutral to the platform and language interface, which allows the program to dynamically access and update the document's content, structure, and style. The DOM consists of 3 parts: The core DOM: Standard Model XML DOM for any structured document: Standard Model HTML DOM for XML: Standard Model DOM for HTML documents is Document object Abbreviation for model (Document Object model) What is an XML DOM? The XML DOM defines the objects and properties of all XML elements, and the methods that access them. What is HTML DOM? The HTML DOM defines the objects and properties of all HTML elements, and the way they are accessed in the HTML DOM, where everything is a node, and the DOM is the Htmldom node that is considered a node tree The entire document is a document node each HTML element is a text node within the HTML element of the element node each HTML attribute is an attribute node comment is a comment node in the node tree, the topmost node is called the root node (HTML element in HTML) each node has a parent node. In addition to the root node one node can have any number of sub-siblings that are nodes that have the same parent node Dom method: All HTML elements are defined as objects in the way we can perform the Action property on the node that is able to get or access the value getElementById () Returns an element with the specified ID getElementsByTagName () returns a list of nodes (array of nodes) containing all elements with the specified label name (for example, p label) Getelementsbyclassname () Returns a list of nodes that contain all the elements with the specified class name (not valid in ie5,6,7,8) appendchild (node) adds a new element (child node), first you must create the element, append it to the existing element removechild (node) Delete child node (element) , you must be aware of the element's parent element. Parent.removechild (node) replacechild () replaces the child node, which is also the parent element that requires a clear element, Parent.replacechild (new element, old Element) InsertBefore () Inserts a new child node before the specified child node, the parent element. InsertBefore (new element, before this child element) CreateAttribute () Create attribute node createelement () Create element node createTextNode () Creates a text node getattribute () returns the specified property value setattribute() Sets or modifies the specified property to the specified value DOM property: The property is the value of the node, the ability to get and set the text value of the innerHTML node (element), get and replace, change the element content NodeName the name of the specified node (read-only) NodeName is a read-only element node NodeName the nodeName of the same attribute node as the tag name is the same as the property name the nodeName of the text node is always #text文档节点的 nodeName is always # Documentnodevalue the value of the specified node (the element node's nodevalue is undefined or null), the nodevalue of the element node is undefined or the null text node NodeValue is the text itself of the property node. NodeValue is a property value NodeType the type of the returned node, NodeType is a read-only element type NodeType element 1 attribute 2 text 3 Comment 8 document 9parentNode node (element) parent node ChildNodes node (element) The child node of the attributes node (element) of the attribute node FirstChild returns the first child node of the document LastChild returns the last sub-node of the document DOM root node: document.documentelement All documents document.body the body of the document changes the HTML Style node object. Style.color = "Blue";D om event: OnLoad and OnUnload events when the user enters and leaves the page, the onload and The OnUnload event onload event can be used to check the browser type and version of a guest to load a different version of a Web page based on that information onchange change the content event, validate the input field onmouseover move the mouse pointer to the element onmouserout mouse pointer away from element onmousedown mouse pointer is pressed onmouseup mouse button is released onclick mouse click event

　　

Learn HTML DOM