I. Introduction to XML DOM
The DOM defines a standard for accessing and manipulating documents.
The XML DOM represents an XML document as a tree structure.
The HTML DOM represents an HTML document as a tree structure.
Understanding the DOM is a must for anyone working with HTML or XML.
XML DOM tree:
What is DOM?
DOM stands for Document Object Model, roughly translated as model objects in HTML documents. The DOM defines a standard for accessing documents such as XML and HTML
The DOM is divided into 3 different parts/levels:
- Core DOM – the standard model for structured documents
- XML DOM – the standard model for XML documents
- HTML DOM – the standard model for HTML documents
The DOM defines the objects and properties of all document elements, and the methods (interfaces) to access them.
DOM grouping list:
- DOM document: responsible for storing all the elements in the website's document
- DOM element: has the task of accessing certain HTML tags through attributes such as class name, id, name of the HTML tag
- DOM HTML: responsible for changing content values and attribute values of HTML tags thẻ
- DOM CSS: responsible for changing the CSS formats of HTML tags
- DOM Event: responsible for assigning events like onclick(), onload() to HTML tags thẻ
- DOM Listener: responsible for listening to events that affect that HTML tag
- DOM Navigation is used to manage and manipulate HTML tags, showing the parent-child relationship of HTML tags
- DOM Node, Nodelist: responsible for manipulating HTML through objects (Object)
The HTML DOM defines a standard for accessing and manipulating HTML documents.
All HTML elements can be accessed through the HTML DOM.
The HTML DOM defines the objects, properties, and methods of HTML elements.
In each HTML tag, there will be properties (Properties) and a parent-child hierarchy with other HTML tags. The hierarchy and attributes of this HTML tag are called selectors and in the DOM will be responsible for handling issues such as changing the tag's attributes, changing the HTML structure of the tag, etc.
Change the value of an HTML element
The following example will change the value of an HTML element with id="demo":
In the above example, the script will find the element with id="demo" and replace it with the text "Hello World!". You can see this change in the following figure:
Without the <script>…</script> :
The following example changes the value of the first <h1> element in the HTML document:
Similar to the above example, instead of finding the element by id, the script will find the first <h1> tag and replace it with the value "Hello World!".
Note: Even if the HTML document includes only one <h1> element, you must specify the array index , because the getElementsByTagName() method always returns an array.
The XML DOM defines a standard for accessing and manipulating XML documents.
All XML elements can be accessed through the XML DOM.
The XML DOM defines the objects, properties, and methods of all XML elements.
XML DOM is:
- A standard object model for XML
- A standard programming interface for XML
- Platform and language independence
- A W3C . standard
In other words: XML DOM is a standard for retrieving, changing, adding, or removing XML elements.
Get the value of the XML element
The following line of code will get the text value of the first <title> element in the XML document:
The XML file used in the example below is books.xml .
The example below reads “books.xml” into xmlDoc and gets the text value of the first <title> element in books.xml:
- xmlDoc – XML DOM object created by parser.
- getElementsByTagName(“title”) – get the first <title> element
- childNodes – first child element of <title> (text node)
- nodeValue – the value of the node (its own text)
Load an XML string
The programming interface to the DOM is defined by a set of standard properties and methods.
Properties are usually related to something like: nodename is “book”…
Methods usually involve something being done like: delete “book”…
XML DOM ATTRIBUTES
Some characteristic properties:
- x.nodeName – name of x
- x.nodeValue – value of x
- x.parentNode – parent node of x
- x.childNodes – child nodes of x
- x.attributes – attribute nodes of x
Note: In the above list, x is an object node.
XML DOM METHODS
- x.getElementsByTagName(name) – get all elements with tag name name
- x.appendChild(node) – inserts a child node into x
- x.removeChild(node) – remove a child node from x
Note: In the above list, x is an object node.
II. XML DOM Nodes – Nodes in XML DOM
In the DOM, everything in an XML document is a node.
Through the DOM, everything in the XML document is a node:
- The whole document is 1 document node
- Each XML element is an element node
- Text in XML elements are text nodes
- Each attribute is an attribute node
- Comments are comment buttons nút
Take a look at the following XML file (books.xml):
The root node in the above XML file is named <bookstore>. All other nodes in the document are contained by the <bookstore> node.
The root <bookstore> node contains 4 <book> nodes (4 different books).
The first <book> node contains four buttons: <title>, <author>, <year>, and <price>; Each button includes a text button, “Everyday Italian”, “Giada De Laurentiis”, “2005”, and “30.00”.
Text is always stored in the Text node
A common mistake in DOM handling is assuming that the element node contains text. However, the element node's text is placed within the text node.
In this example: <year>2005</year>, the <year> element node contains a text node with the value "2005".
“2015” is not the value of the <year> element!
XML DOM Node Tree – Tree diagram of the XML DOM node
XML DOM views XML documents as a tree of structure. This tree structure is called a node-tree.
All nodes can be accessed through the tree. Their contents can be changed or deleted and new elements can be created.
A node tree represents a set of nodes and the connections between them. The tree starts with the root node and branches to the text nodes at the lowest level of the tree:
NODE PARENTS, CHILDREN, AND SIBLINGS – PARENT, CHILD, AND SIBLING NODE
The nodes in the tree have a hierarchical relationship with each other.
The words parent, child, and sibling are used to describe the relationship between the nodes in the tree. The parent node has child nodes. Child nodes with the same level (same parent) are called siblings.
- In a node tree, the node on the top is called the root node.
- Every node except the root node must have a parent node
- A node can have many child nodes
- A leaf node is a node with no children
- Siblings (sibling nodes) are nodes of the same parent
The following figure explains part of a node tree and the relationship between them:
Because the data in XML is structured by a tree, it can be easily traversed without knowing the exact structure of the tree and their data type.
FIRST AND LAST CHILD NODE
In the XML snippet above, it can be seen that the <title> element is the first child of the <book> element, and the <price> element is the last child of the <book> element.
Furthermore, the <book> element is the parent node of the <title>, <author>, <year>, and <price> elements.
The manipulation of accessing nodes indirectly by position on the DOM tree is also known as DOM Tree traversal.
Each node in the DOM tree has six relational properties to help you indirectly access the node's position:
- Node.parentNode: refers to the parent node of the current node, and this parent is unique for each node. Therefore, if you need to find the root origin of a node, you have to join the attribute multiple times, for example Node.parentNode.parentNode.
- Node.childNodes: refers to the immediate children of the current node, and results in an array of objects. Note that child nodes are not differentiated by node type, so the returned array can include many different types of nodes.
- Node.firstChild: refers to the first child node of the current node, and is equivalent to calling Node.childNodes.
- Node.lastChild: refers to the last child node of the current node, and is equivalent to calling Node.childNodes[Element.childNodes.length-1].
- Node.nextSibling: reference to the sibling node that is next to the current node.
- Node.previousSibling: reference to the sibling node that is adjacent to the current node.
Direct access is faster, and simpler when you don't need to know much about node relationships and locations. There are 3 methods for you to access directly that are supported in all browsers:
ADD OR MOVE THE DOM WITH APPENDCHILD
As you know, every node in the DOM structure tree is deeply rooted in the root node and must have a parent node. Thus, in essence, when a new DOM is created, it is single and cannot be used like regular DOM elements. Only after you find another node in the DOM tree to parent it (using node_cha.appendChild(node_child)) the further DOM creation is complete. If you are ready to create some child nodes, let's create some new nodes together with these 2 methods:
- document.createElement(tag_name_html): creates an element node from the root node.
- document.createTextNode(string_string): creates a text node from the root node.
When you create a new node but have not assigned a parent node to it, the node will live in the computer's cache. You will not be able to access that node, unless you have saved a reference to that node with a variable.
A note when creating more DOM: the newly created node will still have the same properties and methods as a real DOM node. However, the properties of the new button will be empty or default, so you will have to set up the necessary properties.
The appendChild method is also used to organize the "relocation" of DOM nodes. If a DOM node has a parent node, but is "adopted" by another parent node through appendChild, it will cut the relationship with the old parent node to move to the new family.
REMOVE THE DOM WITH REMOVECHILD
When you remove a node, it will still exist in the computer's cache. You will no longer be able to access that node, unless you have saved a reference to that node with a variable.
When removing the DOM, the parent node uses the removeChild() method to remove one or more child nodes:
// Method 2: Remove 1 child node when only child node is known
The above is just a brief introduction to XML DOM. If you are interested, you can refer to the following page for details: