2. 程式人生 > >遞歸獲取當前節點全部指定類型的子節點

遞歸獲取當前節點全部指定類型的子節點

阿新 • • 發佈：2018-02-13
lang 類型 當前 能夠 tle nodetype i++ 文檔 not

在線預覽

方法

  • 使用nodeType判斷類型，在allChildNodes方法內建立遞歸函數將allCN封裝在方法內。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p{
      color: red;
    }
    span{
      color: blue;
    }
    em{
      color: green;
    }
 

    i{
      color: gray;
    }
  </style>
</head>
<body>
  <p>
    p中的純文本節點
    <span style="color: red;">p中的span</span>
    <em>
      p中的em中的純文本節點
      <i>
        p中的em的i中的純文本節點1
        <span>p中的em的i中的span</span>
        p中的em的i中的純文本節點2
      </i>
 

    </em>
  </p>
  <button onclick="console.log(allChildNodes(document.querySelector(‘body‘), 3));">獲取body中全部純文本節點</button>
  <button onclick="console.log(allChildNodes(document.querySelector(‘em‘), 3));">獲取em中全部純文本節點</button>
  <button onclick="console.log(allChildNodes(document.querySelector(‘body‘), 1));"
 
>獲取body中全部節點</button>
  <button onclick="console.log(allChildNodes(document.querySelector(‘em‘), 1));">獲取em中全部節點</button>
  <script>
    /** 遞歸獲取子節點
      1   Element                 代表元素
      2   Attr                    代表屬性
      3   Text                    代表元素或屬性中的文本內容
      4   CDATASection            代表文檔中的 CDATA 部分（不會由解析器解析的文本）
      5   EntityReference         代表實體引用
      6   Entity                  代表實體
      7   ProcessingInstruction   代表處理指令
      8   Comment                 代表註釋
      9   Document                代表整個文檔（DOM 樹的根節點）
      10  DocumentType            向為文檔定義的實體提供接口
      11  DocumentFragment        代表輕量級的 Document 對象，能夠容納文檔的某個部分
      12  Notation                代表 DTD 中聲明的符號
    */
    var allChildNodes = function(node, type){
      // 1.創建全部節點的數組
      var allCN = [];

      // 2.遞歸獲取全部節點
      var getAllChildNodes = function(node, type, allCN){
        // 獲取當前元素所有的子節點nodes
        var nodes = node.childNodes;
        // 獲取nodes的子節點
        for (var i = 0; i < nodes.length; i++) {
            var child = nodes[i];
            // 判斷是否為指定類型節點
            if(child.nodeType == type){
                allCN.push(child);
            }
            getAllChildNodes(child, type, allCN);
        } 
      }
      getAllChildNodes(node, type, allCN);
      // 3.返回全部節點的數組
      return allCN;
    }
  </script>
</body>
</html>

遞歸獲取當前節點全部指定類型的子節點

相關推薦

遞歸獲取當前節點全部指定類型的子節點

lang 類型 當前 能夠 tle nodetype i++ 文檔 not 在線預覽 方法 使用nodeType判斷類型，在allChildNodes方法內建立遞歸函數將allCN封裝在方法內。 <!DOCTYPE html> <html lang="

JS-遞迴獲取當前節點全部指定型別的子節點

線上預覽 方法 使用nodeType判斷型別，在allChildNodes方法內建立遞迴函式將allCN封裝在方法內。 <!DOCTYPE html> <html lang="en"> <head> <title>Document<

java 遞歸實現刪除或查詢指定目錄下的全部文件

rgs 打印 getpath exec sla rect nwr 路徑名 tor /** * 遞歸列舉盤符下的全部文件的名稱，如E:\HeartIsland * * @author HeartIsland * */ public class FileL

Think PHP遞歸獲取所有的子分類的ID （刪除當前及子分類）

cti eid 刪除 error return code where arr pre 遞歸獲取所有的子分類的ID： //遞歸獲取所有的子分類的ID function get_all_child($array,$id){ $arr = array(); fo

[Java] File類 遞歸 獲取目錄下所有文件/文件夾

div static absolut 遞歸 urn 返回 direct gpo private package com.xiwi; import java.io.*; import java.util.*; class file{ public st

ORACLE數據庫遞歸查詢當前節點的父節點和子節點（tree）

oracle 遞歸 ORACLE 數據庫遞歸查詢當前數據的所有孩子數據（不包含自己）SELECT id AS id, parent_id AS parentId, parent_id AS parent, name AS text FROM mdm_center STAR

PHP 根據子ID遞歸獲取父級ID，實現逐級分類導航效果

top () == return clas urn php nbsp 遞歸 代碼： //當前路徑 $cate=M(‘wangpan_class‘)->select(); function get_top_parentid($cate,$i

Java 遞歸獲取一個路徑下的所有文件，文件夾名稱

文件夾 pos static else director args 獲取 body oid package com.readfile; import java.io.File; public class GetAllFiles { public static vo

iOS遞歸獲取子視圖

get 獲取 顯示 with uiview and ted gets IT // 遞歸獲取子視圖 - (void)getSub:(UIView *)view andLevel:(int)level { NSArray *subviews = [view subvie

Asp.Net 如何獲取所有控件&如何獲取指定類型的所有控件

ont lean asp.net typeof his 指定 col div type() 一、 Asp.Net Page頁面中訪問所有控件的屬性為： Page.Controls 控件的結構是樹結構。 二、獲取指定類型所有控件實例： 1.遞歸方法定義： privat

(3).遞歸獲取所有頁碼

一個 name date ges 不想 則表達式 字符串 limit 我們 # -*- coding: utf-8 -*- import scrapy class GetChoutiSpider(scrapy.Spider): name = ‘get_chou

獲取指定路徑下指定類型的文件名稱,並返回可用的新名稱

開頭 size 匹配類型 param 根據 表達 輸入a void 方法 檢查磁盤上指定目錄是否已經存在同名文件(本代碼是檢查.jpg文件類型)，存在三種情況： 1：不存在，返回查詢的名稱 如：輸入abc,返回abc 2：存在一個名稱相同的文件,返回“預定義的名稱+

遞歸獲取包下的class文件

replace str lse main agen ogr pub lac 獲取 ```java(這個居然隱藏不了) public class TestUrl { public static void main(String[] args) { String p

獲取當前系統時間工具類TimeUtils

string public date() new edate 當前 com strong alt TimeUtils： package com.duocy.util; import java.time.LocalDateTime;import java.time.f

Java遞歸獲取部門樹 返回ztree數據

stat nod als array response java equal asp tree @GetMapping("/getDept")@ResponseBodypublic Tree<DeptDO> getDept(String deptId){

C#的一段經典程式碼，查詢當前程式所有繼承或實現自指定類的子類。

1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Text; 5 using System.Threading.Tasks; 6 7 namespace FWJB_S

T-SQL 語句——CTE 遞迴獲取當前使用者及其所有下級使用者

CREATE TABLE #t( Id INT NOT NULL PRIMARY KEY IDENTITY, Name NVARCHAR(20) NOT NULL, ParentId INT NU

python 獲取當前檔案的指定型別的檔名

import os def getFiles(): files = os.listdir(os.getcwd()) # os.getcwd() 獲取當前檔案的路徑 print(files) filesList = [] fo

指定類型的成員XX”不支持實體LINQ。只有初始化，成員單位，和實體導航性能的支持。

where 創建 pos var != sql 支持 bre spec The specified type member ‘DeleteFlag‘ is not supported in LINQ to Entities. Only initializers, entit

Python_替換當前目錄下文件類型

html end style cnblogs 類型 .html print pos lena 1 ‘‘‘ 2 將當前目錄的所有擴展名為html的文件重命名為擴展名為htm的文件 3 方法一 4 ‘‘‘ 5 import os 6 file_list=os.li