<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title></title> <style>Div{width:300px;Height:400px;Border:1px solid Red; } </style></Head><Body><inputtype= "button"value= "Show effect"ID= "BT"/><DivID= "DV"> <span>I'm span.</span> <P>I'm p.</P> <span>I'm span.</span> <P>I'm p.</P> <span>I'm span.</span> <P>I'm p.</P> <span>I'm span.</span> <P>I'm p.</P> <span>I'm span.</span> <ahref= "Http://www.baidu.com">Baidu</a></Div><Scriptsrc= "Common.js"></Script><Script>my$ ("BT"). onclick= function () { //Get div First varDvobj=document.getElementById ("DV"); //get all the child nodes inside varnodes=Dvobj.childnodes; //Loop through all of the child nodes for(varI= 0; I<nodes.length; I++) { //determine if this child node is a P tag if(Nodes[i].nodetype== 1 &&Nodes[i].nodename== "P") {Nodes[i].style.backgroundcolor= "Red"; } } };</Script></Body></HTML>
The way a JavaScript node modifies the background color of an element