// For example you want to search for nested ul and ol in a DOM tree branch

// Give example <ol> <li> <ol> <li></li> </ol> </li> </ol> should retrun 2

function solution( tags = ['ul', 'ol']) {

  const [uls, ols] = tags.map(tag => Array.from($(`${tag}`)));
  const [logUl, logOl] = tags.map(tag => new Logger(`${tag}`));

  deepSearch(uls, 'ul', logUl);
  deepSearch(ols, 'ol', logOl);

  return logUl.count + logOl.count;
}

class Logger {
constructor(tag) {
this.tag = tag;
this.num = ;
} get count () {
return this.num;
} get tagName () {
return this.tag;
} countOne() {
this.num++;
}
} function deepSearch(els = [], tag = "", log) { // if no such elements passed in
if (!els.length) {
return;
} log.countOne(); // loop though the els and check whether contains tag
els.forEach(el => {
const targets = Array.from(el.getElementsByTagName(`${tag}`));
if (targets.length) {
deepSearch(targets, tag, log);
}
});
}

[Javascript] Deep Search nested tag element in DOM tree的更多相关文章

  1. Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode

    Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...

  2. 虚拟DOM Vitural DOM Tree

      提起Virtual DOM,总是给人一种高深莫测的感觉,大家都知道它比DOM快.那么Virtual DOM到底是何方神圣呢?在深入理解Virtual DOM之前,先让我们回顾一下DOM. 一.什么 ...

  3. DOM Tree

    DOM Tree   什么是DOM树:网页的所有内容在内存当中,其实是以树形结构存储的 何时创建:当浏览器,读取html中内容的时候,会马上开始创建DOM树. 如何创建: 1.读到HTML的时候还没有 ...

  4. [javascript]MooTools Selectors(MooTools 选择器) ELEMENT DOM选择

    //ELEMENT DOM选择//on are tag names. //All the divs on the page: $$('div'); //All the divs and paragra ...

  5. JavaScript学习总结【9】、DOM Ready

    1.DOM DOM(Document Object Model)即文档对象模型,是从文档中抽象出来的,DOM 操作的对象就是文档,DOM 将 HTML 文档呈现为带有元素.属性和文本的树结构,即节点树 ...

  6. 《JAVASCRIPT高级程序设计》节点层次和DOM操作技术

    DOM可以将任何HTML和XML文档描绘成一个由多层次节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息,每种类型都继承与Node接口,因此都共同享有一些属性和方法,同时,也拥有 ...

  7. JavaScript学习日志(五):DOM

    一,基本定义 DOM是针对HTML和XML文档的API,根据W3C的HTML DOM标准,html文档中所以内容(无论是元素还是标签还是注释还是元素属性)都是节点. 二,Node类型:每一个节点都含有 ...

  8. JavaScript高级程序设计学习笔记第十章--DOM

    1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...

  9. 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

随机推荐

  1. 《疯狂Python讲义》重要笔记--变量

    一个Python解释器 接下来的旅程——你需要下载好Python,Python解释器通常放在 /usr/local/bin/python3.7 ; 在Unix系统的bash中输入 where pyth ...

  2. 数据通讯与网络 第五版第24章 传输层协议-TCP协议部分要点

    上一博客记录了UDP协议的关键要点,这部分记录TCP协议的关键要点. 24.3 传输控制协议(TRANSMISSION CONTROL PROTOCOL) TCP(Transmission Contr ...

  3. C - Between the Offices

    Problem description As you may know, MemSQL has American offices in both San Francisco and Seattle. ...

  4. invoke与call

    “调用一个委托实例” 中的 “调用” 对应的是invoke,理解为 “唤出” 更恰当.它和后面的 “在一个对象上调用方法” 中的 “调用” 稍有不同,后则对应的是call.在英语的语境中,invoke ...

  5. 理解list和vector的区别

    原文:http://genwoxuevc.blog.51cto.com/1852984/503337 vector和数组类似,它拥有一段连续的内存空间,并且起始地址不变,因此它能非常好的支持随机存取( ...

  6. P1375 嵌套矩形

    题目Problem 嵌套矩形 Time Limit: 1000ms    Memory Limit: 131072KB 描述Descript. 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形 ...

  7. Activity生命周期(待整理)

    1. 定义 有一些方法共同定义生命周期,如下图示:(图片来自于官网文档) 2. onStart()——在Activity即将对用户可见之前调用 (1)Activity启动动画.二维动画在onStart ...

  8. VC常用代码之创建进程

    作者:朱金灿 来源:http://blog.csdn.net/clever101 创建进程是编程开发的常用操作.Windows中的创建进程采用API函数CreateProcess实现.下面是一个使用例 ...

  9. 如何使用Visual Studio调试C#程序

    当代码不能正常运行时,可以通过调试定位错误.常用的程序调试操作包括设置断点.开始.中断和停止程序的执行.单步执行程序以及使程序运行到指定的位置.下面将对这几种常用的程序调试操作进行详细地介绍. 1.断 ...

  10. AO如何获取SDE数据库中的数据

    /// <summary> /// 获取Table类型表的记录 /// </summary> /// <param name="relationCheckCla ...