6. Set/get attribute nodes.
setAttribute();//Set
example:
var a = (“p”);
(“title”,”my demo”);
Regardless of whether there is a title attribute before, the subsequent value is my demo.
getAttribute();//Get
example:
var a =(“cssrain”);
var b = (“title”);
When obtaining, if the attribute does not exist, it will return empty. Note that ie and ff return differently. You can see my previous example.
Although the return is different, it can be judged in one way.
if((“title”) ){ }
7. Find nodes.
getElementById();
Returns an object, the object has properties such as nodeName, nodeType, parentNode, ChildNodes, etc.
getElementsByTagName() finds all elements of the tag name.
Return a collection, and each object can be retrieved using a loop. The object has properties such as nodeName, nodeType, parentNode, ChildNodes, etc.
example:
var ps = (“p”);
for(var i=0 ; i< ; i++){
ps[i].setAttribute(“title”,”hello”);
//You can also use: (i).setAttribute("title","hello");
}
hasChildNodes:
You can know from the name, which is to determine whether the element has child nodes.
Returns the boolean type.
Text nodes and attribute nodes cannot have children, so their hasChildNodes will always return false;
hasChildNodes is often used with childNodes.
for example:
<body>
<div >
<div >a </div>
<div >b </div>
<div >c </div>
</div>
</body>
<script>
var ps = ("cssrain")
if(){
alert( );
}
</script>
8. DOM properties:
nodeName attribute: The name of the node.
If the node is an element node, then the name of this element is returned. At this time, it is equivalent to the tagName attribute.
for example:
<p>aaaa</p> : Then return p ;
If it is a property node, nodeName will return the name of this property.
If it is a text node, nodeName will return a #text string.
Also what I want to say is: the nodeName property is a read-only property and cannot be set. (Written)
nodeType property: Returns an integer representing the type of this node.
The 3 types we use are:
nodeType == 1 : Element node
nodeType == 2 : Attribute node
nodeType == 3 : Text node
If you want to remember, we can see the above order from front to back.
For example: <p title="cssrain" >test</p> Read from front to back: You will find that first there are element nodes, then attribute nodes, and finally text nodes, so you can easily remember what types nodeType represents.
The nodeType property is often used with if to ensure that wrong operations are not performed on the wrong node type.
for example:
function cs_demo(mynode){
if( == 1){
("title","demo");
}
}
Code explanation: First check the nodeType property 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).
nodeValue property: Returns a string, the value of this node.
If the node is an element node, then return null; (Note)
If it is a property node, nodeValue will return the value of this property.
If it is a text node, nodeValue will return the contents of this text node.
for example:
<div >aaaaaaaaaaaaaaaa</div>
<SCRIPT LANGUAGE="JavaScript">
var c= ("c");
alert( );//Return null
</SCRIPT>
nodeValue is a property that can be read and written. But it cannot set the value of the element node.
See the following example:
<div >aaaaaaaaaaaaaaaa</div>
<SCRIPT LANGUAGE="JavaScript">
var c= ("c");
=" dddddddddddddd"; //Cannot set
//alert( )//Element nodes include attribute nodes and text nodes.
= "test"//can be set
</SCRIPT>
Of course, to ensure that it can run correctly: we can add a piece of code:
<div >aaaaaaaaaaaaaaaa</div>
<SCRIPT LANGUAGE="JavaScript">
var c= ("c");
=" dddddddddddddd"; //Cannot set
//alert( )
if( ==3 ){ //Judge whether it is a text node
= "test"//can be set
}
</SCRIPT>
//It can be seen that if you want to set an element node, you cannot set it directly, but you must first use firstChild or lastChild, and then set nodeValue.
nodeValue is generally only used to set the value of the text node. If you want to refresh the value of the attribute node, setAttribute() is generally used.
childNodes attribute: Returns an array composed of child nodes of element nodes.
Since text nodes and attribute nodes cannot contain any child nodes,
So their childNodes property returns an empty array forever.
You can use the hasChildNodes method, which is used to determine whether an element has child nodes.
or if ( < 1);
childNodes is also a read-only property. If you want to add nodes, you can use appendChild() or insertBefore(),
After deleting a node, you can use removeChild(); , the childNodes property will be automatically refreshed.
firstChild attribute:
Since text nodes and attribute nodes cannot contain any child nodes,
So their firstChild property always returns an empty array. If there are no children, null will be returned;
Equivalent to [0] ;
The firstChild property is a read-only property.
lastChild attribute:
Since text nodes and attribute nodes cannot contain any child nodes,
So their lastChild property always returns an empty array. If there are no children, null will be returned;
Equivalent to [ - 1 ] ;
The lastChild property is a read-only property.
nextSibling property:
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 attribute is a read-only attribute.
PreviousSibling property:
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.
parentNode property:
Note: The node returned by the parentNode attribute is always an element node, because only the element node can have child nodes.
Of course there is an exception:
document node, it has no parent node. So the parentNode property of the document node will return null;
The parentNode property is a read-only property.
OK, let’s talk about the common properties and methods of DOM here, let’s understand the use of these methods.
I believe that everyone's DOM programming technology will be greatly improved.
Season 1 talks about this. Hope everyone gains something.
Season 2 We will start practical drills. I started writing my own js program. . .
A sense of accomplishment. . . ^_^. . .