Home > Article > Web Front-end > Javascript introductory learning Part 7 js dom example operation_Basic knowledge
Javascript introductory learning Part 7 js dom example operation_Basic knowledge
- PHP中文网Original
- 2016-05-16 19:02:59946browse
In the last article, we talked about using DOM to create nodes, copy nodes, and insert nodes. Today we will talk about deleting nodes, replacing nodes, finding nodes, etc.
Start directly from the method:
1, Delete the node. removeChild():
a
b
c
<script> <br>var msg = document.getElementById("cssrain"); <br>var b = document.getElementById("b"); <br> msg.removeChild(b); <br></ script> <br>What if you don’t know what the parent node of the node to be deleted is? You can use the parentNode attribute. <br>For example: <br><body> <br> <p id="cssrain"> <br> <p id="a">a </p> <br> <p id="b">b </p> <br> <p id="c">c </p> <br> </p> <br> </body> <br><script> <br>var b = document.getElementById("b"); <br>var c = b.parentNode; <br>c.removeChild(b); <br></script>
2, Replace the node. repalceChild()
element.repalceChild( newNode , oldNode ); // The new node is a guest, so we must serve him first. . oldNode must be a child node of Element.
Example:
a
b
c
<script> <br>var cssrain = document.getElementById("cssrain"); <br>var msg = document.getElementById("b"); <br>var para = document.createElement("p"); <br>cssrain.replaceChild( para , msg ); <br></script>
3. Finding nodes
Compared with the above method, finding nodes is relatively simple.
Because many people have used it. (I remember the first sentence I knew about js was getElementById();)
getElementById();
Returns an object, which has attributes such as nodeName, nodeType, parentNode, ChildNodes, etc.
getElementsByTagName() finds all elements of the tag name.
Returns a collection, and you can use a loop to take out each object. The object has properties such as nodeName, nodeType, parentNode, ChildNodes, etc.
Example:
var ps = document.getElementsByTagName(“p”);
for(var i=0; i< ps.length; i){
ps[i].setAttribute(“ title","hello");
//You can also use: ps.item(i).setAttribute("title","hello");
}
4, Set/get attribute node.
setAttribute();//Set
Example:
var a = document.createElement(“p”);
a.setAttribute(“title”,”my demo”);
Regardless of whether there was a title attribute before, the future value is my demo.
getAttribute();//Get
Example:
var a =document.getElementById(“cssrain”);
var b = a.getAttribute(“title”);
When obtaining, if the attribute does not exist, it will return empty. Note that the returns of ie and ff are different.
aaaa
bbbb
>
var paras = document.getElementsByTagName("p");
for (var i=0; i< paras.length; i ) {
var title_text = paras[i].getAttribute(" title");
if (title_text != null) {
//There is a problem with writing like this: ff is only played once, but ie is played 2 times.
//If if (title_text != "") is written like this, ie will only pop up once, but ff will pop up twice.
//What if we write it like this? if (title_text) , we found that ie only pops up once, and ff only pops up once.
//if (title_text) is what we want.
//Note: If ff does not exist, return null
//ie return "";
alert(title_text);
}
}
Although the returns are different, they can be judged by one method.
if(a.getAttribute(“title”) ){
// do something
}
5,hasChildNodes:
You can know from the name, it is to determine whether the element has child node.
Returns boolean type.
Text nodes and attribute nodes cannot have child nodes, so their hasChildNodes always returns false;
hasChildNodes is often used together with childNodes.
For example:
a
b
c