[Javascript] Deep Search nested tag element in DOM tree
// 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的更多相关文章
- Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
- 虚拟DOM Vitural DOM Tree
提起Virtual DOM,总是给人一种高深莫测的感觉,大家都知道它比DOM快.那么Virtual DOM到底是何方神圣呢?在深入理解Virtual DOM之前,先让我们回顾一下DOM. 一.什么 ...
- DOM Tree
DOM Tree 什么是DOM树:网页的所有内容在内存当中,其实是以树形结构存储的 何时创建:当浏览器,读取html中内容的时候,会马上开始创建DOM树. 如何创建: 1.读到HTML的时候还没有 ...
- [javascript]MooTools Selectors(MooTools 选择器) ELEMENT DOM选择
//ELEMENT DOM选择//on are tag names. //All the divs on the page: $$('div'); //All the divs and paragra ...
- JavaScript学习总结【9】、DOM Ready
1.DOM DOM(Document Object Model)即文档对象模型,是从文档中抽象出来的,DOM 操作的对象就是文档,DOM 将 HTML 文档呈现为带有元素.属性和文本的树结构,即节点树 ...
- 《JAVASCRIPT高级程序设计》节点层次和DOM操作技术
DOM可以将任何HTML和XML文档描绘成一个由多层次节点构成的结构.节点分为几种不同的类型,每种类型分别表示文档中不同的信息,每种类型都继承与Node接口,因此都共同享有一些属性和方法,同时,也拥有 ...
- JavaScript学习日志(五):DOM
一,基本定义 DOM是针对HTML和XML文档的API,根据W3C的HTML DOM标准,html文档中所以内容(无论是元素还是标签还是注释还是元素属性)都是节点. 二,Node类型:每一个节点都含有 ...
- JavaScript高级程序设计学习笔记第十章--DOM
1.DOM:文档对象模型,是针对 HTML 和 XML 文档的一个 API(应用程序编程接口). 2.DOM 可以将任何 HTML 或 XML 文档描绘成一个由多层节点构成的结构. 3.文档节点是每个 ...
- 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
随机推荐
- 关于AS使用git的那些奇葩事儿
首先致谢: http://blog.csdn.net/a10615/article/details/52135617, 我们不生产代码, 我们只做大自然的搬运工! 总结 1. 首次无法push问题: ...
- ASP.NET刷新页面的六种方法
第一: private void Button1_Click( object sender, System.EventArgs e ) { Response.Redirect( Requ ...
- Caffe2:ubuntuKylin17.04使用Caffe2.LSTM
一早发现caffe2的较成熟的release版发布了(the first production-ready release),那么深度学习平台在之后一段时间也是会出现其与tensorflow相互竞争的 ...
- logger日志
Level 描述 ALL 各级包括自定义级别 DEBUG 指定细粒度信息事件是最有用的应用程序调试 ERROR 错误事件可能仍然允许应用程序继续运行 FATAL 指定非常严重的错误事件,这可能导致应用 ...
- Java多线程--线程交替
要求:借助同步机制,sleep()方法,join()方法,实现动画显示:甲线程:1.3.5.7.9乙线程:2.4.6.8.10丙线程:a.b.c.d.emain()线程输出:线程开始,线程结束 输出结 ...
- spotlight on mysql 监控
. 安装 下载地址:https://pan.baidu.com/s/1qYi3lec 官网地址——https://www.quest.com/common/registration.aspx?requ ...
- 洛谷P1208 [USACO1.3]混合牛奶 Mixing Milk【贪心+背包】
由于乳制品产业利润很低,所以降低原材料(牛奶)价格就变得十分重要.帮助Marry乳业找到最优的牛奶采购方案. Marry乳业从一些奶农手中采购牛奶,并且每一位奶农为乳制品加工企业提供的价格是不同的.此 ...
- [luogu4290 HAOI2008]玩具取名(DP)
传送门 Solution 裸区间DP Code #include <map> #include <cmath> #include <cstdio> #include ...
- 佛祖保佑 永无BUG ; 心外无法 法外无心
登录linux命令行后出现的图形 复制图形代码到相应的文件中保存,重新登录即可出现. Usage: For Ubuntu: 12.04: Just copy the content from Budd ...
- 爬虫系列(十二) selenium的基本使用
一.selenium 简介 随着网络技术的发展,目前大部分网站都采用动态加载技术,常见的有 JavaScript 动态渲染和 Ajax 动态加载 对于爬取这些网站,一般有两种思路: 分析 Ajax 请 ...