使用JS獲取頁面上的所有標簽
更新時間：2018年10月18日 08:46:33 作者：一只菜鳥攻城獅啊
這篇文章主要介紹了使用JS獲取頁面上的所有標簽 ,需要的朋友可以參考下
最近忙的一匹，忙著大保健，都來不及寫博客，今天特意抽出點時間來寫一寫
前兩天看到一個題，是問如何從頁面上獲取所有的標簽的并查看他們的數(shù)量，感覺還是有點意思的，所以給大家來搞一下子
我們先來捋捋思路，那要從頁面上獲取標簽，不用說我們肯定會想到DOM操作，那獲取到了之后呢，我們又不確定某個元素有沒有子元素，那怎么辦呢，這個時候我們肯定會想到遞歸啊
那現(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 = {};
//采用遞歸調用的方法，比較方便和簡單。
function fds(node) {
if (node.nodeType === 1) {
//這里我們用nodeName屬性，直接獲取節(jié)點的節(jié)點名稱
var tagName = node.nodeName;
//判斷對象中存在不存在同類的節(jié)點，若存在則添加，不存在則添加并賦值為1
map[tagName] = map[tagName] ? map[tagName] + 1 : 1;
}
//獲取該元素節(jié)點的所有子節(jié)點
var children = node.childNodes;
for (var i = 0; i < children.length; i++) {
//遞歸調用
fds(children[i])
}
}
fds(document);
console.log(map)
</script>
總結
以上所述是小編給大家介紹的使用JS獲取頁面上的所有標簽，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關文章
要實現(xiàn)短信驗證碼界面，首先要有一個文本框，旁邊是按鈕，點擊時開始倒計時。接下來通過本文給大家分享js實現(xiàn)簡單短信驗證碼界面，感興趣的朋友參考下吧2017-08-08
javascritp實際上由三部分組成： ECMAScript，DOM, BOM 前兩者由工業(yè)標準，BOM尚比較混亂。2009-12-12
本篇文章主要介紹了js剪切板應用clipboardData。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
下面小編就為大家?guī)硪黄齽t表達式替換html元素屬性的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
以下是JavaScript容易犯錯的九個陷阱。雖然不是什么很高深的技術問題，但注意一下，會使您的編程輕松些，即所謂make life easier. 筆者對某些陷阱會混雜一些評點。2008-05-05
這篇文章主要為大家整理了關于Bootstrap導航的慕課筆記，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了JavaScript時間轉換處理函數(shù)的方法的相關資料,需要的朋友可以參考下2015-04-04
使用JavaScript實現(xiàn)檢測網(wǎng)頁是否為空閑狀態(tài)
最近開發(fā)項目時,常碰到“用戶在一定時間內無任何操作時,跳轉到某個頁面”的需求,所以本文就來使用JavaScript實現(xiàn)這一要求,需要的可以參考下2024-03-03
這篇文章主要介紹了解讀input標簽的value屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要給大家介紹了關于JS實現(xiàn)數(shù)組內值累加常見的3個方法,文中通過實例代碼將3個方法介紹的非常詳細,對大家學習或者使用js具有一定參考借鑒價值,需要的朋友可以參考下2023-07-07