JS-递归获取当前节点全部指定类型的子节点

在线预览

方法

  • 使用nodeType判断类型,在allChildNodes方法内建立递归函数将allCN封装在方法内。
<!DOCTYPE html>
<html lang="en">
<head>

  <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>

原文地址:https://www.cnblogs.com/jffun-blog/p/10327338.html

时间: 2024-10-09 09:41:54

JS-递归获取当前节点全部指定类型的子节点的相关文章

递归获取当前节点全部指定类型的子节点

在线预览 方法 使用nodeType判断类型,在allChildNodes方法内建立递归函数将allCN封装在方法内. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color: red; } span{ color: blue; }

获取activity上所有指定类型的控件

Android获取所有指定类型的子控件,这样就不需要逐个使用findViewByID来获取控件,来达到控制状态的目的了. /** * 获取所有指定类型的子控件 * @param T * @return */ private List<View> getAllChildViews(Class<?> T) { View view = this.getWindow().getDecorView(); return getAllChildViews(view, T); } private

insertBefore()指定的已有子节点之前插入新的子节点

定义: insertBefore() 方法在您指定的已有子节点之前插入新的子节点. 语法: 父级.insertBefore(新的子节点,指定的已有子节点) 实例: <input id="txt1" type="text"/> <input id="btn1" type="button" value="创建li"/> <ul id="ul1"> <

怎样在当前节点的最后一个元素子节点后面增加新的元素子节点

使用 ParentNode.append(), 比如下面是在body元素节点下追加一个子元素节点: var parent = document.body; // 添加元素子节点 var p = document.createElement('p'); parent.append(p); // 添加文本子节点 parent.append('Hello'); // 添加多个元素子节点 var p1 = document.createElement('p'); var p2 = document.cr

C#中TreeView选中父节点同时选中所有的子节点

TreeView 通常和CheckBoxs一起使用,显示并选择一些条目,特别是在等级分割的状态下,例如 当我选择一个父节点,希望该父节点下所有的子节点都被选中,取消一个节点,希望他所有的父节点都取消,例如 代码如下所示 //取消节点选中状态之后,取消所有父节点的选中状态 private void setParentNodeCheckedState(TreeNode currNode, bool state) { TreeNode parentNode = currNode.Parent; par

Cocos2d-x开发---改变父节点颜色、透明度影响子节点

标题的意思是:当我们修改父节点的颜色或者透明度的时候,默认是不会对子节点产生影响的.在交流群里看见网友说可以通过设定某个参数来达到修改子节点相关属性的效果,就去看了看源码,记录下来: 引擎版本为:2.1.4 引擎中诸如CCSprite 设置颜色的时候是使用基类:CCNodeRGBA中的setColor 方法的.该方法的代码: void CCNodeRGBA::setColor(const ccColor3B& color) { _displayedColor = _realColor = col

Unity获取文件夹下指定类型的文件数量

有个文件夹里面有很多的图片,都是.png格式的,要是一个一个的拖到脚本上觉得很麻烦,就写了一个遍历添加的cars,变量是List<Sprite> 代码如下: using UnityEngine; using System.IO; using System.Collections.Generic; public class NewBehaviourScript : MonoBehaviour { private List<Texture> cars = new List<Tex

使用js如何获取treeview控件的当前选中的节点

var selectedNodeID = theForm.elements["<%=treeView1.ClientID%>_SelectedNode"].value;      if (selectedNodeID != "")       {        var selectedNode = document.getElementById(selectedNodeID);var text = selectedNode.innerHTML;}

c#获取文件夹中指定类型的文件

//第一种方法 var files = Directory.GetFiles(path, "*.txt"); foreach (var file in files) Console.WriteLine(file); //第二种方法 DirectoryInfo folder = new DirectoryInfo(path); foreach (FileInfo file in folder.GetFiles("*.txt")) { Console.WriteLine