The previous blog post describes the basic relationship between HTML, XML, and Javascript. While
Javascript uses DOM (including html dom and xml dom) to manipulate the content in HTML and XML.. This blog post analyzes these two similar DOM interfaces.
Summary
Contact:HTML and XML are shared.
Core API(DOM ). Therefore, the nodes and node lists in the html dom and xml dom refer to the same object. Reference: http://www.w3school.com.cn/htmldom/dom_intro.asp
Differences:For convenience, the features and methods of html dom are not just standard DOM implementation, but specific to HTML and also make some DOM operations easier.
HTML DOMYes
Element-Based implementation)Instead of Node-Based. For example, in the xml dom, the attribute of an element node is an attribute node with the current element node as the parent node (the element node and attribute node can use the nodeType attribute value of the node to distinguish between them, the value of nodeType of element nodes is 1, and the value of nodeType of attribute nodes is 2 ). In html dom,
The attribute of an element node is an attribute and is not viewed as a separate node.. For example, get an attribute (such as id) value of an element node in xml dom: x = myelement. in getAttribute (id) html dom: x = myelement. id:
1. DOM node Search Method
GetElementsByTagName_r (),
GetElementByID ()The former can be used for html dom or xml dom, while the latter can only be used for html dom.
Note: For details, the element in the getElementsByTagName_r () method is a complex number, while the element in the getElementByID () method is a singular number. This is because multiple nodes with the same nodeName can exist, and one id (node attribute in HTML) can only correspond to one element node.
2.There are two special node attributes
Access the root node of the document:
- Document.doc umentElement
- Document. body
The former can be used for html dom or xml dom, while the latter can only be used for html dom.
The latter is a special extension of the HTML page and provides direct access to the <body> tag. **************************************** ****************************************, Discuss the source of this issue.
Change HTML content:
1. document. write ()The parameters in the brackets are the strings to be written. Based on my experiment results, my experience is as follows:
It can only be used inside <body> and the Code must be included in <script type = "text/javascript">... </script>. And
The written content does not affect the rest of the HTMLFor example, This is equivalent to adding a sentence directly to the js Code position on the page..
2. innerHTML attributes. Almost all html dom elements have this attribute. It is actually a string used
Sets or obtains the HTML between the start and end tags of an object.. Usually in the javascript code of Used in combination with the getElementById () method. Use the getElementById () method to obtain the target node, and then use the innerHTML attribute to obtain or set the content between the start and end labels of the node. Example: document. getElementByIdx_x_x ('a1 '). innerHTML = xmlhttp. status, where A1 is the id of a tag in HTML. This statement sets the content of the tag to the status of reading the XML file. **************************************** **************************************** * ******************
Differences of DOM in different browsers. All modern browsers support W3C DOM specifications, but there are differences between them, mainly manifested in the following two points:
- XML Loading Method
- How to handle white space and line feed
I have already talked about the first point. Let's look at the second point. For ease of reading, XML files often contain line breaks or spaces between nodes. Example: <book> <title> Harry Potter </title> <author> j k. rowling </author> <year> 2005 </year> <price> 29.99 </price> </book> each line has a line break, and each subnode has two spaces.
Firefox and other browsers use spaces and line breaks as text nodes, While IE ignores these line breaks and spaces.For example, if you want to get the content of the first sub-node <title> of the first <book> element in IE: txt = xmlDoc.doc umentElement. getElementsByTagName_r ("book") [0]. firstChild. firstChild. nodeValue; in Firefox and other browsers, x = xmlDoc.doc umentElement. getElementsByTagName_r ("book") [0]; y = x. firstChild; while (y. nodeType! = 1) // check whether the node type is 1, that is, whether it is an element node {y = y. nextSibling; // if it is not an element node, move it back to a same-level node.} txt = y. firstChild. nodeValue;