As mentioned in a previous blog post, HTML and XML complement each other. The former is responsible for data display, while the latter is responsible for data storage .
Javascript is responsible for implementing the interaction between the two . For example, the operation of reading data in XML is placed in the Javascript module.
Let's first look at the interfaces used to manipulate HTML and XML:
HTML DOM and XML DOM are two similar interfaces. They respectively parse HTML files and XML files into tree structures, and all the tags in the files are used as nodes. Then use the various functions provided in the DOM to obtain and manipulate nodes.
The interface to obtain the HTML file is relatively simple, in fact, it is automatically generated by the browser .
When the browser opens a window, it automatically creates a Window object named window for the HTML document (the Window object is the top-level object in the JS hierarchy).
When a web page (that is, an HTML document) is loaded in the window, the browser parses the document into a Document object and assigns it to the document property of the window.
After that, you can use document to operate on the current HTML document.
The most common method of operation is to add an id to each tag in the HTML document , then use the getElementByID() method to get the tag, and then use the innerHTML property to get the content between the opening and closing tags (the value of this property is a string).
The interface to obtain the XML file is slightly more complicated, requiring the user to manually generate it using JS statements.
See the previous blog post "XML document parsing" for details, which will not be repeated here. Simply put, the core is to use the XMLHttpRequest object in JS.
A common way to manipulate XML documents is to use methods in the XML DOM, such as getElementsByTagName_r().
Note: The above operations are implemented in Javascript code. That is, inside the <script> tag in the HTML document