快捷導(dǎo)航

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

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://m.fzitv.net/" />

<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>

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

希望本文所述對(duì)大家的javascript web程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

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