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語句一章節。
相關文章
- 原生javascript獲取下一級子元素程式碼例項JavaScript
- javascript實現的交換li元素的位置程式碼例項JavaScript
- javascript獲取li元素內容程式碼例項JavaScript
- JavaScript獲取下一個元素JavaScript
- jQuery獲取指定的li元素程式碼例項jQuery
- 獲取指定元素下所有li元素程式碼例項
- jquery如何獲取li元素的前n個程式碼例項jQuery
- 獲取指定區間的li元素程式碼例項
- jQuery獲取所有的li元素程式碼例項jQuery
- CSS匹配第一個li元素程式碼例項CSS
- css匹配最後一個li元素程式碼例項CSS
- jQuery實現的獲取m到n之間的li元素程式碼例項jQuery
- 用jQuery獲取指定前幾個li元素程式碼例項jQuery
- 原生就javascript實現的獲取子元素程式碼例項JavaScript
- JavaScript 獲取下一個元素節點JavaScript
- jquery實現的獲取當前元素的上一個元素程式碼例項jQuery
- js實現li元素隔行背景變色例項程式碼JS
- 在ul的最後插入一個li元素程式碼例項
- css匹配第n個li元素程式碼例項CSS
- 在指定位置插入一個新的li元素程式碼例項
- javascript獲取指定元素父元素程式碼例項JavaScript
- 原生javascript實現獲取指定元素下所有後代元素程式碼例項JavaScript
- js刪除li元素程式碼例項JS
- jquery刪除前n個li元素程式碼例項jQuery
- JavaScript獲取下一個同級元素節點JavaScript
- 獲取當前元素下一個元素程式碼例項
- javascript獲取元素的順序程式碼例項JavaScript
- javascript獲取元素封裝程式碼例項JavaScript封裝
- js刪除指定的li元素程式碼例項JS
- jquery動態新增li元素程式碼例項jQuery
- css匹配指定行li元素程式碼例項CSS
- 獲取當前li是第幾個的程式碼例項
- ul li實現的新聞列表程式碼例項
- jQuery獲取當前元素的上一個或者下一個元素程式碼例項jQuery
- JavaScript 獲取第n個li元素JavaScript
- jQuery獲取當前元素上一個兄弟元素例項程式碼jQuery
- jQuery調整li元素順序程式碼例項jQuery
- javascript實現的清空表單元素內容程式碼例項JavaScript