原生js實現的獲取當前元素的上一個元素節點
如果利用jQuery實現此功能,非常的方便,
具體可以參閱jQuery prev()一章節。
下面就通過程式碼例項介紹一下如何利用原生javascript實現此功能。
程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload=function(){ var oli=document.getElementById("antzone"); var node=oli.previousSibling; while(node.nodeType==3){ node=node.previousSibling; } node.style.color="red"; } </script> </head> <body> <ul id="box"> <li>螞蟻部落一</li> <li id="antzone">螞蟻部落二</li> <li>螞蟻部落三</li> <li>螞蟻部落四</li> </ul> </body> </html>
上面的程式碼實現了我們的要求,下面介紹一下它的實現過程。
一.程式碼註釋:
1.window.onload=function(){},當文件內容完全載入完畢再去執行函式中的嗲嗎。
2.var oli=document.getElementById("antzone"),獲取id屬性值為antzone的元素物件。
3.var node=oli.previousSibling,獲取當前元素的上一個同輩節點,這個節點可能是文字節點也可能是元素節點,空格換行被當做文字節點處理。
4.while(node.nodeType==3){
node=node.previousSibling;
},這個的作用是過濾掉文字節點,獲取元素節點。
5.node.style.color="red",將字型顏色設定為紅色。
二.相關閱讀:
1.previousSibling可以參閱javascript previousSibling一章節。
2.nodeType可以參閱js nodeType一章節。
3.while語句可以參閱javascript while語句一章節。
相關文章
- 封裝js獲取當前元素的弟弟元素節點封裝JS
- jquery實現的獲取當前元素的上一個元素程式碼例項jQuery
- javascript獲取當前元素的上一級元素JavaScript
- 獲取當前元素在兄弟元素節點中的索引索引
- jQuery獲取當前元素的下一個元素jQuery
- jQuery獲取當前li元素的下一個元素jQuery
- jQuery獲取當前元素的上一個或者下一個元素程式碼例項jQuery
- jQuery獲取當前元素上一個兄弟元素例項程式碼jQuery
- jQuery獲取當前元素的上一級元素程式碼例項jQuery
- jQuery如何獲取當前元素的兄弟元素jQuery
- 獲取當前元素下一個元素程式碼例項
- jQuery如何獲取當前元素的索引jQuery索引
- JQuery獲取當前元素本身jQuery
- js獲取節點元素物件的方法介紹JS物件
- 點選元素實現當前元素隱藏效果
- js實現的獲取指定元素的節點封裝程式碼例項JS封裝
- JavaScript獲取父元素下子元素節點JavaScript
- jquery獲取元素節點jQuery
- JavaScript獲取當前點選元素的id屬性值JavaScript
- jQuery獲取當前元素的下一級子元素程式碼例項jQuery
- JavaScript獲取當前li元素的索引位置JavaScript索引
- JavaScript獲取上一個元素JavaScript
- jQuery獲取上一個元素jQuery
- JavaScript獲取當前li元素是第幾個JavaScript
- js獲取元素的方法(獲取html元素的方法)JSHTML
- jquery獲取緊鄰的上一個元素jQuery
- javascript實現的點選當前元素隱藏效果JavaScript
- JavaScript 獲取下一個元素節點JavaScript
- js如何元素當前元素所有的父元素JS
- javascript獲取當前li元素在集合中的位置JavaScript
- js獲取當前時間上一個月前的時間JS
- 原生javascript如何刪除一個元素節點物件JavaScript物件
- jQuery如何獲取元素父節點和子節點jQuery
- 如何利用js獲取取得焦點的元素JS
- 小程式獲取當前元素在螢幕中的位置
- JavaScript 獲取所有後代元素節點JavaScript
- 原生就javascript實現的獲取子元素程式碼例項JavaScript
- js_原生js獲取當前的使用者ipJS