javascript getElementsByClassName 和js取地址欄參數(shù)
為了從一大堆HTML代碼中找出我們的樹狀菜單(也許有多個(gè)),我們先來實(shí)現(xiàn)一個(gè)通過className找DOM節(jié)點(diǎn)的方法:getElementsByClassName。這是對瀏覽器自有DOM方法的一個(gè)簡單但實(shí)用的擴(kuò)充。
此方法有兩個(gè)參數(shù):ele指出以哪個(gè)DOM節(jié)點(diǎn)為根節(jié)點(diǎn)尋找(也就是說只找ele的子節(jié)點(diǎn)),className指出符合條件的節(jié)點(diǎn)的class屬性中必須包含怎樣的className。它的返回值是一個(gè)數(shù)組,存放了所有符合條件的節(jié)點(diǎn)。
function getElementsByClassName(ele,className) {
//獲取所有子節(jié)點(diǎn)
if(document.all){
var children = ele.all;
}else{
var children = ele.getElementsByTagName('*');
}
//遍歷子節(jié)點(diǎn)并檢查className屬性
var elements = new Array();
for (var i = 0; i < children.length; i++) {
var child = children[i];
var classNames = child.className.split(' ');
for (var j = 0; j < classNames.length; j++) {
if (classNames[j] == className) {
elements[elements.length] = child;
break;
}
}
}
return elements;
}
var trees = getElementsByClassName(document,'TreeView');
最前面的一個(gè)if-else語是為了兼容IE5(IE5不能運(yùn)行
document.getElementsByTagName('*'))。需要注意的是千萬不要用瀏覽器檢測的方法來寫腳本,而應(yīng)該直接使用將要用到的語句來測試是否可以執(zhí)行,如果返回值為null或undefined,那再換一種方法。這樣的腳本可以有更好的兼容性,也更健壯。
elements[elements.length] = child;,這句同樣是為了兼容IE5才沒有使用數(shù)組
的push方法。如果你一定要使用push方法,那么可以在執(zhí)行g(shù)etElementsByClassName()
之前先重載一遍push方法。代碼如下:
Array.prototype.push = function(value){
this[this.length] = value;
} 注:原本我希望getElementsByClassName也能像push方法一樣寫,比如
HTMLElement.prototype.getElementsByClassName = ...。不過實(shí)際操作的時(shí)候發(fā)現(xiàn)在
運(yùn)行時(shí)HTMLElement這個(gè)對象并不是固定的,每種tag似乎都不一樣,只能作罷。
取地址欄參數(shù)
//v1:
var URLParams = new Array();
var aParams = document.location.search.substr(1).split('&');
for (i=0; i < aParams.length i++){
var aParam = aParams.split('=');
URLParams[aParam[0]] = aParam[1];
}
//取得傳過來的name參數(shù)
name=URLParams['name'];
//v2:
Request = {
QueryString : function(item){
var svalue = location.search.match(new
RegExp('[\?\&]' + item + '=([^\&]*)(\&?)','i'));
return svalue ? svalue[1] : svalue;
}
}
var key = Request.QueryString('key');
- javascript getElementsByClassName函數(shù)
- js document.getElementsByClassName的使用介紹與自定義函數(shù)
- js 獲取class的元素的方法 以及創(chuàng)建方法getElementsByClassName
- javascript getElementsByClassName實(shí)現(xiàn)代碼
- 使用classList來實(shí)現(xiàn)兩個(gè)按鈕樣式的切換方法
- Javascript 多瀏覽器兼容性問題及解決方案
- IE8的JavaScript點(diǎn)擊事件(onclick)不兼容的解決方法
- JavaScript在IE和Firefox(火狐)的不兼容問題解決方法小結(jié)
- JavaScript中解決多瀏覽器兼容性23個(gè)問題的快速解決方法
- JS中g(shù)etElementsByClassName與classList兼容性問題解決方案分析
相關(guān)文章
JS 輸入字?jǐn)?shù)判斷實(shí)現(xiàn)代碼
判斷輸入的字?jǐn)?shù)2009-08-08javascript操作table(insertRow,deleteRow,insertCell,deleteCell方
本篇文章主要介紹了javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法)需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12JavaScript結(jié)合AJAX_stream實(shí)現(xiàn)流式顯示
這篇文章主要介紹了JavaScript結(jié)合AJAX_stream實(shí)現(xiàn)流式顯示,需要的朋友可以參考下2015-01-01基于javascript實(shí)現(xiàn)單選及多選的向右和向左移動(dòng)實(shí)例
這篇文章主要介紹了基于javascript實(shí)現(xiàn)單選及多選的向右和向左移動(dòng),涉及javascript針對頁面元素的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07mvc 、bootstrap 結(jié)合分布式圖簡單實(shí)現(xiàn)分頁
這篇文章主要介紹了mvc 、bootstrap 結(jié)合分布式圖簡單實(shí)現(xiàn)分頁的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10JavaScript中實(shí)現(xiàn)異步編程模式的4種方法
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)異步編程模式的4種方法,本文講解了回調(diào)函數(shù)、事件監(jiān)聽、發(fā)布/訂閱、Promises對象4種方法,需要的朋友可以參考下2014-09-09js數(shù)字轉(zhuǎn)換為float,取N位小數(shù)
在javascript中不分單精度float和雙精度double,凡事有小數(shù)的變量都認(rèn)為是float,因此要取小數(shù)后的n位,要用方法toFixed(n)來得到2014-02-02JS實(shí)現(xiàn)簡單移動(dòng)端鼠標(biāo)拖拽
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡單移動(dòng)端鼠標(biāo)拖拽,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07