[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(' ...
随机推荐
- Django day06 模版层(一) 变量和深度查询
一.模版语法之变量: 1 - {{ 变量 }} ******重要*******{#这个相当于print了该变量#} def index(request): name = 'prince' #字符串 ...
- 【K8s】Kubernetes架构理解
抽空学习了一下Kubernetes,感觉和大数据领域内集群的资源管理.任务调度等有异曲同工之处,简单总结一下备忘. [概念] Kubernetes是一个工业级的容器编排平台,单词有点长,常用K8s代称 ...
- js中 if不判断解决方式
$(function() { $("#number").blur(function() { var number = $('#number').val(); var num = $ ...
- Selenium获取input值的两种方法:WebElement.getAttribute("value")和WebElement.getText()
在页面元素的定位中,有时候需要获取到元素的页面显示值,用来作为断言.例如,我需要获取email的值"amy1111@xxx.com". <input class=" ...
- js-事件处理(重点)
1:各种常用事件: 2:简单用法: <body onLoad="javascript:alert('hello world');" onUnload="javasc ...
- 获取Json中特定的值
假如我们得到了一个json的数据:json===> {"Head":{"TransCode":"X1009","Tr ...
- c#使用RSA进行注册码验证
公司的一个项目快完成了,最后要加上注册验证,翻了n多资料,终于做出来了.现在把体验说一下,以后要用的时候也好找.~~ .Net自带的类库里面有个算法. 这个算法的原理是不对称加密的原理.不对称加密原理 ...
- OpenCV的AdaptiveThreshold函数
摘自于OpenCV Doc2.410,opencv2refman文档. 1.函数原型 adaptiveThreshold //Applies an adaptive threshold to an a ...
- iconfont
查看一些网站代码的过程中,会发现许多的图片是不是背景图片或者<img>,而是类似于下面这样: .iconfont{ font-family:"iconfont" !im ...
- H3C交换机配置学习随笔
1.交换机配置VLAN vlan 创建VLAN: <h3c>system-view [h3c]vlan 10 删除ID为10的vlan:undo vlan 10 注:任何型号的交换机,都支 ...