javascript,Dom程式設計,遞迴案例
阿新 • • 發佈：2018-12-11
javascript,Dom程式設計,遞迴案例
<html> <head> <meta charset="UTF-8"> <title>javascript,Dom程式設計,遞迴案例,雪豹軟體工作室</title> <link rel="stylesheet" type="text/css" href="mark.css"> <link rel="stylesheet" type="text/css" href="input2.css"> <link rel="stylesheet" type="text/css" href="body.css"> <script type="text/javascript"> /*遞迴案例(該案例是通過遞迴，迴圈遍歷該html整個頁面中的所有元素)*/ /*dom程式設計就是為了動態(在程式碼執行之後)的給文件(dom樹)新增一些節點或刪除一些節點，或者得到修改節點的屬性 */ //遞迴(查找出document中的所有元素) function showAllElements(node){ var childrens = node.childNodes; //獲取該節點下的所有子節點(是個陣列) /* 用alert()會彈出太多次，太煩了，所以就用console.log()這種列印到控制檯的方式，所以想要看到這些列印的資訊，請開啟瀏 覽器的除錯功能，在除錯介面找到控制檯，即可看到這些列印資訊(最好是用火狐瀏覽器或者是用谷歌瀏覽器) */ console.log("當前節點資訊：" + "節點型別 = " + node.nodeType + " 節點名稱 = " + node.nodeName + " 該節點下有" + childrens.length + "個子節點！"); for (var i = 0; i < childrens.length; i++) { console.log("-------此時i = " + i + "-------"); console.log("當前節點資訊是" + node.nodeName + "節點下的，" + "節點型別 = " + childrens[i].nodeType + " 節點名稱 = " + childrens[i].nodeName); showAllElements(childrens[i]); console.log("**********此時i = " + i + "********"); } } </script> </head> <body> <div id="myDiv"> <input name="userName"><br> <input type="button" value="檢視該html整個頁面中的所有元素" onclick="showAllElements(document)"> </div> </body> </html>
