獲取第一級指定型別子元素程式碼例項
本章節介紹一下如何獲取父元素下第一級指定型別的子元素。
可能不少朋友首先想到使用obox.getElementByTageName("div")這種方式來獲取元素,但是這種方式獲取的是所有的後代元素,並不僅僅是一級子元素,下面就通過程式碼例項介紹如何實現標題中的需求。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload=function(){ var obox=document.getElementById("box"); var oshow=document.getElementById("show"); var childNodes=obox.childNodes; var num=0; for(var index=0;index<childNodes.length;index++){ if(childNodes[index].nodeType==1&&childNodes[index].tagName=="DIV"){ num++; } } oshow.innerHTML=num; } </script> </head> <body> <div id="box"> <div> <div>二級子元素</div> <div>二級子元素</div> </div> <div>一級子元素</div> <div>一級子元素</div> </div> <div id="show"></div> </body> </html>
上面的程式碼實現了獲取一級div子元素的效果,下面簡單介紹一下它的實現過程。
一.程式碼註釋:
1.window.onload=function(){},當文件內容完全載入完畢再去執行函式中的程式碼。
2.var obox=document.getElementById("box"),獲取id屬性值為box的元素物件。
3.var oshow=document.getElementById("show"),獲取id屬性值為show的元素物件。
4.var childNodes=obox.childNodes,獲取obox元素下的所有子節點。
5.var num=0,宣告一個變數用來儲存指定型別子節點的數目。
6.for(var index=0;index<childNodes.length;index++){
if(childNodes[index].nodeType==1&&childNodes[index].tagName=="DIV"){
num++;
}
},遍歷每一個子節點,然後獲取獲元素節點,並且標籤型別是div,滿足條件num就加1.
二.相關閱讀:
1.childNodes可以參閱js childNodes一章節。
2.nodeType屬性可以參閱js nodeType一章節。
3.tagName屬性可以參閱javascript tagName一章節。
相關文章
- 獲取倒數第幾個元素程式碼例項
- CSS匹配第一個li元素程式碼例項CSS
- JavaScript 獲取指定標籤一級子元素JavaScript
- jQuery利用name匹配元素程式碼例項jQuery
- jquery獲取低程式碼平臺iframe巢狀的父級元素指定元素jQuery巢狀
- Vue使用Ref跨層級獲取元件例項Vue元件
- JavaScript刪除元素節點程式碼例項JavaScript
- React獲取元件例項React元件
- jquery如何獲取第一個或最後一個子元素?jQuery
- JavaScript取餘數程式碼例項JavaScript
- jQuery遍歷array陣列元素程式碼例項jQuery陣列
- jq獲取上級、同級、下級元素
- puppeteer 頁面爬取例項(元素遍歷)
- 127 PHP獲取網頁標題的3種實現方法程式碼例項PHP網頁
- 獲取當前Tomcat例項的埠Tomcat
- Nacos - 客戶端例項列表獲取客戶端
- ajax讀取資料庫資料程式碼例項資料庫
- JavaScript讀取文字檔案內容程式碼例項JavaScript
- .NET控制檯獲取依賴注入例項依賴注入
- Bash 指令碼例項:獲取符號連結的目標位置指令碼符號
- dom操作程式碼例項
- css梯形程式碼例項CSS
- 對比分析Java反射獲取例項的速度Java反射
- JS 獲取文件元素JS
- 原始碼 | 靜態工廠返回宣告的返回型別的子型別的例項原始碼型別
- 一文梳理獲取本地IP和遠端IP的各種方式,附Python程式碼例項Python
- Android Input子系統-含例項原始碼Android原始碼
- JavaScript in運算子程式碼例項JavaScript
- 設計模式例項程式碼設計模式
- table表格美化程式碼例項
- activiti 根據 流程例項ID 獲取發起人
- 純css tab選項卡程式碼例項CSS
- jQuery tab選項卡效果程式碼例項jQuery
- JavaScript獲取父元素下子元素節點JavaScript
- 獲取 NodeJS 程式退出碼NodeJS
- jquery獲取元素節點jQuery
- dom元素操作獲取等
- 模型關聯 一對一 獲取關聯模型例項模型
- 爬蟲例項-淘寶頁面商品資訊獲取爬蟲