javascript實現的獲取下一個li元素程式碼例項
本章節分享一段程式碼例項,它實現了獲取當前li元素的下一個li元素效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> #items{ width:900px; height:auto; margin:0 auto; padding:5px 0; clear:both; } #items ul, #items li{ list-style:none; } #items li{ width:500px; height:28px; text-align:left; padding-left: 0px; line-height:28px; border-bottom:dashed 1px #CCC; cursor:pointer; } </style> <script type="text/javascript"> window.onload=function(){ var obt=document.getElementById("bt"); var obox=document.getElementById("items"); var lis=obox.getElementsByTagName("li"); obt.onclick=function(){ var theNode=lis[1].nextSibling; while (theNode.nodeType!=1) { theNode=theNode.nextSibling; } theNode.style.color="red"; } } </script> </head> <body> <div id="items"> <ul> <li>螞蟻部落歡迎您,只有努力奮鬥才會有美好的未來</li> <li>沒有任何人一開始就是高手,必須要好好學習</li> <li>本站的url地址是softwhy.com</li> <li>每一天都是新的,所以要好好真心當前時間</li> <li>div css教程裡面有大量詳實的程式碼</li> </ul> </div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
(1).window.onload=function(){},文件內容完全載入完畢再去執行函式中的程式碼。
(2).var obt=document.getElementById("bt"),獲取按鈕元素物件。
(3).var obox=document.getElementById("items"),獲取div元素物件。
(4).var lis=obox.getElementsByTagName("li"),獲取div下的所有li元素集合。
(5).obt.onclick=function(){},為按鈕註冊click事件處理函式。
(6).var theNode=lis[1].nextSibling,獲取第二li元素的下一個緊鄰節點,注意這個屬性獲取的節點可能是元素節點,也可能是文字節點,比如空白或者換行都會被看做文字節點。
(7).while (theNode.nodeType!=1) {
theNode=theNode.nextSibling;
},通過while迴圈尋找最緊鄰的元素節點。
(8).將最緊鄰的元素節點中的文字顏色設定為紅色。
二.相關閱讀:
(1).getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。
(2).nextSibling屬性可以參閱js nextSibling一章節。
(3).while語句可以參閱javascript while語句一章節。
相關文章
- CSS匹配第一個li元素程式碼例項CSS
- JavaScript 獲取下一個元素節點JavaScript
- JavaScript 獲取第n個li元素JavaScript
- 獲取倒數第幾個元素程式碼例項
- JavaScript 獲取倒數第二個li元素JavaScript
- JavaScript刪除元素節點程式碼例項JavaScript
- JavaScript in運算子程式碼例項JavaScript
- JavaScript動態新增li元素JavaScript
- jQuery利用name匹配元素程式碼例項jQuery
- 正則實現個位數補零程式碼例項
- JavaScript運動框架程式碼例項JavaScript框架
- JavaScript取餘數程式碼例項JavaScript
- JavaScript 阻止事件冒泡程式碼例項JavaScript事件
- CSS 匹配第一個li元素CSS
- JavaScript中常用的事件程式碼及例項JavaScript事件
- python 單一程式例項 實現Python
- 127 PHP獲取網頁標題的3種實現方法程式碼例項PHP網頁
- html實現簡單ListViews效果的例項程式碼HTMLView
- JavaScript陣列合並程式碼例項JavaScript陣列
- JavaScript倒數計時程式碼例項JavaScript
- JavaScript 表單驗證程式碼例項JavaScript
- jQuery遍歷array陣列元素程式碼例項jQuery陣列
- JavaScript li元素的順序隨機打亂JavaScript隨機
- vuejs實現新增tag標籤程式碼例項VueJS
- 例項程式碼分享Python實現Linux監控PythonLinux
- JavaScript獲取陣列最後一個元素JavaScript陣列
- JavaScript隨滑鼠晃動的div塊程式碼例項JavaScript
- MyCat分片:水平拆分例項解析和程式碼實現!
- 前端學習程式碼例項-JavaScript阻止事件冒泡前端JavaScript事件
- 一個線性迴歸例項的公式推導、程式碼實現、問題解析以及模型評價公式模型
- react專案中實現元素的拖動和縮放例項React
- jQuery查詢第n個li元素jQuery
- CSS 第2個li元素樣式CSS
- JavaScript讀取文字檔案內容程式碼例項JavaScript
- 前端學習程式碼例項-JavaScript 生成隨機數前端JavaScript隨機
- Python物件導向多型實現原理及程式碼例項Python物件多型
- JavaScript 點選複製選中文字程式碼例項JavaScript
- Python實現簡單網頁圖片抓取完整程式碼例項Python網頁
- dom操作程式碼例項