[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(' ...
随机推荐
- 《疯狂Python讲义》重要笔记--变量
一个Python解释器 接下来的旅程——你需要下载好Python,Python解释器通常放在 /usr/local/bin/python3.7 ; 在Unix系统的bash中输入 where pyth ...
- 数据通讯与网络 第五版第24章 传输层协议-TCP协议部分要点
上一博客记录了UDP协议的关键要点,这部分记录TCP协议的关键要点. 24.3 传输控制协议(TRANSMISSION CONTROL PROTOCOL) TCP(Transmission Contr ...
- C - Between the Offices
Problem description As you may know, MemSQL has American offices in both San Francisco and Seattle. ...
- invoke与call
“调用一个委托实例” 中的 “调用” 对应的是invoke,理解为 “唤出” 更恰当.它和后面的 “在一个对象上调用方法” 中的 “调用” 稍有不同,后则对应的是call.在英语的语境中,invoke ...
- 理解list和vector的区别
原文:http://genwoxuevc.blog.51cto.com/1852984/503337 vector和数组类似,它拥有一段连续的内存空间,并且起始地址不变,因此它能非常好的支持随机存取( ...
- P1375 嵌套矩形
题目Problem 嵌套矩形 Time Limit: 1000ms Memory Limit: 131072KB 描述Descript. 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形 ...
- Activity生命周期(待整理)
1. 定义 有一些方法共同定义生命周期,如下图示:(图片来自于官网文档) 2. onStart()——在Activity即将对用户可见之前调用 (1)Activity启动动画.二维动画在onStart ...
- VC常用代码之创建进程
作者:朱金灿 来源:http://blog.csdn.net/clever101 创建进程是编程开发的常用操作.Windows中的创建进程采用API函数CreateProcess实现.下面是一个使用例 ...
- 如何使用Visual Studio调试C#程序
当代码不能正常运行时,可以通过调试定位错误.常用的程序调试操作包括设置断点.开始.中断和停止程序的执行.单步执行程序以及使程序运行到指定的位置.下面将对这几种常用的程序调试操作进行详细地介绍. 1.断 ...
- AO如何获取SDE数据库中的数据
/// <summary> /// 获取Table类型表的记录 /// </summary> /// <param name="relationCheckCla ...