// 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. A Reusable Aspect for Memory Profiling

    例子: malPro.acc文件: #include <stdlib.h> size_t totalMemoryAllocated; int totalAllocationFuncCall ...

  2. Ruby 各种离奇运算符

    创建: 20170717 更新: 改变分类 Rails ---> Ruby 更新: 2017/10/16 增加&., #try 参考: 传送门  ||=   a ||= b相当于 a = ...

  3. 0423-mysql查询语句大全

    建表.数据插入代码: #新建学生表 drop table if exists student; create table student( sno ) not null primary key com ...

  4. 【BZOJ2693】jzptab & 【BZOJ2154】Crash的数字表格

    题目 弱化版题目的传送门([BZOJ2154]Crash的数字表格) 加强版题目的传送门([BZOJ2693]jzptab) 思路&解法 题目是要求: \(\sum\limits_{i = 1 ...

  5. 微信小程序获取当前所在城市

    本篇文章主要讲解在微信小程序中,如何利用微信自带的api(wx.getLocation())结合百度地图的逆地址解析api来获取当前所在城市名. 实现起来也比较简单,步骤为: 1--利用微信小程序接口 ...

  6. Picked up JAVA_TOOL_OPTIONS: -agentlib:jvmhook解决方法

    有时候电脑中进行Java -version相关的操作时,会出现Picked up JAVA_TOOL_OPTIONS: -agentlib:jvmhook提示信息,尽管这些提示信息不影响JDK的正常使 ...

  7. ES6 Template String 模板字符串

    模板字符串(Template String)是增强版的字符串,用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量. 大家可以先看下面一段代码: $(&quo ...

  8. Django中的bug总结

    1.插入数据库的时候,少写一个字段.ps:看准数据库的字段,是不是非空,是不是外键. 2.当同一个视图中需要连续操作两个数据表时,先看好两个表的外键之间的关系,再进行操作表.比如:一个订单表order ...

  9. Centos7.5 在桌面创建AndroidStudio快捷方式

    Centos7 在桌面创建AndroidStudio快捷方式 前言 最近安装了Centos7,打算将开发平台转移到Linux下,安装好AndroidStudio后,桌面没有快捷方式有些不习惯,随自己创 ...

  10. java多线线程停止正确方法

    //军队线程 //模拟作战双方的行为 public class ArmyRunnable implements Runnable { //volatile保证了线程可以正确的读取其他线程写入的值 // ...