javascript兼容性解决方案,_javascript技巧_脚本之家

By admin in 澳门新葡亰娱乐官网 on 2019年11月26日

child

Ba la la la ~ 读者朋友,你们好啊,又到了冷锋时间,话不多说,发车!

DOM模型中的节点:元素节点、文本节点、属性节点
例:私のdotnet小屋
“私のdotnet小屋”是文本节点 href=”
DOM节点的属性

当为子节点添加默认属性时: childNode.className = “childClass”; 或:
childNode.className = new String; parentNode.innerHTML IE,FF都能获得 [
child ] 当为子节点添加私有属性时: childNode.type = “childType”;
parentNode.innerHTML 当且仅当 IE能获得 [ child ] childNode.type = new String;
//Object对象 parentNode.innerHTML IE,FF都不能获得 [ child ]
childNode.setAttribute; parentNode.innerHTML IE,FF都能获得 [ child ]
childNode.setAttribute(“type”, new String; parentNode.innerHTML 当且仅当
FF能获得 [ child ]
当对元素动态添加私有属性后获取innerHTML,如果采用.属性
方式赋值,无论哪种数据类型FireFox都不能获得,如果当赋值的类型是个对象的话IE不能通过innerHTML获得。
如果使用setAttribute方法赋值时,无论哪种数据类型FireFox都能获取,如果当赋值的类型是个对象的话IE不能获取
。 总结:在IE 环境下 赋值类型为对象时 innerHTML
获取不到其改变,在FireFox环境下 .属性 方式获取不到其改变。


属性

十三、frame和iframe问题

类型

以下面的frame为例:

(1)访问frame对象
IE:使用window.frameId或者window.frameName来访问这个frame对象;
Firefox:使用window.frameName来访问这个frame对象;
解决方法:统一使用 window.document.getElementById(”frameId”)
来访问这个frame对象;
(2)切换frame内容
在IE和Firefox中都可以使用
window.document.getElementById(”frameId”).src = “webjx.com.html”或
window.frameName.location = “webjx.com.html”来切换frame的内容;
如果需要将frame中的参数传回父窗口,可以在frame中使用parent关键字来访问父窗口。

说明

十四、body载入问题

问题说明:Firefox的body对象在body标签没有被浏览器完全读入之前就存在;而IE的body对象则必须在body标签被浏览器完全读入之后才存在。
[注] 这个问题尚未实际验证,待验证后再来修改。
[注]
经验证,IE6、Opera9以及FireFox2中不存在上述问题,单纯的JS脚本可以访问在脚本之前已经载入的所有对象和元素,即使这个元素还没有载入完成。

nodeName

十五、事件委托方法

问题说明:IE下,使用 document.body.onload = inject; 其中function
inject()在这之前已被实现;在Firefox下,使用 document.body.onload =
inject();
解决方法:统一使用 document.body.onload=new Function(‘inject()’); 或者
document.body.onload = function(){/* 这里是代码 */}
[注意] Function和function的区别

String

十六、访问的父元素的区别

问题说明:在IE下,使用 obj.parentElement 或 obj.parentNode
访问obj的父结点;在firefox下,使用 obj.parentNode 访问obj的父结点。
解决方法:因为firefox与IE都支持DOM,因此统一使用obj.parentNode
来访问obj的父结点。

节点名称,根据节点的类型而定义

十七、innerText的问题.

问题说明:innerText在IE中能正常工作,但是innerText在FireFox中却不行。
解决方法:在非IE浏览器中使用textContent代替innerText。
示例:

if(navigator.appName.indexOf(“Explorer”) >-1){
document.getElementById(‘element’).innerText = “my text”;
} else{
document.getElementById(‘element’).textContent = “;my text”;
}
[注] innerHTML
同时被ie、firefox等浏览器支持,其他的,如outerHTML等只被ie支持,最好不用。

nodeValue

十八、Table操作问题

问题说明:ie、firefox以及其它浏览器对于 table
标签的操作都各不相同,在ie中不允许对table和tr的innerHTML赋值,使用js增加一个tr时,使用appendChild方法也不管用。document.appendChild在往表里插入行时FIREFOX支持,IE不支持
解决办法:把行插入到TBODY中,不要直接插入到表
解决方法:

//向table追加一个空行:

var row = otable.insertRow(-1);
var cell = document.createElement(“td”);
cell.innerHTML = “”;
cell.className = “XXXX”;
row.appendChild(cell);
[注] 建议使用JS框架集来操作table,如JQuery。

String

十九、对象宽高赋值问题

问题说明:FireFox中类似 obj.style.height = imgObj.height 的语句无效。
解决方法:统一使用 obj.style.height = imgObj.height + ‘px’;

节点的值,根据节点的类型而定义

二十、setAttribute(‘style’,’color:red;’)

FIREFOX支持(除了IE,现在所有浏览器都支持),IE不支持
解决办法:不用setAttribute(‘style’,’color:red’)
而用object.style.cssText = ‘color:red;'(这写法也有例外)
最好的办法是上面种方法都用上,万无一失

nodeType

二一、类名设置

setAttribute(‘class’,’styleClass’)
FIREFOX支持,IE不支持(指定属性名为class,IE不会设置元素的class属性,相反只使用setAttribute时IE自动识CLASSNAME属性)
解决办法:
setAttribute(‘class’,’styleClass’)

setAttribute(‘className’,’styleClass’)

或者直接 object.className=’styleClass’;

IE和FF都支持object.className。

Number

二二、用setAttribute设置事件

var obj = document.getElementById(‘objId’);
obj.setAttribute(‘onclick’,’funcitonname();’);
FIREFOX支持,IE不支持
解决办法:
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下:
var obj = document.getElementById(‘objId’);
obj.onclick=function(){fucntionname();};
这种方法所有浏览器都支持

节点类型,1为元素节点,2为属性节点,3为文本节点

二三、建立单选钮

IE以外的浏览器
var rdo = document.createElement(‘input’);
rdo.setAttribute(‘type’,’radio’);
rdo.setAttribute(‘name’,’radiobtn’);
rdo.setAttribute(‘value’,’checked’);

IE:
var rdo =document.createElement(”<input name=”radiobtn”
type=”radio” value=”checked” />”);
解决办法:
这一点区别和前面的都不一样。这次完全不同,所以找不到共同的办法来解决,那么只有IF-ELSE了
万幸的是,IE可以识别出document的uniqueID属性,别的浏览器都不可以识别出这一属性。问题解决

firstChild

二四、children与childNodes

IE提供的children、childNodes和firefox下的childNodes的行为是有区别的,firefox下childNodes会把换行和空白字符都算作父节点的子节点,而IE的childNodes和children不会。比如:
<div id=”dd”>
<div>yizhu2000</div>
</div>
id为dd的div在IE下用childNodes查看,其子节点数为1,而ff下为三,我们可以从firefox的dom查看器里面看到他的childNodes为[“\n
“, div, “\n”]。

要在firefox下模拟children的属性我们可以这样做:
if (typeof(HTMLElement) != “undefined” && !window.opera) {
HTMLElement.prototype.defineGetter(“children”, function() {
for (var a = [], j = 0, n, i = 0; i < this.childNodes.length;
i++) {
n = this.childNodes[i];
if (n.nodeType == 1) {
a[j++] = n;
if (n.name) {
if (!a[n.name])
a[n.name] = [];
a[n.name][a[n.name].length] = n;
}
if (n.id)
a[n.id] = n;
}
}
return a;
});
}


以上为个人意见,如有雷同,纯属巧合,欢迎大家多提意见!Bey 了 个 Bey ~

Node

指向childNodes列表的第一个节点

lastChild

Node

指向childNodes列表的最后一个节点

childNodes

NodeList

所有子节点列表,childNodes[i]可以访问第i+1个节点

parentNode

Node

指向节点的父节点,如果已是根节点,则返回null

previousSibling

Node

指向前一个兄弟节点,如果已是第一个节点,则返回null

nextSibling

Node

指向后一个兄弟节点,如果已是最后一个节点,返回null

Attributes

NameNodeMap

包含一个元素特性的Attr对象,仅用于元素节点

className

String

节点的CSS类

innerHTML

String

某个标记之间的所有内容,包括代码本身

DOM节点的方法
document.getElementsByTagName方法:返回一个包含某个相同标签名的元素节点列表
document.getElementById方法:返回Id为指定值的元素节点 兼容IE和FireFox
复制代码 代码如下: function prevSib{ var
oTempFirstNode=oNode.parentNode.firstChild;
//判断是否是第一个节点,如果是则返回null if(oNode==oTempFirstNode)
return null; var oTempNode=oNode.previousSibling;
//逐一搜索前面的兄弟节点,直到发现元素节点为止
while(oTempNode.nodeType!=1 && oTempNode.previousSibling!=null)
oTempNode=oTempNode.previousSibling;
//三目运算符,如果是元素节点则返回节点本身,否则返回null return
(oTempNode.nodeType==1)?:oTempNode:null; } 兼容IE和FireFox 复制代码 代码如下: function nextSib{ var
oTempLastNode=oNode.parentNode.lastChild;
//判断是否是最后一个节点,如果是则返回null if return null; var
oTempNode=oNode.nextSibling;
//逐一搜索后面的兄弟节点,直到发现元素节点为止
while(oTempNode.nodeType!=1 && oTempNode.nextSibling!=null)
oTempNode=oTempNode.nextSibling;
//三目运算符,如果是元素节点则返回节点本身,否则返回null
return(oTempNode.nodeType==1)?oTempNode:null; }
判断一个节点是否有子节点:
NodeObject.hasChildNodes()方法:当childNodes包含一个或多个节点时,返回true
设置节点属性: eleNode.getAttribute方法:返回eleNode元素的attrNode属性
eleNode.setAttribute方法:设置eleNode元素的attrNode属性的值为sNewValue
创建节点: document.createElement方法:创建一个元素节点eleNode
document.createTextNode方法:创建一个文本节点textNode
document.createDocumentFragment添加节点:
eleNode.appendChild方法:将textNode节点添加到childNodes的末尾 删除节点:
oNode.parentNode.removeChild方法:从childNodes中删除oNode节点 替换节点:
oNode.parentNode.replaceChild方法:将childNodes中的oOldNode节点替换成oNewNode节点
在特定节点前插入节点:
oTargetNode.parentNode.insertBefore方法:在childNodes中的oTargetNode节点之前插入oNewNode节点
oTargetNode.parentNode.insertAfter方法:在childNodes中的oTargetNode节点之后插入oNewNode节点
复制代码 代码如下: function insertAfter{
var oParentNode=oTargetNode.parentNode;
if(oParentNode.lastChild==oTargetNode) oParentNode.appendChild; else
oParentNode.insertBefore(oNewNode,oTargetNode.nextSibling); }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2020 澳门新葡亰官网app 版权所有