DOM的基本方法与IE和FF的JS兼容问题

一.直接引用结点
1.document.getElementById(id);
      --在文档里面通过id来找结点
2.document.getElementByTagName(tagName);
      --返回一个数组，包含对这些结点的引用
      --如：document.getElementByTagName("span");将返回所有类型为span的结点
二.间接引用结点
3.element.childNodes
      --返回element的所有子结点,可以用element.childNodes的方式来调用
      --element.firstChild=element.childNodes[0];
      --element.lastChild=element.childNodes[element.childNonts.length-1];
4.element.parentNode
      --引用父结点
5.element.nextSibling;   //引用下一个兄弟结点
   element.previousSibling; //引用上一个兄弟结点
三.获得结点信息
6.nodeName属性获得结点名称
      --对于元素结点返回的是标记名称,如：<a herf><a>返回的是"a"
      --对于属性结点返回的是属性名称,如：class="test" 返回的是test
      --对于文本结点返回的是文本的内容
7.nodeType返回结点的类型
      --元素结点返回1
      --属性结点返回2
      --文本结点返回3
8.nodeValue返回结点的值
      --元素结点返回null
      --属性结点返回undefined
      --文本结点返回文本内容
9.hasChildNodes()判断是否有子结点
10.tagName属性返回元素的标记名称
      --这个属性只有元素结点才有，等同于元素结点的nodeName属性
四.处理属性结点
11.每个属性结点都是元素结点的一个属性，可以通过(元素结点.属性名称)访问
12.利用setAttribute()方法给元素结点添加属性
      --elementNode.setAttribute(attributeName,attributeValue);
      --attributeName为属性的名称，attributeValue为属性的值
13.使用getAttribute()方法获得属性值
      --elementNode.getAttribute(attributeName);
五.处理文本结点
14.innerHTML和innerText属性，这两个方法相信大家都很熟悉,不介绍了,值得注意的是无论是ie还是firefox都容易把空格、换行、制表符等当成文本结点。所有一般通过element.childNodes引用文本结点的时候，一般要处理：
      <script language"javaScript" type="text/javascript">
         function cleanWhitespace(element)
         {
            for(var i=0; i<element.childNotes.length; i++)
            {
               var node = element.childNodes;
               if(node.nodeType == 3 && !//S/.test(node.nodeValue))
               {
                  node.parentNode.removeChild(node);
               }
            }
         }
      </script>
六.改变文档的层次结构
15.document.createElement()方法创建元素结点
      --如：document.createElement("Span");
16.document.createTextNode()方法创建文本结点
      --如：document.createTextNode(" "); //注:他不会通过html编码，也就是说这里创建的不是空格，而是字符串
17.使用appendChild()方法添加结点
      --parentElement.appendChild(childElement);
18.使用insertBefore()方法插入子节点
      --parentNode.insertBefore(newNode,referenceNode);
      --newNode为插入的节点，referenceNode为将插入的节点插入到这之前
19.使用replaceChild方法取代子结点
      --parentNode.replaceChild(newNode,oldNode);
      --注：oldNode必须是parentNode的子结点,
20.使用cloneNode方法复制结点
      --node.cloneNode(includeChildren);
      --includeChildren为bool，表示是否复制其子结点
21.使用removeChild方法删除子结点
      --parentNode.removeChild(childNode);
七.表格的操作
      --注：ie中无法直接将一个完整的表格结点插入到文档中
22.添加行和单元格
      var _table=document.createElement("table");   //创建表
      table.insertRow(i);                  //在table的第i行插入行
      row.insertCell(i);                     //在row的第i个位置插入单元格
23.引用单元格对象
      --table.rows.cells;
24.删除行和单元格
      --table.deleteRow(index);
      --row.deleteCell(index);
25.交换两行获得两个单元格的位置
      node1.swapNode(node2);
      --这个方法在firefox中将出错
      通用方法：
      function swapNode(node1,node2)
      {
         var _parent=node1.parentNode;
         var _t1=node1.nextSubling;
         var _t2=node2.nextSubling;
         if(_t1)parent.insertBefore(node2,_t1);
         else _parent.appendChild(node2);        
         if(_t2)parent.insertBefore(node1,_t2);
         else _parent.appendChild(node1);
       }


删除所有空白结点：
<script language"javaScript" type="text/javascript">
         function cleanWhitespace(element)
         {
            for(var i=0; i<element.childNotes.length; i++)
            {
               var node = element.childNodes;
               if(node.nodeType == 3 && !//S/.test(node.nodeValue))
               {
                  node.parentNode.removeChild(node);
               }
            }
         }
      </script>
nodetype=3结点类型是文本/s匹配所有空白
将结点插入指定索引位置
function insertAt(parentNode,newNode,index)
{
       if(!parentNode.hasChildNodes())
       {
              parentNode.appendChild(newNode);
              return newNode;
}
//使用try捕获索引不存在出现的异常
try{
       parentNode.insertBefore(newNode,parentNode.childNodes[index]);
}
catch(e){
       return null;
}

IE和Firefox的兼容问题
1、Event的问题
在ie中我们可以直接使用event变量，但是在firefox下由于event是局部变量，firefox下我们可以事件绑定到元素上 例如
<input type="button" οnclick="doEvent (event)">  
为了同时兼容ie和firefox 通常在函数种通过以下代码获得事件。
var theEvent = window.event||e;
var srcElement = theEvent.srcElement;
   if (!srcElement) {
        srcElement = theEvent.target;
   }
2、滤镜问题
在IE下是用.filters.alpha.opacity
在Firefox下是用.style.opacity
一般是来设置元素的透明度，所以我们一般通过以下代码来解决兼容问题
var IE = navigator.userAgent.indexOf("MSIE")>0? 1: 0;
if(IE)
{
     obj.filters.alpha.opacity;
}
Else
{
     obj.style.opacity;
}
3、innerText
IE下我们经常使用innerText，但是Firefox不支持此写法，通常我们写成textContent. 它同时兼容IE和firefox，建议大家采用textContent.对于没有html标签的我们也可以采用innerHTML替代。
4、event.srcElement
IE下,event对象有srcElement属性,但是没有target属性;Firefox下,event对象有target属性,但是没有srcElement属性.
解决方法:使用obj(obj = event.srcElement ? event.srcElement : event.target;)
5、 parentNode替代parentElement
在IE中我可以通过obj.parentElement获得父元素，但是firex下不支持
因为firefox与IE都支持DOM，所有我们可以采用obj.parentNode来解决。
6、集合类对象问题
IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.

7、自定义属性问题
说明:IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性.
解决方法:统一通过getAttribute()获取自定义属性.
8、eval("idName")问题
说明:IE下,,可以使用eval("idName")或getElementById("idName")来取得id为idName的HTML对象;Firefox下只能使用getElementById("idName")来取得id为idName的HTML对象.
解决方法:统一用getElementById("idName")来取得id为idName的HTML对象.
9、变量名与某HTML对象ID相同的问题
说明:IE下,HTML对象的ID可以作为document的下属对象变量名直接使用;Firefox下则不能.Firefox下,可以使用与HTML对象ID相同的变量名;IE下则不能。
解决方法:使用document.getElementById("idName")代替document.idName.最好不要取HTML对象ID相同的变量名,以减少错误;在声明变量时,一律加上var,以避免歧义.
10、const问题
说明:Firefox下,可以使用const关键字或var关键字来定义常量;IE下,只能使用var关键字来定义常量.
解决方法:统一使用var关键字来定义常量.
11、input.type属性问题
说明:IE下input.type属性为只读;但是Firefox下input.type属性为读写.
12、event.x与event.y问题
说明:IE下,even对象有x,y属性,但是没有pageX,pageY属性;Firefox下,even对象有pageX,pageY属性,但是没有x,y属性.
解决方法:使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

13、window.location.href问题
说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;Firefox1.5.x下,只能使用window.location.
解决方法:使用window.location来代替window.location.href.
14、模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口;Firefox下则不能.
解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById("Aqing").value = "Aqing";
15、frame问题
以下面的frame为例：
<frame src="/xxx.html" id="frameId" name="frameName" />
(1)访问frame对象:
IE:使用window.frameId或者window.frameName来访问这个frame对象.
Firefox:只能使用window.frameName来访问这个frame对象.
另外，在IE和Firefox中都可以使用window.document.getElementById("frameId")来访问这个frame对象.
(2)切换frame内容:
在IE和Firefox中都可以使用window.document.getElementById("testFrame").src = "xxx.html"或window.frameName.location = "xxx.html"来切换frame的内容.
如果需要将frame中的参数传回父窗口，可以在frme中使用parent来访问父窗口。例如：parent.document.form1.filename.value="Aqing";
16、body问题
Firefox的body在body标签没有被浏览器完全读入之前就存在；而IE的body则必须在body标签被浏览器完全读入之后才存在.
例如：
Firefox：
<body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
}
</script>
</body>
IE&Firefox：
<body>
</body>
<script type="text/javascript">
document.body.onclick = function(evt){
evt = evt || window.event;
alert(evt);
} </script>
17、 事件委托方法
IE：document.body.onload = inject; //Function inject()在这之前已被实现
Firefox：document.body.onload = inject();
document.body.οnlοad=new Function('inject()');
18、cursor:hand 和 cursor:pointer
firefox不支持hand，但ie支持pointer
解决方法: 统一使用pointer
19、 FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法：
obj.style.height = imgObj.height + 'px';
20、ie,firefox以及其它浏览器对于 table 标签的操作都各不相同，在ie中不允许对table和tr的innerHTML赋值，使用js增加一个tr时，使用appendChile方法也不管用。
解决方法：
//向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td");
cell.innerHTML = " ";
cell.className = "XXXX";
row.appendChild(cell);
21、 padding 问题
padding 5px 4px 3px 1px FireFox无法解释简写,必须改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;
22、消除ul、ol等列表的缩进时
样式应写成:list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效
23、CSS透明
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
24、CSS圆角
IE：不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border- radius- bottomright:4px;。
25、CSS双线凹凸边框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;
26、ie支持document.all 而firefox 不支持
改用下面三个tag的其中一个来代替docaument.all
getElementsByTagName("tagName") 可以得到得到所有标签元素的集a合
getElementById("idName")          可以按id得到某一元素
getElementsByName("Name")            可以得到按name属性得到某一元素
27、firefox 中使用innerHTML 的方法
<div id="online"></div>
document.all.online.innerHTML; //这种方法在IE中可以使用，但不是标准方法
document.getElementById("online").innerHTML; //这样firefox就能使用innerHTML了
28、eval()与window.execScript()执行脚本
IE、firerox均支持eval()，firefox不支持window.execScript()
解决：统一使用eval()
29、e.button键值有别于event.button,只有3个键值而无组合键值

30、IE和FireFox的鼠标滚轮事件
滚轮IE和Firefox的代码不一样：
IE是mousewheel事件，Firefox是DOMMouseScroll事件
事件属性，IE是event.wheelDelta，Firefox是event.detail
属性的方向值也不一样，IE向上滚 > 0，Firefox向下滚 > 0
//滚轮放大或缩小，基于Prototype 1.6
var scrollfunc = function(event) {
var direct = 0;
        if (event.wheelDelta) {
                direct = event.wheelDelta > 0 ? 1 : -1;
        } else if (event.detail) {
                direct = event.detail < 0 ? 1 : -1;
        }
        zoom(direct);
};
Event.observe(document, 'mousewheel', scrollfunc);
Event.observe(document, 'DOMMouseScroll', scrollfunc); //firefox
31、attachEvent方法
attachEvent方法解释:
attachEvent有2个参数,第一个参数是事件名,第二个参数是事件触发后所响应的方法. Firefox下解决方法是
Object.prototype.attachEvent=function(method,func)
{
if(!this[method])
this[method]=func;
else
this[method]=this[method].attach(func);
}
Function.prototype.attach=function(func){
var f=this;
return function(){
f();
func();
}
}
32 、title替代alt
在firefox和ie尽力都用title,alt在firefox下不起作用
33、iframe中元素访问
IE：var d=document.getElementById("iframeName").document;
FF：var d=document.getElementById("iframeName").contentWindow.document;
在FF中IFRAME的“document”不叫document，改名叫contentDocument, "window"改名叫contentWindow。
return newNode;