Structure and content properties
nodeType
All nodes have types, and there are a total of 12 types of nodes.
The code copy is as follows:
interface Node {
// NodeType
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
...
}
The two most important nodes are element nodes (1) and text nodes (3). The rest are rarely used.
For example, when listing all child elements nodes, we can iterate over it and use childNodes[i].nodeType != 1 to detect.
Here is the implementation code:
The code copy is as follows:
<body>
<div>Allowed readers:</div>
<ul>
<li>John</li>
<li>Bob</li>
</ul>
<!-- a comment node -->
<script>
var childNodes = document.body.childNodes
for(var i=0; i<childNodes.length; i++) {
if (childNodes[i].nodeType != 1) continue
alert(childNodes[i])
}
</script>
</body>
*think
What will the following code prompt:
The code copy is as follows:
<!DOCTYPE HTML>
<html>
<body>
<script>
alert(document.body.lastChild.nodeType)
</script>
</body>
</html>
nodeName, tagName
Both nodeName and tagName contain the name of the node.
For document.body
alert( document.body.nodeName ) // BODY
All nodeNames in HTML will be capitalized.
When nodeName is not capitalized
This situation is rare, if you are curious, you can read the following.
You probably already know that there are two ways for browsers to parse: HTML pattern and __XML pattern. Usually, HTML schema is used, but when XMLHttpRequest__ technology is used to obtain XML documents, XML schema is used.
XML pattern is also used in Firefox when the Content-Type of the XHTML document is set to xmlish.
In __XML mode, the node name will be retained, so body or bOdY may appear.
Therefore, if XML to HTML document is loaded from the server through XMLHttpRequest__ technology, the node name will be retained.
nodeName and __tagName__ are the same for elements.
However, non-element nodes also have nodeName attributes, in which they have special values:
alert(document.nodeName) // #document
Most node types do not have a tagName attribute, and the tagName of the node is annotated in IE is!.
Therefore, generally speaking, nodeName is more meaningful than tagName. But tagName is like a simplified version, so when you only process element nodes, you can use it.
innerHTML
innerHTML is part of the HTML5 standard. Please see the link for details
It allows access to node content in text. The following example will output all the contents of document.body and replace them with the new content.
The code copy is as follows:
<body>
<p>The paragraph</p>
<div>And a div</div>
<script>
alert( document.body.innerHTML ) // read current contents
document.body.innerHTML = 'Yaaahoo!' // replace contents
</script>
</body>
innerHTML will contain an efficient HTML. But browsers can also parse deformed HTML.
innerHTML can be used in any element node. It's very, very useful.
innerHTML pitFalls
innerHTML is not as simple as it seems. It has some pitfalls waiting for the novices, and sometimes experienced programmers cannot avoid it.
The innerHTML of the __table__ node in IE is read-only
In IE, innerHTML is read-only in COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR and other elements.
In the table tags in IE, the innerHTML is read-only except for TD.
innerHTML cannot be added
From the structure of the statement, innerHTML can perform append operations, such as:
chatDiv.innerHTML += "<div>Hi <img src='smile.gif'/> !</div>"
chatDiv.innerHTML += "How you doing?"
But what have been done in fact:
1. Old content is cleared
2. The new content is parsed and inserted. The content was not appended, it was regenerated.
Therefore, all images and other resources will be reloaded after the += operation, including smile.gif.
Fortunately, there are other ways to update content, which does not use innerHTML, so there is no problem mentioned above.
nodeValue
innerHTML is only valid for element nodes.
For other types of nodes, they use the nodeValue property to get the content. The following example will illustrate how it works on text nodes and comment nodes.
The code copy is as follows:
<body>
The text
<!-- A comment -->
<script>
for(var i=0; i<document.body.childNodes.length; i++) {
alert(document.body.childNodes[i].nodeValue)
}
</script>
</body>
In the example above, some warnings are empty because of blank nodes. Note that nodeValue === null for SCRIPT nodes. That's because SCRIPT is an element node. Element node, use innerHTML.
Summarize
nodeType
Node type. The most important thing is that the element node is 1, the text node is 3, and it is read-only.
nodeName/tagName
Caps tag name. For non-element nodes, nodeName will also have special values, read-only.
innerHTML
The content of the element node can be written.
nodeValue
The content of the text node can be written.
The DOM node has some other attributes according to its type. For example, the INPUT tag has value and __checked__ attributes. The A attribute has href and so on.
The above is all about this article, I hope you like it.