1. 程式人生 > >【js】遞迴遍歷所有後代元素

【js】遞迴遍歷所有後代元素

html程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遞迴的應用</title>
    <style>
        div{
            height: 50px;
            margin: 20px;
        }
    </style>
</head>
<body>
</div>
<div class="d1">
    <div class="d1-1">
        <div class="d1-1-1"></div>
        <div class="d1-1-2"></div>
        <div class="d1-1-3"></div>
        <div class="d1-1-4"></div>
        <div class="d1-1-5"></div>
    </div>
    <div class="d1-2"></div>
    <div class="d1-3"></div>
    <div class="d1-4"></div>
    <div class="d1-5"></div>
    <div class="d1-6"></div>
</div>
<div class="d2">
    <div class="d2-1">
        <div class="d2-1-1"></div>
        <div class="d2-1-2"></div>
    </div>
    <div class="d2-2"></div>
    <div class="d2-3">
        <div class="d2-3-1"></div>
    </div>
</div>
</body>

需求,我們需要將body下的這些子盒子全都加上邊框

程式碼實現:

<script>
    //給所有的盒子新增邊框
    //我們可以通過childNodes來獲取所有的子節點
    var allNodes = [];
    function getChildNode(node){
        //先找到子結點
        var nodeList = node.childNodes;
        for(var i = 0;i < nodeList.length;i++){
            //childNode獲取到到的節點包含了各種型別的節點
            //但是我們只需要元素節點  通過nodeType去判斷當前的這個節點是不是元素節點
            var childNode = nodeList[i];
            //判斷是否是元素結點
            if(childNode.nodeType == 1){
                childNode.style.border = "1px solid pink";
                getChildNode(childNode);
            }
        }
    }
    getChildNode(document.body);
</script>


相關推薦

js所有後代元素

html程式碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>遞迴的應用</title>

演算法二叉樹的和非(轉)

原文地址 【寫在前面】   二叉樹是一種非常重要的資料結構,很多其它資料結構都是基於二叉樹的基礎演變而來的。對於二叉樹,有前序、中序以及後序三種遍歷方法。因為樹的定義本身就 是遞迴定義,因此採用遞迴的方法去實現樹的三種遍歷不僅容易理解而且程式碼很簡潔。而對於樹的遍歷若採用非遞迴的方法,就要採

js樹形json結構 根據最後一個節點找到整個家族,根據父節點找到所有的子節點,根據層級關係寫成樹形結構

dataTree: [ { id: 1, address: "安徽", pid: 0 }, { id: 6, address: "安徽a", pid: 1 }, { id: 12, address: "安徽aa", pid: 6 },

jsjson所有資料

//遞迴遍歷json所有資料 function getAllJson(jsons, name, sign) { if(name == "" || name == undefined) { name = "json" } for(key in jso

js樹形json結構 根據最後一個節點找到整個家族,根據父節點找到所有的子節點,根據層級關係寫成樹形結構

dataTree: [ { id: 1, address: "安徽", pid: 0 }, { id: 6, address: "安徽a", pid: 1 }, { id: 12, address: "安徽aa", pid: 6

資料結構鄰接矩陣表示法的圖的深度廣度優先和非

假設有以下結構的圖: 用鄰接矩陣表示如下: 因為他是無向圖,我們可以發現他的矩陣是對角對稱的。矩陣中每一行每一列都可以看成是一個頂點,矩陣中的元素表示著該頂點與其他頂點的關係,當元素的值為1說明它與對應列的頂點有邊相連,如果他們的值為0,表示他們沒有邊相

演算法二叉樹的C語言實現

二叉樹是一種極其重要的資料結構,以下是二叉樹的結構定義 建立 和遞迴先序 中序 後序 遍歷的程式碼. #include<stdio.h> #include<stdlib.h> typedef char ElemType; /*二叉樹節點資料

js陣列獲取所有的葉子節點

var arr=[];function queryList(json,arr) { for (var i = 0; i < json.length; i++) { var

資料結構與演算法二叉樹與非(附完整原始碼)

二叉樹是一種非常重要的資料結構,很多其他資料機構都是基於二叉樹的基礎演變過來的。二叉樹有前、中、後三種遍歷方式,因為樹的本身就是用遞迴定義的,因此採用遞迴的方法實現三種遍歷,不僅程式碼簡潔且容易理解,但其開銷也比較大,而若採用非遞迴方法實現三種遍歷,則要用棧來模擬實現(遞迴也

xml檔案所有節點

由於xml格式並不是固定的,xml檔案示例僅作示範,xml節點的深度變化,有點像N叉樹結構,需要採用遞迴演算法: <?xml version="1.0" encoding="UTF-8"?> <TestPackage appNameSpace="com.sprd.an

JavaScript輸出json所有欄位與值的方法

宣告一個三層的json物件作為測試: var js={          "text":"MXCHIP won a prize",          "id": 1234,   &nbs

C#窗體所有textbox控制元件並設定textbox事件的方法

/// <summary> /// /// </summary> /// <param name="sender"></param> /// <param name="e"></param> public virtual void Se

資料夾下所有檔案

遞迴遍歷資料夾下所有檔案 程式碼塊 遞迴遍歷資料夾下所有檔案 package com.chow; import java.io.File; import java.util.ArrayList; /** * Created by zhouhaiming on 20

python資料夾裡面的所有檔案

import os path = "F:/new" #資料夾目錄 datas = [] def eachFile(filepath): fileNames = os.listdir(filepath) # 獲取當前路徑下的檔名,返回List for file

js多維陣列並在修改陣列的key後返回新的多維陣列

我司最近正在用VUE做一個基於使用者許可權顯示不同左側選單的後臺管理系統,介面會根據使用者的許可權不同返回不同的選單名稱、URL等,前端要將這些選單名稱及URL動態新增到系統的左側,這裡就用到了vue-router2.2新添的router.addRouter(routes)方法。但是介面返給我的只是普通的由鍵

某個資料夾及其所有子資料夾下的所有檔案

public class MyTest5 {     public static void main(String[] args) {         String rootDir = "G:"+File.se

獲取複雜物件中所有目標屬性的值(二)

       在利用遞迴遍歷獲取Java複雜物件(物件的屬性仍是物件//list/map)中指定屬性的值(一)中我寫了遞迴遍歷複雜物件中目標屬性,找到第一個目標屬性則退出遍歷。現在有遇到要遍歷複雜物件中所有目標屬性的值。且指定了屬性所在類的類名、屬性型別、屬性

windows API資料夾下所有檔案

1.網上有些程式碼有問題,改進如下 #include <stdio.h> #include<windows.h> #include<iostream> #inclu

c#指定資料夾內的所有檔案(包含子資料夾)

c#程式碼: public class DirectoryAllFiles { static List<FileInformation> FileList = n

linux下 c語言資料夾下所有檔案和子資料夾(附上替換文字檔案內容的方法)

#include <stdio.h> #include <sys/dir.h> #include <string> #include <sys/stat.h> //判斷是否為資料夾 bool isDir(const cha