HTML Learning Note-domtable of Contents
- 1. What is DOM?
- 2. DOM node
- 3. DOM Methods
- 4. DOM Properties
- 5. DOM Access
- 6. DOM Modification
- 7. DOM Events
1What is DOM?
DOM is the standard of the World Wide Web Consortium.
The DOM defines the criteria for accessing HTML and XML documents:
The Document Object Model (DOM) is a platform-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. ”
The DOM standard is divided into 3 different parts:
• Core DOM-a standard model for any structured document
XML DOM-a standard model for XML documents
HTML DOM-a standard model for HTML documents
Editor's note: The DOM is an abbreviation for the Document Object model.
2DOM node
In the HTML DOM, all things are nodes. The DOM is the HTML that is considered a node tree.
- The entire document is a document node
- Each HTML element is an element node
- Text within an HTML element is a text node
- Each HTML attribute is an attribute node
- Comment is a comment node
Node parent, child, and sibling
A common error in DOM processing is that you want the element node to contain text.
- In this example: <title>dom tutorial </title>, element node <title> A text node with a value of "DOM Tutorial".
- The value of a text node can be accessed through the InnerHTML property of the node.
3DOM method
Methods are actions that we can perform on a node (HTML element).
Programming interface
- The 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 properties.
- Methods are actions that you can perform (such as adding or modifying elements).
- A property is a value that you can get or set (such as the name or content of a node).
Some common HTML DOM methods:
- getElementById (ID)-Gets the node (element) with the specified ID
- AppendChild (node)-Insert a new child node (element)
- RemoveChild (node)-Delete child nodes (elements)
Some common HTML DOM properties:
- InnerHTML-Text value of the node (element)
- ParentNode-parent node of the node (element)
- ChildNodes-Child nodes of nodes (elements)
- Attributes-node (element) attribute node
4DOM Properties
property is the value of the node (HTML element) that you can get or set.
Programming interface
- The 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 properties.
- Methods are actions that you can perform (such as adding or modifying elements).
- A property is a value that you can get or set (such as the name or content of a node).
InnerHTML Property
- The simplest way to get the content of an element is to use the InnerHTML property.
- The InnerHTML property is useful for getting or replacing the contents of an HTML element.
NodeName Property
- 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 property name
- The nodeName of a text node is always #text
- The nodeName of the document node is always #document
NodeValue Property
- The nodevalue of the 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 Property
The NodeType property returns the type of the node. NodeType is read-only.
| element Type |
NodeType |
| Elements |
1 |
| Property |
2 |
| Text |
3 |
| Comments |
8 |
| Document |
9 |
5DOM Access
Access HTML DOM-find HTML elements, access HTML elements equal to access nodes
- By using the getElementById () method
- By using the getElementsByTagName () method
- By using the Getelementsbyclassname () method
6DOM modification
Modify HTML = change elements, attributes, styles, and events.
Using Events
.........
7DOM Events
- When the user clicks the mouse
- When the page is loaded
- When the picture is loaded
- When the mouse moves over the element
- When the input field is changed
- When an HTML form is submitted
- When the user triggers the button
Author:galaxy
created:2015-09-23 Wed 15:17
Emacs 24.4.1 (ORG mode 8.2.10)
Validate
HTML Learning Note-dom
