Cross-browser development experience summary (3) Be wary of "IE dependency syndrome"_javascript skills

DHTML
DHTML is a good thing, which greatly facilitates front-end interaction implementation, making it extremely simple to obtain page elements and dynamically modify page elements. But do all browsers understand these syntaxes?
document.all
document.all is not recognized by all browsers. To write more general code, it is best to get it through the id, using document.getElementById(…)
element.outerText, element.innerText, element.outerHTML, element.innerHTML
element.outerText, element.innerText, element.outerHTML are unique to IE, while element.innerHTML is universal.
If you want to use non-universal attributes in other browsers, you can refer to the following code implementation:

Copy the code The code is as follows :

if(!isIE()){
HTMLElement.prototype.__defineGetter__("innerText",
function(){
var anyString = "";
var childS = this.childNodes;
for(var i=0; iif(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
Previously, document.all.title.value was used to obtain the value of the input field named title in the bid form named actionForm. It should be changed to document.forms.actionForm. Input.value, to use it this way, you must first ensure that the form tag in HTML has a complete closure relationship with other tag structures.
Table operation
moveRow (iSource, iTarget) method
oRow = tableObject.moveRow (iSource, iTarget). This method can easily realize the dynamic order adjustment of tr in the table. However, this method is implemented by the IE kernel itself and is not a DOM standard method, so other browsers do not have it. Where these unique methods of IE are used, either switch to the standard DOM node manipulation method - insertBefore(currobj, beforeObj.nextSibling), or first implement a moveRow method on the prototype of the HTMLDocument class:

Copy code The code is as follows:

function getTRArray(){
......
//will The tr that needs to be manipulated are put into the array as the return value of this method
}

function getTRByIndex(sourceELIndex){
var trArray = getTRArray();
var result = trArray[sourceELIndex] ;
return result;
}

if( !isIE && HTMLElement.moveRow == null )
{
//Input parameter description:
//sourceELIndex: required Which row in the tbody the moved tr is in (>=1)
//targetELIndex: Which row in the tbody needs to be moved to (>=1, <=number of rows)
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;
}
}