Relationship between html dom and xml dom:
What is DOM?
DOM is the W3C standard.
DOM defines the criteria for accessing HTML and XML documents:
"The W3C Document Object Model (DOM) is a platform-neutral and language-neutral interface that allows programs and scripts to dynamically access and update document content, structures, and styles ."
W3C DOM standards are divided into three different parts:
Core DOM-Standard Model for any structured document
Xml dom-Standard Model for XML documents
Html dom-Standard Model for HTML documents
DOM is the abbreviation of Document Object Model.
What is xml dom?
The xml dom defines the objects and attributes of all XML elements and their access methods.
What is html dom?
Html dom is:
Standard HTML Object Model
Standard HTML programming interface
W3C Standard
Html dom defines the objects and attributes of all HTML elements and the methods to access them.
In other words, html dom is a standard for getting, modifying, adding, or deleting HTML elements.
Html dom node tree
Html dom treats HTML documents as a tree structure. This structure is called a node tree:
With html dom, all nodes in the tree can be accessed through JavaScript. All HTML elements (nodes) can be modified or created or deleted.
DOM Node
According to W3C html dom standards, all content in HTML documents is node:
The entire document is a document Node
Each HTML element is an element node.
The text in the HTML element is a text node.
Each HTML attribute is an attribute node.
Annotation is a comment node.
Node parent, child, and compatriot
Nodes in the node tree have hierarchical relationships with each other.
Terms such as parent, child, and sibling are used to describe these relationships. The parent node has a subnode. Sub-nodes of the same level are called siblings ).
In the node tree, the top node is called root)
Each node has a parent node, except the root node (it does not have a parent node)
A node can have any number of sub-accounts
A compatriot is a node with the same parent node
The following figure shows a part of the node tree and the relationship between nodes:
Html dom method
The method is the action that can be executed on the node (HTML element.
Programming Interface
Html dom can be accessed through JavaScript (and other programming languages.
All HTML elements are defined as objects, while programming interfaces are object methods and object attributes.
Actions that you can perform (such as adding or modifying elements ).
Attribute is the value that you can obtain or set (such as the name or content of a node ).
Html dom object-methods and attributes
DOM attributes
InnerHTML attributes
The easiest way to get element content is to use the innerHTML attribute.
The innerHTML attribute is useful for retrieving or replacing HTML elements.
NodeName attribute
The name of the node specified by the nodeName attribute.
NodeName is read-only
The nodeName of the element node is the same as the label name.
The nodeName of the attribute node is the same as the attribute name.
The nodeName of the text node is always # text
The nodeName of the document node is always # document
Note: nodeName always contains the uppercase letter Tag Name of the HTML element.
NodeValue attributes
The nodeValue attribute specifies the value of a node.
The nodeValue of an element node is undefined or null.
The nodeValue of a text node is the text itself.
The nodeValue of the attribute node is the property value.
NodeType attributes
The nodeType attribute returns the node type. NodeType is read-only.
Important node types include:
Element type |
NodeType |
Element |
1 |
Attribute |
2 |
Text |
3 |
Note |
8 |
Document |
9 |
Html dom access
GetElementById () method
The getElementById () method returns the element with the specified ID:
node.getElementById("id");
GetElementsByTagName () method
GetElementsByTagName () returns all elements with the specified tag name.
node.getElementsByTagName("tagname");
GetElementsByClassName () method
If you want to find all HTML elements with the same class name, use this method:
document.getElementsByClassName("intro");
The preceding example returns a list of all elements containing class = "intro:
Note: getElementsByClassName () is invalid in Internet Explorer 5, 6, 7, and 8.
Example of HTML events:
When a user clicks the mouse
When a webpage is loaded
When the image is loaded
When you move the cursor over an element
When the input field is changed
When an HTML form is submitted
When a user triggers a button
Onload and onunload events
When a user enters or leaves the page, the onload and onunload events are triggered.
The onload event can be used to check the browser type and version of a visitor so that different versions of web pages can be loaded based on the information.
Onload and onunload events can be used to process cookies.
Onchange event
Onchange events are often used for verification of input fields.
The following example shows how to use onchange. When you change the content of the input field, the upperCase () function is called.
Onmouseover and onmouseout events
Onmouseover and onmouseout events can be used to trigger a function when the mouse pointer moves to or leaves an element.
Onmousedown, onmouseup, and onclick events
Onmousedown, onmouseup, and onclick events are all the processes of Mouse clicking. When a mouse button is clicked
Onmousedown event. When the mouse button is released, the onmouseup event is triggered.
Onclick event.
Used to process DOM element attributes of XML documents
Attribute name |
Description |
ChildNodes |
Returns an array of all child elements of the current element. |
FirstChild |
Returns the first subelement of the current element. |
LastChild |
Returns the last child element of the current element. |
NextSibling |
Returns the elements that follow the current element. |
NoedValue |
Specifies the read/write attribute of the element value. |
ParentNode |
Returns the parent node of an element. |
Previussibling |
Returns the element adjacent to the current element. |
DOM element method used to traverse XML documents
Attribute name |
Description |
GetElementById (id) (document) |
Obtain the elements in the document with the specified unique ID property value |
GetElementsByTagName (name) |
Returns the array of child elements specified by the calibration name in the current element. |
HasChildNodes () |
Returns a Boolean value indicating whether the element has a child element. |
GetAttribute (name) |
Returns the attribute value of an element. The attribute is specified by name. |
W3C DOM attributes and methods used for dynamic content creation
Attribute/Method |
Description |
Document. createElement (tagName) |
The createElement method on the document object can create elements specified by tagName. If the string div is used as the method parameter, a div element is generated. |
Document. createTextNode (text) |
The createTextNode method of the Document Object creates a node that contains static text. |
. AppendChild (childNode) |
The appendChild method adds the specified node to the subnode list of the current element (as a new subnode ). For example, you can add an option element as a subnode of the select element. |
. Getattrure (name) |
These methods obtain and set the value of the name attribute in the element respectively. |
.. Setattrube (name, value) |
. InsertBefore (newNode, targetNode) |
This method inserts the node newNode as the child node of the current element in front of the targetNode element. |
. RemoveAttribute (name) |
This method deletes the attribute name from the element. |
. RemoveChild (childNode) |
This method deletes the child element childNode from the element. |
. ReplaceChild (newNode, oldNode) |
This method replaces the node oldNode with the node newNode. |
. HasChildnodes () |
This method returns a Boolean value that specifies whether the element has child elements. |
For the attributes and methods of all objects in dom, see w3cschool.
Browser Object Reference Manual
Click the following link to obtain more information about the following objects, including their collections, attributes, methods, and events. It contains a large number of instances!
Object |
Description |
Window |
The top-level object in the JavaScript level, indicating the browser window. |
Navigator |
Contains information about the client browser. |
Screen |
Contains information about the client display. |
History |
Contains the URL accessed by the browser window. |
Location |
Contains information about the current URL. |
Html dom object reference manual
Click the following link to learn more about objects, their collections, attributes, methods, and events. It contains a large number of instances!
Object |
Description |
Document |
Represents the entire HTML document and can be used to access all elements on the page. |
Anchor |
Element |
Area |
Elements in image ing |
Base |
RepresentativeElement |
Body |
RepresentativeElement |
Button |
RepresentativeElement |
Event |
Indicates the status of an event. |
Form |
Representative Element |
Frame |
Represents the <frame> element |
Frameset |
Represents the <frameset> element |
Iframe |
Represents the <iframe> element |
Image |
Element |
Input button |
Represents a button in an HTML form. |
Input checkbox |
Indicates the check box in an HTML form. |
Input file |
Uploads files in HTML forms. |
Input hidden |
Represents a hidden field in an HTML form. |
Input password |
Indicates the password field in the HTML form. |
Input radio |
Indicates the radio button in the HTML form. |
Input reset |
Indicates the reset button in the HTML form. |
Input submit |
The confirmation button in the HTML form. |
Input text |
Indicates the text input field (text box) in an HTML form) |
Link |
Representative Element |
Meta |
Representative Element |
Object |
RepresentativeElement |
Option |
RepresentativeElement |
Select |
Indicates the selection list in the HTML form. |
Style |
Represents a separate style Declaration |
Table |
Representative
Element
TableData |
Representative |
Element |
TableRow |
Representative |
Element
Textarea |
RepresentativeElement </td> </tr> </tbody> </table>
|
|