<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 300px; height: 450px; border: 1px solid red; } </style> </head> <body> <input type= "Button" value = "color" ID = "BTN" /> < div ID = "DV" > < span > This is a span </ span > < P > This is P </ P > < span > This is the span </ span > < P > this is P </ P > < span > this is a span </ span > < P > this is P </p> <span> This is a span </ span > < A the href = "http://www.baidu.com" > Baidu </ A > </ div > < Script the src = "common.js" > </ Script > < Script type = "text / JavaScript" > // click the button tag provided p color === node way to do My $ ( " BTN " ) .onclick = function () { // first obtain div var dvObj = My $ ( "dv"); // Get all nodes inside dv var Nodes = dvObj.childNodes; for ( var I = 0 ; I < nodes.length; I ++ ) { // determine whether this node is not p tag IF (Nodes [I] .nodeType == . 1 && Nodes [I] .nodeName == " P " ) { Nodes [I] .style.backgroundColor = " Red " ; } } }; </script> </body> </html>
effect:
