Introduction to Javascript Chapter 8 js dom node attributes page 1/2

Source: Internet
Author: User
Tags uppercase letter

 
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 ().

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.