DHTML DHTML是個好東西,大大方面了前端的交互實現,使得獲取頁面元素以及動態修改頁面元素變的簡單無比。但是所有的浏覽器都認識這些語法嗎?
document.all
document.all不是所有浏覽器都能識別,要寫出更通用的代碼,最好還是通過id來得到,使用document.getElementById(…)
element.outerText, element.innerText, element.outerHTML,element.innerHTML
element.outerText, element.innerText, element.outerHTML是屬於IE特有的, 而element.innerHTML是通用的。
如果要在其他浏覽器下使用不通用的屬性,可以參考以下代碼實現:
復制代碼 代碼如下:
if(!isIE()){
HTMLElement.prototype.__defineGetter__("innerText",
function(){
var anyString = "";
var childS = this.childNodes;
for(var i=0; i<childS.length; i++){
if(childS[i].nodeType==1)
anyString += childS[i].innerText;
else if(childS[i].nodeType==3)
anyString += ahildS[i].nodeValue;
}
return anyString;
}
);
HTMLElement.prototype.__defineSetter__("innerText",
function(sText){
this.textContent=sText;
}
);
}
document.forms.actionForm.inputName.value
之前用document.all.title.value來獲取名為actionForm的標單中名為title的input域值得地方,應該改為document.forms.actionForm.input.value,要這麼使用,首先要保證HTML中form標簽與其他標簽結構上有完整的閉合關系。
Table操作 moveRow ( iSource , iTarget )方法
oRow = tableObject.moveRow ( iSource , iTarget ),這個方法可以很方便實現table中tr的動態順序調整。但是這個方法是IE內核自己實現的,不是DOM標准方法,所以別的浏覽器沒有。在使用到了這些IE獨有的方法的地方,要麼換用標准的DOM節點操縱方式——insertBefore(currobj, beforeObj.nextSibling),要麼先在HTMLDocument類的prototype上自己實現一個 moveRow方法:
復制代碼 代碼如下:
function getTRArray(){
……
//將需要操縱的tr都放入數組作為該方法的返回值
}
function getTRByIndex(sourceELIndex){
var trArray = getTRArray();
var result = trArray[sourceELIndex];
return result;
}
if( !isIE && HTMLElement.moveRow == null )
{
//入參說明:
//sourceELIndex :需要移動的tr在tbody中的第幾行(>=1)
//targetELIndex :需要移動到tbody中的第幾行(>=1,<=行數)
HTMLElement.prototype.moveRow = function(sourceELIndex,targetELIndex)
{
var tbObject = document.getElementById("tbodyEL");
var resultEL;
if(sourceELIndex>=targetELIndex)
{//move up
var s = sourceELIndex-1;
var t = targetELIndex-1;
}else{
var s = sourceELIndex-1;
var t = targetELIndex;
}
var sourceEL = getTRByIndex(s);
var targetEL = getTRByIndex(t);
//alert("begin"+sourceELIndex+targetELIndex);
//alert("begin"+s+t);
tbObject.insertBefore(sourceEL,targetEL);
resultEL = sourceEL;
return resultEL;
}
}