原生javascript實現(xiàn)獲取指定元素下所有后代元素的方法
更新時間：2014年10月28日 15:08:45 投稿：shichen2014
這篇文章主要介紹了原生javascript實現(xiàn)獲取指定元素下所有后代元素的方法,在進行web程序設(shè)計時是非常實用的技巧,需要的朋友可以參考下
本文實例講述了原生javascript實現(xiàn)獲取指定元素下所有后代元素的方法，分享給大家供大家參考。具體實現(xiàn)方法如下：
過去常用的循環(huán)遞歸的方式顯得非常的麻煩，下面就分享一個比較簡單的方式，使用原生的javascript方法即可實現(xiàn)此功能。
代碼實例如下:
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.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>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.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>
上面的代碼實現(xiàn)了我們的要求，參數(shù)星號表示一個通配符，它可以匹配所有類型的標簽。
getElementsByTagName()方法的調(diào)用對象決定了它的查找范圍。
希望本文所述對大家的javascript web程序設(shè)計有所幫助。
您可能感興趣的文章:
- 利用原生JavaScript獲取元素樣式只是獲取而已
- Javascript獲取CSS偽元素屬性的實現(xiàn)代碼
- javascript獲取元素偏移量的方法有哪些
- javascript獲取隱藏元素(display:none)的高度和寬度的方法
- javascript 獲取元素樣式必殺技
- javascript獲取form里的表單元素的示例代碼
- javascript通過className來獲取元素的簡單示例代碼
- javascript獲取鼠標點擊元素對象(示例代碼)
- 用Javascript獲取頁面元素的具體位置
- javascript獲取元素CSS樣式代碼示例
- javascript通過class來獲取元素實現(xiàn)代碼
- 原生javascript獲取元素樣式屬性值的方法
相關(guān)文章
這篇文章主要介紹了JavaScript實現(xiàn)快速排序的方法,實例分析了javascript快速排序的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
JavaScript中防抖和節(jié)流的區(qū)別及適用場景
這篇文章主要介紹了JavaScript中防抖和節(jié)流的區(qū)別及適用場景，文章通過圍繞主題的相關(guān)資料展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了使用OpenLayers3 添加地圖鼠標右鍵菜單的相關(guān)資料,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了shiro授權(quán)的實現(xiàn)原理，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Bootstrap在線電子商務(wù)網(wǎng)站實戰(zhàn)項目5
這篇文章主要為大家分享了Bootstrap在線電子商務(wù)網(wǎng)站實戰(zhàn)項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
Javascript獲取統(tǒng)一管理的提示語(message)
這篇文章主要介紹了Javascript獲取統(tǒng)一管理的提示語(message)的相關(guān)資料,需要的朋友可以參考下2016-02-02
下面小編就為大家?guī)硪黄唵螌崿F(xiàn)輪播圖效果的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要給大家介紹了關(guān)于保姆級Decimal.js使用的相關(guān)資料,文中介紹的方法主要解決了js精度問題,decimal.js庫它是一個強大的JavaScript庫,用于解決浮點數(shù)計算精度不準確的問題,需要的朋友可以參考下2024-05-05
這篇文章主要介紹了JavaScript組合拼接字符串的效率對比測試,本文測試了IE6、Firefox、Mozilla、Netscape、Opera等瀏覽器,需要的朋友可以參考下2014-11-11
這篇文章主要為大家介紹了如何追蹤discord.js中刪除消息的用戶方法實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01