javascript getElementsByClassName 和js取地址欄參數(shù)
更新時間:2010年01月02日 02:45:38 作者:
為了從一大堆HTML代碼中找出我們的樹狀菜單(也許有多個),我們先來實現(xiàn)一個通過className找DOM節(jié)點的方法:getElementsByClassName。這是對瀏覽器自有DOM方法的一個簡單但實用的擴充。
getElementsByClassName()
為了從一大堆HTML代碼中找出我們的樹狀菜單(也許有多個),我們先來實現(xiàn)一個通過className找DOM節(jié)點的方法:getElementsByClassName。這是對瀏覽器自有DOM方法的一個簡單但實用的擴充。
此方法有兩個參數(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方法的一個簡單但實用的擴充。
此方法有兩個參數(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)文章
JS實現(xiàn)鼠標拖拽盒子移動及右鍵點擊盒子消失效果示例
這篇文章主要介紹了JS實現(xiàn)鼠標拖拽盒子移動及右鍵點擊盒子消失效果,涉及javascript事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
《javascript設(shè)計模式》學(xué)習(xí)筆記四:Javascript面向?qū)ο蟪绦蛟O(shè)計鏈式調(diào)用實例分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計鏈式調(diào)用,結(jié)合實例形式分析了《javascript設(shè)計模式》中鏈式調(diào)用的原理與簡單使用技巧,需要的朋友可以參考下2020-04-04

