使用JS獲取頁面上的所有標(biāo)簽

更新時(shí)間：2018年10月18日 08:46:33 作者：一只菜鳥攻城獅啊

這篇文章主要介紹了使用JS獲取頁面上的所有標(biāo)簽 ,需要的朋友可以參考下

最近忙的一匹，忙著大保健，都來不及寫博客，今天特意抽出點(diǎn)時(shí)間來寫一寫

　　前兩天看到一個(gè)題，是問如何從頁面上獲取所有的標(biāo)簽的并查看他們的數(shù)量，感覺還是有點(diǎn)意思的，所以給大家來搞一下子

　　我們先來捋捋思路，那要從頁面上獲取標(biāo)簽，不用說我們肯定會(huì)想到DOM操作，那獲取到了之后呢，我們又不確定某個(gè)元素有沒有子元素，那怎么辦呢，這個(gè)時(shí)候我們肯定會(huì)想到遞歸啊

　　那現(xiàn)在我們有了DOM操作和遞歸就好辦了，就可以直接寫代碼了，下面是代碼，寫了注釋，大家可以拉下去參考一下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
</head>
<body>
 <ul></ul>
</body>
</html>
<script>
 var map = {};
 //采用遞歸調(diào)用的方法，比較方便和簡單。
 function fds(node) {
  if (node.nodeType === 1) {
   //這里我們用nodeName屬性，直接獲取節(jié)點(diǎn)的節(jié)點(diǎn)名稱
   var tagName = node.nodeName;
   //判斷對(duì)象中存在不存在同類的節(jié)點(diǎn)，若存在則添加，不存在則添加并賦值為1
   map[tagName] = map[tagName] ? map[tagName] + 1 : 1;
  }
   //獲取該元素節(jié)點(diǎn)的所有子節(jié)點(diǎn)
  var children = node.childNodes;
  for (var i = 0; i < children.length; i++) {
   //遞歸調(diào)用
   fds(children[i])
  }
 }
 fds(document);
 console.log(map)
</script>

總結(jié)

以上所述是小編給大家介紹的使用JS獲取頁面上的所有標(biāo)簽，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

JS實(shí)現(xiàn)簡單短信驗(yàn)證碼界面
要實(shí)現(xiàn)短信驗(yàn)證碼界面，首先要有一個(gè)文本框，旁邊是按鈕，點(diǎn)擊時(shí)開始倒計(jì)時(shí)。接下來通過本文給大家分享js實(shí)現(xiàn)簡單短信驗(yàn)證碼界面，感興趣的朋友參考下吧
2017-08-08
JavaScript 拾漏補(bǔ)遺
javascritp實(shí)際上由三部分組成： ECMAScript，DOM, BOM 前兩者由工業(yè)標(biāo)準(zhǔn)，BOM尚比較混亂。
2009-12-12
js 剪切板應(yīng)用clipboardData詳細(xì)解析
本篇文章主要介紹了js剪切板應(yīng)用clipboardData。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-12-12
正則表達(dá)式替換html元素屬性的方法
下面小編就為大家?guī)硪黄齽t表達(dá)式替換html元素屬性的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
JavaScript的9個(gè)陷阱及評(píng)點(diǎn)分析
以下是JavaScript容易犯錯(cuò)的九個(gè)陷阱。雖然不是什么很高深的技術(shù)問題，但注意一下，會(huì)使您的編程輕松些，即所謂make life easier. 筆者對(duì)某些陷阱會(huì)混雜一些評(píng)點(diǎn)。
2008-05-05
整理關(guān)于Bootstrap警示框的慕課筆記
這篇文章主要為大家整理了關(guān)于Bootstrap導(dǎo)航的慕課筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
JavaScript時(shí)間轉(zhuǎn)換處理函數(shù)
這篇文章主要介紹了JavaScript時(shí)間轉(zhuǎn)換處理函數(shù)的方法的相關(guān)資料,需要的朋友可以參考下
2015-04-04
使用JavaScript實(shí)現(xiàn)檢測(cè)網(wǎng)頁是否為空閑狀態(tài)
最近開發(fā)項(xiàng)目時(shí),常碰到“用戶在一定時(shí)間內(nèi)無任何操作時(shí),跳轉(zhuǎn)到某個(gè)頁面”的需求,所以本文就來使用JavaScript實(shí)現(xiàn)這一要求,需要的可以參考下
2024-03-03
解讀input標(biāo)簽的value屬性及name屬性
這篇文章主要介紹了解讀input標(biāo)簽的value屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
JS實(shí)現(xiàn)數(shù)組內(nèi)值累加常見的3個(gè)方法
這篇文章主要給大家介紹了關(guān)于JS實(shí)現(xiàn)數(shù)組內(nèi)值累加常見的3個(gè)方法,文中通過實(shí)例代碼將3個(gè)方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07