Today we will talk about DOM attributes.
We have already touched DOM attributes.
For example:
NodeName, nodeType ..... Today we will explain in detail.
1. nodeName attribute: name of the node.
If the node is an element node, the name of the element is returned. In this case, it is equivalent to the tagName attribute.
For example:
<P> aaaa </p>: p is returned;
If it is an attribute node, nodeName returns the name of this attribute.
If it is a text node, nodeName returns a string of # text.
In addition, I want to say that the nodeName attribute is a read-only attribute and cannot be set. (write)
It returns the value of an uppercase letter.
2, nodeType property: returns an integer representing the type of the node.
Common three types:
NodeType = 1: Element Node
NodeType = 2: attribute node
NodeType = 3: text node
If you want to remember it, we can remember it like this:
For example: <p title = "cssrain"> test </p> read from the beginning to the end: you will find that the first element node (1), then the second is the attribute node (2 ), finally, the text node (3) makes it easy to remember what types nodeType represents. (A little trick I have summarized, ^_^ .)
The nodeType attribute is often used with if to ensure that incorrect operations are not performed on the wrong node type.
For example:
Function cs_demo (mynode ){
If (mynode. nodeType = 1 ){
Mynode. setAttribute ("title", "demo ");
}
}
Code explanation: first check the nodeType attribute of mynode to ensure that the node it represents is indeed an element node.
Like the nodeName attribute, it is also a read-only attribute and cannot be set. (write ).
3. nodeValue attribute: return a string of the node value.
If the node is an element node, null is returned. (note)
If it is an attribute node, nodeValue returns the value of this attribute.
If it is a text node, nodeValue returns the content of this text node.
For example:
<Div id = "c"> aaaaaaaaaaaaaaaa </div>
<Script language = "JavaScript">
Var c = document. getElementById ("c ");
Alert (c. nodeValue); // return null
</SCRIPT>
NodeValue is a readable and writable attribute. However, it cannot set the value of the element node.
Let's take a look at the following example:
<Div id = "c"> aaaaaaaaaaaaaaaa </div>
<Script language = "JavaScript">
Var c = document. getElementById ("c ");
C. nodeValue = "dddddddddddd"; // cannot be set
// Alert (c. firstChild. nodeValue) // element nodes include attribute nodes and text nodes.
C. firstChild. nodeValue = "test" // can be set
</SCRIPT>
Of course, to ensure proper running: you can add a piece of code:
<Div id = "c"> aaaaaaaaaaaaaaaa </div>
<Script language = "JavaScript">
Var c = document. getElementById ("c ");
C. nodeValue = "dddddddddddd"; // cannot be set
// Alert (c. firstChild. nodeValue)
If (c. firstChild. nodeType = 3) {// determines whether the node is a text node.
C. firstChild. nodeValue = "test" // can be set
}
</SCRIPT>
// You can see that if you want to set element nodes, you cannot directly set them. Instead, you must first use firstChild or lastChild and then set nodeValue.
NodeValue is generally only used to set the value of a text node. If you want to refresh the value of an attribute node, setAttribute () is generally used ().