// 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. 联想Thinkpad L460安装Win7 64位

    单位发了L460,自带的系统为win10,但是涉及到很多工作以及客户都是在win7环境下,所以必须安装win7的系统,经过一番折腾,终于装好了. 主要顺序如下: 1,制作WINPE启动盘,如大白菜,老 ...

  2. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  3. Java.HttpClient绕过Https证书解决方案一

    方案1 import javax.net.ssl.*; import java.io.*; import java.net.URL; import java.security.KeyManagemen ...

  4. net .异步委托知识

    以前在编程中,异步用的比较少,导致C# 一些基础的 东西用法都不怎么熟悉,经常要用的时候在去查找资料比较被动,而已没真正里面理解起来,始终感觉不是自己的知识 (题外话) 首先委托关键字  Delega ...

  5. 2A课程笔记分享_StudyJams_2017

    课程2A 概述 课程2A.2B的内容主要是关于创建交互式应用的基础知识.之前的L1课程主要是Android UI的基础设计知识,基本上没涉及到编程. 2A的讲解主要包括:使用变量来更新欲显示在屏幕上的 ...

  6. JavaScript变量提升及作用域

    今天在知乎看前端面试题的时候,看到这样的问题,发现自己懂的真的是太少了,看了给的例子,所以写一下自己的理解. 首先放一段代码: var v= “hello JavaScript”; alert(v); ...

  7. 手动触发dom节点事件代码

    在爬代码过程中,碰到一个稀奇古怪的问题.需要手工修改select的值,然后手动触发select的change事件,但使用网络上查到的通过trigger.onchange()事件触发都不执行,没办法,只 ...

  8. sql server 还原数据库,数据库提示正在还原中的处理办法

      还原数据库时,提示还原成功,可是数据库列表中该数据库显示正在还原中: 执行此命令即可: RESTORE DATABASE EnterPriseBuilding WITH RECOVERY 了解SQ ...

  9. 安卓Java读取SD卡文本文件

    在进行序列识别时,需要对多个模式串进行识别,需要对多行浮点数进行读取,并进行解析. 所以使用的方法为: 使用文本多行读取的方式:对每行文本进行正则表达式匹配:再进行字符转换. 代码如下:        ...

  10. C++对象的内存模型

    1. 普通对象模型 对象是如何在内存中布局的? 成员 存放位置 访问范围 非静态数据成员 每一个对象体内 为该对象专有 静态数据成员 程序的静态存储区内,只有一份实体 为该类所有对象共享 成员函数(静 ...