About the basic attributes of DOM in javascript-javascript tips-js tutorial

A dom node is an object with some attributes. Some of them are read-only, and some can be changed directly (updatedon-the-fly ). Today, we will discuss the basic attributes of DOM in detail, hoping to help you. Structure and content attributes

NodeType

All nodes are of the following types.

The Code 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 element nodes, We can traverse them and use childNodes [I]. nodeType! = 1.
The following is the implementation code:

The Code is as follows:

Allowed readers:

• John


• Bob

Script
Var childNodes = document. body. childNodes
For (var I = 0; I If (childNodes [I]. nodeType! = 1) continue
Alert (childNodes [I])
}
Script

* Thinking
What will be prompted by the following code:

The Code is as follows:

Script
Alert (document. body. lastChild. nodeType)
Script

NodeName, tagName

Both nodeName and tagName contain the node name.
For document. body

Alert (document. body. nodeName) // BODY
All nodeName values in HTML are capitalized.

When nodeName is not capitalized
This situation is rare. If you are curious, read the following.
You may already know that there are two ways to parse the browser: HTML mode and _ XML mode. Generally, the HTML mode is used, but the XML mode is used when XMLHttpRequest _ is used to obtain XML documents.
In Firefox, XML mode is also used when the Content-Type of the XHTML document is set to xmlish.
In the _ XML mode, the node name will be retained, so the body or bOdY may appear.
Therefore, if XMLHttpRequest _ is used to load XML to HTML documents from the server, the node name will be retained.

For elements, nodeName and _ tagName _ are the same.
However, non-element nodes also have the nodeName attribute, which has special values:

Alert (document. nodeName) // # document
Most node types do not have the tagName attribute, and the tagName of the node is! in IE !.
Therefore, nodeName is more meaningful than tagName. But the tagName is like a simplified version. Therefore, you can use it when you only process element nodes.

InnerHTML

InnerHTML is part of the HTML5 standard. For more information, see the link.
It allows access to node content in text mode. In the following example, all content of document. body is output and replaced with new content.

The Code is as follows:

The paragraph

And a p

Script
Alert (document. body. innerHTML) // read current contents
Document. body. innerHTML = 'aaahooo! '// Replace contents
Script

InnerHTML will contain a valid HTML. However, browsers can also parse malformed HTML.
InnerHTML can be used in any element node. It is very useful.

InnerHTML pitFalls

InnerHTML is not as simple as it looks. It has some traps waiting for cainiao, and sometimes experienced programmers cannot avoid them.

InnerHTML of the _ table _ node in IE is read-only
In IE, "COL", "COLGROUP", "FRAMESET", "HEAD", "HTML", "STYLE", "TABLE", "TBODY", "TFOOT", "THEAD", "TITLE", and "TR" are read-only.
In IE, all the table tags except TD are read-only.

InnerHTML cannot be appended
From the statement structure, innerHTML can be appended, for example:

ChatDiv. innerHTML + ="

Hi!

"
ChatDiv. innerHTML + = "How you doing? "
But what are actually done:

1. Old content is cleared

2. The new content is parsed and inserted. The content is not appended, And it is generated again.

For this reason, all images and other resources will be re-loaded and included in smile.gif.

Fortunately, there are other ways to update the content. This method 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 attribute to obtain the content. The following example shows how it works on text nodes and comment nodes.

The Code is as follows:

The text

Script
For (var I = 0; I Alert (document. body. childNodes [I]. nodeValue)
}
Script

In the above example, some warnings are empty because of blank nodes. Note that nodeValue = null in the SCRIPT node. This is because SCRIPT is an element node. Element Node. Use innerHTML.

Summary

NodeType
Worker node type. The most important thing is that the element node is 1, the text node is 3, and read-only.
NodeName/tagName
A Tag name in upper case. For non-element nodes, nodeName also has special values, which are read-only.
InnerHTML
The content of the zookeeper element node, which can be written.
NodeValue
The content of the zookeeper text node, which can be written.
DOM nodes have other attributes based on their types. For example, the INPUT tag has the values and _ checked _ attributes. A attributes include href and so on.

The above is all the content of this article. I hope you will like it.