// 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. 原生JS---4

    原生js学习笔记4——BOM操作 什么是DOM DOM:Do 1. js的组成部分 2. 一套标准,目前有DOM1和DOM2这两种标准 我们可以使用DOM操作来操作页面中的元素. DOM节点 子节点 ...

  2. go package包的使用

    一.标准库 引入 在我们之前所写的所以代码中,我们基本上可以看到fmt这个导入的包,但是我们却不知道如何去写这种包. 如果我们可以自己去写,那么我们就可以将一个功能的集合统一的放入包中,便于以后使用, ...

  3. 一、SQL系列之~使用SQL语言导出数据及实现定时导出数据任务

    一般情况下,SQL数据库中带有导入与导出数据的直接按键操作,点击数据表所在的数据库--任务--导出/导入数据,根据导入/导出向导直接将数据导出即可. 但导出的数据格式多为Excel格式,如果需要导出的 ...

  4. PHP CURL抓取网页 simple_html_dom类

    抓取网页数据后 数据录入到discuz中 <?php include('simple_html_dom.php'); function urlText(){ $url = 'http://www ...

  5. php解析 html类库 simple_html_dom

    如果从字符串加载html文档,需要先从网络上下载.建议使用cURL来抓取html文档并加载DOM中. 查找html元素 可以使用find函数来查找html文档中的元素.返回的结果是一个包含了对象的数组 ...

  6. 【转】SQL SERVER 主体,已同步

    转自郭大侠博客:  https://www.cnblogs.com/gered/p/10601202.html 目录 SQL SERVER 基于数据库镜像的主从同步... 1 1.概念... 2 1. ...

  7. JQuery 动态创建表单,并自动提交

    前言:写这个是为了实现使用cookie进行自动登录的功能, 下面的代码是一个元素一个元素进行创建和赋值的, (可以尝试下将所有的html代码(form.input)全部拼好以后放到${ } 中,再进行 ...

  8. 三维重建面试13X:一些算法试题-今日头条AI-Lab

             被人牵着鼻子走,到了地方还墨明棋妙地吃一顿砖头.今日头条AI-Lab,其实我一直发现,最擅长的还是点云图像处理,且只是点云处理. 一.C++题目   New 与Malloc的区别: ...

  9. SLAM: Orb_SLAM中的ORB特征

    原文链接:什么是ORB 关于Orb特征的获取:参考 最新版的OpenCV中新增加的ORB特征的使用 ORB是是ORiented Brief 的简称,对Brief的特定性质进行了改进. ORB的描述在下 ...

  10. 新书《计算机图形学基础(OpenGL版)》PPT已发布

    为方便有些老师提前备课,1-10章所有章节已发布到本博客中. 欢迎大家下载使用,也欢迎大家给我们的新书反馈与意见,谢谢!