// 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. PCB 全景图技术实现

    为了对3D模型理解更透,这里采用threejs(WebGL第三方库)实现,刚开始学习入门,为了能看明白基本上每行代码都注释. 如果仅仅是为了实现全景图,可以用photo-sphere-viewer.j ...

  2. IP Address

    http://poj.org/problem?id=2105 #include<stdio.h> #include<string.h> int main() { ]; ] = ...

  3. grunt的学习和使用

    目前正在编写公司的部分组件,可能一个组件会包含很多js和css,为了项目上使用方便,应该压缩成一个js库,以供开发者使用,同时也可以减少很多http请求,提高页面访问速度.基于此,学习了grunt自动 ...

  4. JDK介绍

    Java的版本最开始是1995年的JDK Alpha and Beta版本,第二年发布JDK1.0版本之后就是JDK1.1,JDK1.2.到1998年,不再叫JDK了,而是叫J2SE,但是版本号还是继 ...

  5. sqlserver 树结构递归(向上递归和向下递归)

    --获取当前及以下部门 Create proc GetCurrentAndUnderOrg @orgId int as begin WITH cte AS ( SELECT * ,0 AS level ...

  6. ★Java语法(五)——————————三元运算符

    package 课上练习; public class 三元运算符 { //用法: 数据类型 变量 = 布尔表达式? 条件满足设置内容:条件不满足设置内容 : public static void ma ...

  7. Embedded之Stack之二

    1 Function Programming languages make functions easy to maintain and write by giving each function i ...

  8. semiautomatic annotated tools

    在进行实验图像取样时,可能会用到大量的标签样本,拍摄大量图片进行手工标注要消耗大量时间,半自动化的标注工具可以节省一些时间. 原文链接:http://blog.sina.com.cn/s/blog_6 ...

  9. ORACLE 查询不走索引的原因分析,解决办法通过强制索引或动态执行SQL语句提高查询速度

    (一)索引失效的原因分析: <>或者单独的>,<,(有时会用到,有时不会) 有时间范围查询:oracle 时间条件值范围越大就不走索引 like "%_" ...

  10. BZOJ 3450: Tyvj1952 Easy 数学期望

    Code: #include <bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) ...