javascript getElementsByClassName 和js取地址欄參數(shù)
更新時間:2010年01月02日 02:45:38 作者:
為了從一大堆HTML代碼中找出我們的樹狀菜單(也許有多個),我們先來實現(xiàn)一個通過className找DOM節(jié)點的方法:getElementsByClassName。這是對瀏覽器自有DOM方法的一個簡單但實用的擴(kuò)充。
getElementsByClassName()
為了從一大堆HTML代碼中找出我們的樹狀菜單(也許有多個),我們先來實現(xiàn)一個通過className找DOM節(jié)點的方法:getElementsByClassName。這是對瀏覽器自有DOM方法的一個簡單但實用的擴(kuò)充。
此方法有兩個參數(shù):ele指出以哪個DOM節(jié)點為根節(jié)點尋找(也就是說只找ele的子節(jié)點),className指出符合條件的節(jié)點的class屬性中必須包含怎樣的className。它的返回值是一個數(shù)組,存放了所有符合條件的節(jié)點。
function getElementsByClassName(ele,className) {
//獲取所有子節(jié)點
if(document.all){
var children = ele.all;
}else{
var children = ele.getElementsByTagName('*');
}
//遍歷子節(jié)點并檢查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');
最前面的一個if-else語是為了兼容IE5(IE5不能運行
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 = ...。不過實際操作的時候發(fā)現(xiàn)在
運行時HTMLElement這個對象并不是固定的,每種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');
為了從一大堆HTML代碼中找出我們的樹狀菜單(也許有多個),我們先來實現(xiàn)一個通過className找DOM節(jié)點的方法:getElementsByClassName。這是對瀏覽器自有DOM方法的一個簡單但實用的擴(kuò)充。
此方法有兩個參數(shù):ele指出以哪個DOM節(jié)點為根節(jié)點尋找(也就是說只找ele的子節(jié)點),className指出符合條件的節(jié)點的class屬性中必須包含怎樣的className。它的返回值是一個數(shù)組,存放了所有符合條件的節(jié)點。
復(fù)制代碼 代碼如下:
function getElementsByClassName(ele,className) {
//獲取所有子節(jié)點
if(document.all){
var children = ele.all;
}else{
var children = ele.getElementsByTagName('*');
}
//遍歷子節(jié)點并檢查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');
最前面的一個if-else語是為了兼容IE5(IE5不能運行
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 = ...。不過實際操作的時候發(fā)現(xiàn)在
運行時HTMLElement這個對象并不是固定的,每種tag似乎都不一樣,只能作罷。
取地址欄參數(shù)
復(fù)制代碼 代碼如下:
//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實現(xiàn)代碼
- 使用classList來實現(xiàn)兩個按鈕樣式的切換方法
- Javascript 多瀏覽器兼容性問題及解決方案
- IE8的JavaScript點擊事件(onclick)不兼容的解決方法
- JavaScript在IE和Firefox(火狐)的不兼容問題解決方法小結(jié)
- JavaScript中解決多瀏覽器兼容性23個問題的快速解決方法
- JS中g(shù)etElementsByClassName與classList兼容性問題解決方案分析
相關(guān)文章
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方
本篇文章主要介紹了javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法)需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12JavaScript結(jié)合AJAX_stream實現(xiàn)流式顯示
這篇文章主要介紹了JavaScript結(jié)合AJAX_stream實現(xiàn)流式顯示,需要的朋友可以參考下2015-01-01基于javascript實現(xiàn)單選及多選的向右和向左移動實例
這篇文章主要介紹了基于javascript實現(xiàn)單選及多選的向右和向左移動,涉及javascript針對頁面元素的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07mvc 、bootstrap 結(jié)合分布式圖簡單實現(xiàn)分頁
這篇文章主要介紹了mvc 、bootstrap 結(jié)合分布式圖簡單實現(xiàn)分頁的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-10-10JavaScript中實現(xiàn)異步編程模式的4種方法
這篇文章主要介紹了JavaScript中實現(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-02