遍历DOM树
第一个函数: 给我根节点, 我会找到所有的子节点: forDOM(根节点)
获取这个根节点的子节点
var children=根节点的.children
调用第二个函数
第二个函数: 给我所有的子节点, 我把每个子节点的名字显示出来(children)
for(var i=0;i<children.length;i++){
每个子节点
var child=children[i];
f1(child); 给我节点, 我显示该节点的名字
child是子节点,但是如果child里面还有子节点,此时child就是爹了
child.children&&第一个函数(child)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遍历DOM树</title> </head> <body> <h1>遍历 DOM 树</h1> <p style="color: green;">Tip: 可以在遍历的回调函数中任意定制需求</p> <div> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> <div> <div> <span>haha</span> </div> </div> </div> <div id="demo_node"> <ul> <li>123</li> </ul> <p>hello</p> <h2>world</h2> <div> <p>dsa</p> <h3> <span>dsads</span> </h3> </div> </div> <script> //获取页面中的根节点--根标签 var root=document.documentElement;//html //函数遍历DOM树 //根据根节点,调用fn的函数,显示的是根节点的名字 function forDOM(root1) { //调用f1,显示的是节点的名字 // f1(root1); //获取根节点中所有的子节点 var children=root1.children; //调用遍历所有子节点的函数 forChildren(children); } //给我所有的子节点,我把这个子节点中的所有的子节点显示出来 function forChildren(children) { //遍历所有的子节点 for(var i=0;i<children.length;i++){ //每个子节点 var child=children[i]; //显示每个子节点的名字 f1(child); //判断child下面有没有子节点,如果还有子节点,那么就继续的遍历 child.children&&forDOM(child); } } //函数调用,传入根节点 forDOM(root); function f1(node) { console.log("节点的名字:"+node.nodeName); } //节点:nodeName,nodeType,nodeValue </script> </body> </html>