原生javascript實現(xiàn)獲取指定元素下所有后代元素的方法

更新時間：2014年10月28日 15:08:45 投稿：shichen2014

這篇文章主要介紹了原生javascript實現(xiàn)獲取指定元素下所有后代元素的方法,在進行web程序設計時是非常實用的技巧,需要的朋友可以參考下

本文實例講述了原生javascript實現(xiàn)獲取指定元素下所有后代元素的方法，分享給大家供大家參考。具體實現(xiàn)方法如下：

過去常用的循環(huán)遞歸的方式顯得非常的麻煩，下面就分享一個比較簡單的方式，使用原生的javascript方法即可實現(xiàn)此功能。
代碼實例如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dhdzp.com/" />

<title>javascript獲取后代元素</title>

<script type="text/javascript">

window.onload=function(){

  var obox=document.getElementById("box");

  var oshow=document.getElementById("show");

  var nodes=obox.getElementsByTagName("*");

  oshow.innerHTML=nodes.length;

}

</script>

</head>

<body>

<div id="show"></div>

<div id="box">

  <div>

    <ul>

      <li>元素一</li>

      <li>元素二</li>

      <li>元素三</li>

    </ul>

  </div>

</div>

</body>

</html>

上面的代碼實現(xiàn)了我們的要求，參數(shù)星號表示一個通配符，它可以匹配所有類型的標簽。
getElementsByTagName()方法的調(diào)用對象決定了它的查找范圍。

希望本文所述對大家的javascript web程序設計有所幫助。

您可能感興趣的文章:

JavaScript實現(xiàn)快速排序的方法
這篇文章主要介紹了JavaScript實現(xiàn)快速排序的方法,實例分析了javascript快速排序的相關實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-07-07
JavaScript中防抖和節(jié)流的區(qū)別及適用場景
這篇文章主要介紹了JavaScript中防抖和節(jié)流的區(qū)別及適用場景，文章通過圍繞主題的相關資料展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-05-05
使用OpenLayers3 添加地圖鼠標右鍵菜單
這篇文章主要介紹了使用OpenLayers3 添加地圖鼠標右鍵菜單的相關資料,需要的朋友可以參考下
2015-12-12
shiro授權的實現(xiàn)原理
這篇文章主要介紹了shiro授權的實現(xiàn)原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
Bootstrap在線電子商務網(wǎng)站實戰(zhàn)項目5
這篇文章主要為大家分享了Bootstrap在線電子商務網(wǎng)站實戰(zhàn)項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
Javascript獲取統(tǒng)一管理的提示語(message)
這篇文章主要介紹了Javascript獲取統(tǒng)一管理的提示語(message)的相關資料,需要的朋友可以參考下
2016-02-02
簡單實現(xiàn)輪播圖效果的實例
下面小編就為大家?guī)硪黄唵螌崿F(xiàn)輪播圖效果的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-07-07
保姆級Decimal.js使用教程(解決js精度問題)
這篇文章主要給大家介紹了關于保姆級Decimal.js使用的相關資料,文中介紹的方法主要解決了js精度問題,decimal.js庫它是一個強大的JavaScript庫,用于解決浮點數(shù)計算精度不準確的問題,需要的朋友可以參考下
2024-05-05
JavaScript組合拼接字符串的效率對比測試
這篇文章主要介紹了JavaScript組合拼接字符串的效率對比測試,本文測試了IE6、Firefox、Mozilla、Netscape、Opera等瀏覽器,需要的朋友可以參考下
2014-11-11
追蹤discord.js中刪除消息的用戶方法實例詳解
這篇文章主要為大家介紹了如何追蹤discord.js中刪除消息的用戶方法實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2024-01-01