The DOM (Document Object model) is an API for HTML and XML documents. The DOM depicts a hierarchical tree of nodes that allows programmers to add and modify parts of a page.
- Node hierarchy: The DOM can portray any HTML or XML document as a structure composed of multi-level nodes. Such as:
- The document node has an only child: an HTML element.
- Each element node is actually an object.
- Elements, attributes of elements, and even annotations have their own nodes and the location of their respective nodes.
- Therefore, there are many types of nodes, and these different nodes inherit from an underlying type: node type.
- All node types in
- node-type nodes
- JavaScript are inherited from node types. So all node types have a subset of the same properties and methods.
- Each node has a NodeType property that indicates the type of node. There are 12 constants stored in the Node object, representing 12 node types, respectively.
for example: node.element_node=1; node.attribute_node=2; node.text_node=3; Node.comment_node=8, ..... The node type is judged by the nodeType of the node, for example: Somenode.nodetype==1, which indicates that the node is an element node.
-
Each node has a ChildNodes property that holds a NodeList object that holds the child information for that node.
and each child is a sibling. The PreviousSibling and NextSibling properties of each child node allow access to other sibling nodes.
- Each node has a ParentNode property that points to the parent node in the document tree.
- Parent-child sibling diagram:
- Each node has some of the same methods for manipulating nodes in addition to some of the same properties.
appendchild (), add a child. InsertBefore (), add a child, and put it before a child. ReplaceChild (), replace a child. RemoveChild () to remove a child.
- node of document type
- The document node is the root node of the HTML node tree, representing the entire HTML interface.
- The Document object is a property of the Window object in the BOM and can therefore be accessed as a global object.
- The Document object has a body property that points directly to the <body> element.
- The Document object has a title property that marks the caption of the documents (pages).
- Find the elements within the document by getElementById (), Getelementbytagname ().
- Element type node
- DOM2 and DOM3
- The DOM1 level is primarily defined by the underlying structure of HTML and XML documents. DOM2, Level 3 introduces more interaction capabilities on the basis of this structure.
- The purpose of DOM2, Level 3, is to extend the DOM API to meet the additional requirements of manipulating XML.
- XML namespaces
- With XML namespaces, the elements of different XML documents can be blended together without worrying about naming conflicts.
- Namespaces are specified with the xmlns attribute.
- The XHTML namespace is http://www.w3.org/1999/xhtml.
- Any well-formed XHTML page will say namespaces are included.
- namespaces Example:
JavaScript Note 6-dom
