Introduction to Javascript Chapter 8 js dom node attribute description_Basic knowledge

In the last two articles, we talked about using DOM to create nodes, copy nodes, insert nodes, delete nodes, replace nodes, find nodes, get attributes, etc. . .

Today we talk about DOM attributes.
In fact, we have already touched on DOM attributes before.
For example:
nodeName, nodeType.... Today we will explain in detail.


1, nodeName attribute: The name of the node.
If the node is an element node, return the name of the element. At this time, it is equivalent to the tagName attribute.
For example:

aaaa

: then returns p ;
If it is an attribute node, nodeName will return the name of this attribute.
If it is a text node, nodeName will return a #text string.

Another thing I want to say is: The nodeName attribute is a read-only attribute and cannot be set. (write)
It returns the value in uppercase letters.

2,,nodeType attribute: Returns an integer representing the type of this node.
We commonly use 3 types:
nodeType == 1 : Element node
nodeType == 2 : Attribute node
nodeType == 3 : Text node
If you want to remember, we You can remember it like this:
For example:

test

Read from front to back: You will find that first is the element node (1), then the attribute node (2), and finally Text node (3), so you can easily remember what type nodeType represents. (A little trick I summarized, ^_^.)

The nodeType attribute is often used in conjunction with if to ensure that the wrong operation is 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: Returns a string, the value of this node.
If the node is an element node, then null is returned; (note below)
If it is an attribute node, nodeValue will return the value of this attribute.
If it is a text node, nodeValue will return the content of this text node.
For example:

aaaaaaaaaaaaaaaa

nodeValue is a property that can be read and written. But it cannot set the value of element node.
Look at the following example again:

aaaaaaaaaaaaaaaa

Of course, in order to ensure correct operation: we can add a piece of code:

aaaaaaaaaaaaaaa

//It can be seen that if you want to set the element node, you cannot set it directly, but you must first use firstChild or lastChild, etc. and then set the nodeValue.
nodeValue is generally Only used to set the value of text nodes. If you want to refresh the value of an attribute node, you generally use setAttribute().

4, childNodes attribute: Returns an array consisting of the child nodes of the element node.
Since text nodes and attribute nodes can no longer contain any child nodes,
so their childNodes property always returns an empty array.

You can use the hasChildNodes method, which is used to determine whether an element has child nodes.
or if (container.childNodes.length
childNodes is also a read-only attribute. If you want to add nodes, you can use appendChild() or insertBefore(),
To delete a node, you can use removeChild();
After the operation, the childNodes attribute will be automatically refreshed.

5, firstChild attribute:
Since text nodes and attribute nodes can no longer contain any child nodes,
so their firstChild attribute always returns an empty array. If there are no child nodes, null will be returned;
node.firstChild is equivalent to node.childNodes[0];
firstChild attribute is a read-only attribute.


6 , lastChild attribute:
Since text nodes and attribute nodes can no longer contain any child nodes,
so their lastChild attribute always returns an empty array. If there are no child nodes, null will be returned;
node.lastChild is equivalent to node.childNodes[ node.childNodes.length - 1] ;
lastChild attribute is a read-only attribute.

7 , nextSibling attribute:
Returns the next sibling node of the target node.
If there is no node behind the target node that belongs to the same parent node, nextSibling will return null;
nextSibling property is a read-only property.

8 , previousSibling attribute:
Returns the previous sibling node of the target node.
If there is no node in front of the target node that belongs to the same parent node, previousSibling will return null;
the previousSibling property is a read-only property.

9 , parentNode attribute:
Note: The node returned by the parentNode attribute is always an element node, because only element nodes may have child nodes.
Of course there is an exception:
document node, which has no parent node. So the parentNode property of the document node will return null;
parentNode property is a read-only property.

Okay, that’s it for the common attributes and methods of DOM. Understand the use of these methods.
I believe that everyone’s DOM programming technology will be greatly improved.


If you still don’t understand, you can search for information on google.