1.DOM Overview
1.1. What is dom?
dom= Document Object Model , the DOM is the (World Wide Web Consortium) standards. dom defines access to HTML and XML interface independent of platform and language style= "LETTER-SPACING:0.5PT;" > standard is divided into 3
The!--[Endif]--> core DOM-
!--[Endif]-->xml DOM- XML
html DOM- a standard Model for HTML documents
1.2. What is html DOM?
the HTML DOM defines a standard way to access and manipulate HTML documents. html DOM renders an HTML document as a tree structure with elements, attributes, and Text (node tree)
When we open an HTML file with a browse , the browser's built-in HTML parsing engine loads the entire document into memory , based on the HTML DOM The defined interfaces and implementation classes generate a DOM Object Tree that contains all the data in the file .
<title> Document title </title> <body> <a href="http://www.atguigu.com"> My Links </a> </body> |
2. HTML Dom Core: node 2.1. HTML nodes (node)
- Each component in an HTML document is a node.
- The entire document is a document node
- Each HTML tag is an element node
- Each HTML attribute is an attribute node (Attribute)
- The text contained in the HTML element is a text node
2.2. Node hierarchy
- Nodes in the DOM have hierarchical relationships with each other.
- All the nodes in the HTML document make up a document tree (or node tree). Each element, attribute, text, and so on in an HTML document represents a node in the tree. The tree starts at the document node and continues to extend its branches until all the text nodes are at the lowest level of the tree.
2.3. HTML DOM node tree
- All nodes in a tree of nodes are related to each other.
< Html> <title>dom Tutorial </title>, <body> <p>hello World!</p> &NBSP;&NBSP;</BODY> </HTML> |
Parent node |
Each node except the document node has a parent node |
Child nodes |
Most element nodes have child nodes |
Peer node |
When nodes share the same parent node, they are peers |
Descendant nodes |
Descendants refer to all child nodes of a node |
Ancestors node |
Ancestors are the parent node of a node, or parent node of a parent node, and so on |
3. DOM Operations
- 3.1HTML DOM Access node (query)
-
Object type |
Properties/Methods |
Description |
Document/Element node |
getElementById (ID) |
Get the corresponding Label object based on the ID of the tag |
Document/Element node |
getElementsByTagName (TAG) |
Gets a collection of all child label objects corresponding to the tag name (array) |
|
|
|
Node |
NodeName |
Get the node name |
Node |
NodeValue |
Get the value of the node |
Node |
NodeType |
Node Type value |
|
|
|
ELEMENT node |
ChildNodes |
Get a collection of all child nodes (array) |
element/Text node |
ParentNode |
Get parent Node object (label) |
ELEMENT node |
FirstChild |
Get the first child node (label/text) |
ELEMENT node |
LastChild |
Get the last child node (label/text) |
|
|
|
ELEMENT node |
GetAttributeNode (Attrname) |
Attribute node based on attribute name label |
- 3.3. HTML Dom Additions and deletions
-
Object type |
Properties/Methods |
Description |
Document node |
CreateElement (TagName) |
Create a new Element node object |
Document node |
createTextNode (text) |
Create a Text node object |
|
|
|
ELEMENT node |
AppendChild (node) |
Adds the specified node as a child node |
ELEMENT node |
InsertBefore (New,target) |
Inserts a new node before the specified child node |
|
|
|
ELEMENT node |
ReplaceChild (new, old) |
Replace old child nodes with new nodes |
ELEMENT node |
RemoveChild (Childnode) |
Deletes the specified child node |
ELEMENT node |
SetAttribute (name, value) |
Add a property to a label |
ELEMENT node |
RemoveAttribute (name) |
Deletes the specified property |
|
|
|
ELEMENT node |
InnerHTML |
Add a label to the label |
<meta http-equiv="Content-type" content= "text/html; Charset=utf-8 "> <title>html DOM Programming Test </title> <style type="Text/css"> ul { List-style-type: None; } Li { Border-style: solid; Border-width: 1px; padding: 5px; Margin: 5px; Background-color: #99ff99; float: left; } . out { Width: 400px; Border-style: solid; Border-width: 1px; Margin: 10px; padding: 10px; float: left; } </style> <body> <div class="Out"> <p> which city do you like?</p> <ul id="City"> <li id="BJ" name="Beijing"> Beijing </li> <li> Shanghai </li> <li id="DJ"> Tokyo </li> <li> Seoul </li> </ul> <br> <div id="inner"></div> </div> </body> |
JavaScript DOM Programming