How to find the HTML tag that appears most frequently on the current page
This article introduces how to find the most frequent HTML tags on the current page, the content is very detailed, interested friends can refer to, hope to be helpful to you.
This is an interview question with front-end fundamentals and programming skills: if you know that document.querySelector (*) can list all the tags on the page, if you have strong programming skills, you can quickly achieve the same effect with recursion.
> document.querySelectorAll ('*')
< NodeList(593) [html, head, meta, meta, meta, meta, meta, meta, meta, title, link#favicon, link, link#MainCss, link#mobile-style, link, link, link, script, script, script, script, script, script, script, link, script, link, link, script, input#_w_brink, body, a, div#home, div#header, div#blogTitle, a#lnkBlogLogo, img#blogLogo, h2, a#Header1_HeaderTitle.headermaintitle.HeaderMainTitle, h3, div#navigator, ul#navList, li, a#blog_nav_sitehome.menu, li, a#blog_nav_myhome.menu, li, a#blog_nav_newpost.menu, li, a#blog_nav_contact.menu, li, a#blog_nav_rss.menu, li, a#blog_nav_admin.menu, div.blogStats, span#stats_post_count, span#stats_article_count, span#stats-comment_count, div#main, div#mainContent, div.forFlow, div#post_detail, div#topics, div.post, h2.postTitle, a#cb_post_title_url.postTitle2.vertical-middle, span, div.clear, div.postBody, div#cnblogs_post_body.blogpost-body, p, p, strong, p, p, p, strong, div.cnblogs_code, pre, span, span, span, span, span, p, span, strong, pre, strong, span, strong, br, br, br, div.cnblogs_code, pre, span, span, p, p, …] [0 … 99] [100 … 199] [200 … 299] [300 … 399] [400 … 499] [500 … 592] __proto__: NodeList 使用 document.querySelectorAll 实现如下 const maxBy = (list, keyBy) =>List.reduce ((x, y) = > keyBy (x) > keyBy (y)? X: y)
Function getFrequentTag () {
Const tags = [... document.querySelectorAll ('*')] .map (x = > x.tagName). Reduce ((o, tag) = > {
O [tag] = o [tag]? O [tag] + 1: 1
Return o
}, {})
Return maxBy (Object.entries (tags), tag = > tag [1])
}
Recursive iterations using element.children are as follows (the end result is one more document)
Function getAllTags (el = document) {
Const children = Array.from (el.children). Reduce ((x, y) = > [. X,... getAllTags (y)], [])
Return children
}
/ / or implemented through flatMap
Function getAllTags (el = document) {
Const children = Array.prototype.flatMap.call (el.children, x = > getAllTags (x))
Return [el,... children]
}
On how to find the most frequent HTML tags on the current page to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.
