澳门威利斯人_威利斯人娱乐「手机版」

来自 网络资讯 2019-05-14 21:02 的文章
当前位置: 澳门威利斯人 > 网络资讯 > 正文

JavaScript操作DOM的那些坑,Chrome浏览器中的JS差异

js在操作DOM中设有着多数跨浏览器方面包车型地铁坑,本文花了自家走近16日的日子整治,作者将基于实例整理那3个大大小小的“坑”。

因为浏览器公司个别为便宜着想,到近日截至各浏览器的HTML标准或然JS标准都还未统1。在平时的成本中,大家常动用的JS框架基本已经帮我们管理好了JS在各浏览器中的差别,但作为多少个开垦人士,依然有亟待精晓JS在浏览器中的差别。

DOM的干活方式是:先加载文书档案的静态内容、再以动态情势对它们进行刷新,动态刷新不影响文书档案的静态内容。

FF、Chrome:没有window.event对象
FF、Chrome:没有window.event对象,唯有event对象,IE里只援救window.event,而其余主流浏览器两者都援助,所以一般写成:function handle(e){e = e || event;}

PS:IE 中的全数 DOM 对象都以以 COM 对象的款式完成的,那意味着 IE 中的 DOM恐怕会和任何浏览器有必然的歧异。

获取HTML元素
IE:支持el.name 、el.getAttribute(name)
FF、Chrome:基性格能帮忙el.name其他属性仅帮忙el.getAttribute(name)

Node 接口

特性/方法 类型/返回类型 说 明
nodeName String 节点的名字;根据节点的类型而定义
nodeValue String 节点的值;根据节点的类型而定义
nodeType Number 节点的类型常量值之一
ownerDocument Document 返回某元素的根元素
firstChild Node 指向在childNodes列表中的第一个节点
lastChild Node 指向在childNodes列表中的最后一个节点
childNodes NodeList 所有子节点的列表
previousSibling Node 返回选定节点的上一个同级节点,若不存在,则返回null
nextSibling Node 返回被选节点的下一个同级节点,若不存在,则返回null
hasChildNodes() Boolean 如果当前元素节点拥有子节点,返回true,否则返回false
attributes NamedNodeMap 返回包含被选节点属性的 NamedNodeMap
appendChild(node) node 将node添加到childNodes的末尾
removeChild(node) node 从childNodes中删除node
replaceChild(newnode, oldnode) Node 将childNodes中的oldnode替换成newnode
insertBefore Node 在已有子节点之前插入新的子节点

firstChild 相当于 childNodes[0];lastChild 相当于childNodes[box.childNodes.length - 1]。

自定义属性难题
IE下,能够行使获取常规属性的格局来博取自定义属性,也能够动用 getAttribute() 获取自定义属性;Firefox下,只好利用 getAttribute() 获取自定义属性。

nodeType重回结点的品类

--元素结点返回1
--属性结点返回2
--文本结点返回3

Ajax请求
IE: new ActiveXObject()
FF、Chrome:new XMLHttpRequest()

innerHTML 和 nodeValue

对于文本节点,nodeValue 属性包含文本。

对于属性节点,nodeValue 属性包含属性值。

nodeValue 属性对于文档节点和元素节点是不可用的。 

互相分别

box.childNodes[0].nodeValue = '<strong>abc</strong>';//结果为:<strong>abc</strong>
abcbox.innerHTML = '<strong>abc</strong>';//结果为:abc

nodeName属性得到结点名称

--对于元素结点返回的是标记名称,如:<a herf><a>返回的是"a"
--对于属性结点返回的是属性名称,如:class="test" 返回的是test
--对于文本结点返回的是文本的内容 

获取HTML元素
IE:支持el.name 、el.getAttribute(name)
FF、Chrome:基本属性援救el.name别的属性仅帮衬el.getAttribute(name)

tagName

document.getElementByTagName(tagName):返回一个数组,包含对这些结点的引用

getElementsByTagName()方法将再次来到一个对象数组 HTMLCollection(NodeList),那个数组保存着全部同1成分名的节点列表。

document.getElementsByTagName('*');//获取所有元素

PS:IE 浏览器在利用通配符的时候,会把文书档案最初阶的 html 的业内表明当作第二个因穷秋点。

document.getElementsByTagName('li');//获取所有 li 元素,返回数组
document.getElementsByTagName('li')[0];//获取第一个 li 元素,HTMLLIElement
document.getElementsByTagName('li').item(0);//获取第一个 li 元素,HTMLLIElement
document.getElementsByTagName('li').length;//获取所有 li 元素的数目

innerText的使用
FF不援助innerText,它协理textContent来兑现innerText,可是textContent未有像innerText同样思考要素的display格局,所以不完全与IE包容。假若不用textContent,字符串里面不含有HTML代码也得以用innerHTML代替。
if(document.all){
document.getElementById('element').innerText = "mytext";
} else{
document.getElementById('element').textContent = "mytext";
}

节点的相对化引用:

返回文档的根节点:document.documentElement
返回当前文档中被击活的标签节点:document.activeElement
返回鼠标移出的源节点:event.fromElement
返回鼠标移入的源节点:event.toElement
返回激活事件的源节点:event.srcElement

赢得鼠标指针的职位
计算出鼠标指针的地点对您来讲可能是非常少见的,可是当你要求的时候,在IE和Firefox中的句法是例外的。这里所写出的代码将是最最大旨的,也大概是某些复杂事件管理中的某叁个片段。但他俩能够表明其中的异同点。同时,必须提议的是结果相对于Firefox,IE会有更在的两样,这种办法本身便是有BUG的。
在IE中这样写:
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.clientX;
myCursorPosition[1] = event.clientY;
在Firefox中那样写:
var myCursorPosition = [0, 0];
myCursorPosition[0] = event.pageX;
myCursorPosition[1] = event.pageY;

节点的相对引用:(设当前对节点为node)

返回父节点:node.parentNode || node.parentElement(IE)
返回子节点集合(包含文本节点及标签节点):node.childNodes
返回子标签节点集合:node.children
返回子文本节点集合:node.textNodes
返回第一个子节点:node.firstChild
返回最后一个子节点:node.lastChild
返回同属下一个节点:node.nextSibling
返回同属上一个节点:node.previousSibling 

赢得可知区域、窗口的分寸
不常,大家会供给找到浏览器的可视地方的轻重,经常大家誉为"可知区域"。
在IE中那样写:
var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;
在Firefox中这样写:
var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;

节点消息

是否包含某节点:node.contains()

是否有子节点node.hasChildNodes() 

Alpha 透明
那并不是三个JavaScript句法难点,而是源自于CSS的Alpha透明。但当有些物体必要淡入/出则需求JavaScript来展现,那是通过走访CSS的Alpha透明设置来完结的,平日在一个循环往复中造成。你需求通过来修改的JavaScript的代码如下::
在IE中这样写:
#myElement { filter: alpha(opacity=50); }
在Firefox中这样写:
#myElement { opacity: 0.5; }
在IE中那样写:
var myObject = document.getElementById("myElement");
myObject.style.filter = "alpha(opacity=80)";
在Firefox中那样写:
var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";

创造新节点

createDocumentFragment()--创建文档碎片节点
createElement(tagname)--创建标签名为tagname的元素
createTextNode(text)--创建包含文本text的文本节点

CSS "float" 值
走访八个给定CSS 值的最基本句法是:object.style.property,使用驼峰写法来替换有连接符的值,比方,访问有些ID为"header"的<div>的 background-color值,大家采用如下句法:
document.getElementById("header").style.backgroundColor= "#ccc";
但出于"float"那一个词是2个JavaScript保留字,由此大家无法用object.style.float来访问,这里,大家可以在二种浏览器中如此做:
在IE中如此写:
document.getElementById("header").style.styleFloat = "left";
在Firefox中如此写:
document.getElementById("header").style.cssFloat = "left";

收获鼠标点击事件的地方

document.onclick = mouseClick;

function mouseClick(ev){
    ev = ev || window.event;//window.event用来兼容IE
    var x = 0; var y = 0;

    if(ev.pageX){
        x = ev.pageX;
        y = ev.pageY;
    }else if(ev.clientX){
        var offsetX = 0 , offsetY = 0;
        if(document.documentElement.scrollLeft){
            offsetX = document.documentElement.scrollLeft;
            offsetY = document.documentElement.scrollTop;
        }else if(document.body){
            offsetX = document.body.scrollLeft;
            offsetY = document.body.scrollTop;
        }
        x = ev.clientX   offsetX;
        y = ev.clientY   offsetY;
    }
    alert("你点击的位置是 x="  x   " y="   y);
}

以下所讲述的性质在chrome和Safari 都很给力的帮衬了。

主题材料1:Firefox,Chrome、Safari和IE玖都是经过非规范事件的pageX和pageY属性来获得web页面包车型大巴鼠标地方的。pageX/Y获取到的是触发点相对文书档案区域左上角距离,以页面为仿照效法点,不随滑动条移动而转换

标题2:在IE 中,event 对象有 x, y 属性(事件时有爆发的任务的 x 坐标和 y 坐标)火狐中一向不。在火狐中,与event.x 等效的是 event.pageX。event.clientX 与 event.pageX 有微妙的反差(当全数页面有滚动条的时候),但是超越1/2时候是同样的。

offsetX:IE特有,chrome也支持。鼠标相比较于触发事件的因素的地方,以元素盒子模型的剧情区域的左上角为参照他事他说加以调查点,假如有boder,大概出现负值

问题三:
scrollTop为滚动条向下移动的离开,全体浏览器都协理document.documentElement。

其余参照:

要素的推算样式
JavaScript能够选拔object.style.property句法,方便地在外部访问和改造某些CSS样式,但其范围是这个句法只可以收取已设的行内样式大概直接由JavaScript设定的体制。并无法访问有些外部的样式表。为了访问成分的"推算"样式,大家得以使用下边包车型大巴代码:
在IE中如此写:
var myObject = document.getElementById("header");
var myStyle = myObject.currentStyle.backgroundColor;
在Firefox中如此写:
var myObject = document.getElementById("header");
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;

参照表

( 为永葆,-为不协助):

offsetX/offsetY:W3C- IE  Firefox- Opera  Safari  chrome 

x/y:W3C- IE  Firefox- Opera  Safari  chrome 

layerX/layerY:W3C- IE- Firefox  Opera- Safari  chrome 

pageX/pageY:W3C- IE- Firefox  Opera  Safari  chrome 

clientX/clientY:W3C  IE  Firefox  Opera  Safari  chrome 

screenX/screenY:W3C  IE  Firefox  Opera  Safari  chrome 

查看下方DEMO:
您会发觉offsetX在Firefox下是undefined,在chrome和IE则会正常展现。

图片 1

访问成分的"class"
"class"是JavaScript的3个保留字,在那七个浏览器中大家运用如下句法来访问"class"。
在IE中如此写:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");
在Firefox中这样写:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

offsetLeft和style.left区别

1.style.left返回的是字符串,比如10px。而offsetLeft返回的是数值,比如数值10

2.style.left是可读写的,offsetLeft是只读的

3.style.left的值需要事先定义(在样式表中定义无效,只能取到在html中定义的值),否则取到的值是空的

您大概感兴趣的稿子:

  • js得到钦赐控件输入光标的坐标包容IE,Chrome,火狐等种种主流浏览器
  • C 得到多浏览器上网历史记录示例代码(支持获取IE/Chrome/FireFox)
  • 在firefox和Chrome下关闭浏览器窗口无效的消除格局
  • flex chrome浏览器调节和测试出现空白的缓慢解决办法
  • javascript判别chrome浏览器的措施
  • js代码剖断浏览器类别IE、FF、Opera、Safari、chrome及版本
  • ZeroClipboard插件达成多浏览器复制功效(帮助firefox、chrome、ie陆)
  • 怎么着贯彻chrome浏览器关闭页面时弹出“分明要相差此面吗?”
  • chrome浏览器当表单自动填充时如何去除浏览器自动抬高的暗中认可样式

getComputedStyle与currentStyle

getComputedStyle()接受五个参数:要得到计量样式的要素和二个伪成分,倘诺没有必要伪成分,则可以是null。然则,在IE中,并不援救getComputedStyle,IE提供了currentStyle属性。

getComputedStyle(obj , false ) 是永葆 w3c (FF1二、chrome 14、safari):在FF新本子中只要求首先个参数,即操作对象,第二个参数写“false”也是豪门通用的写法,目标是为着协作老版本的银狐浏览器。
缺陷:在正规浏览器中平日,但在IE6/7/第88中学不协助

 window.onload=function(){
    var oBtn=document.getElementById('btn');
    var oDiv=document.getElementById('div1');

    oBtn.onclick=function(){
        //alert(oDiv.style.width); //写在样式表里无法读取,只能得到写在行内的
        //alert(getComputedStyle(oDiv).width); //适用于标准浏览器       IE6、7、8不识别
        //alert(oDiv.currentStyle.width); //适用于IE浏览器,标准浏览器不识别
        if(oDiv.currentStyle){
            alert(oDiv.currentStyle.width);
        }else{
            alert(getComputedStyle(oDiv).width);
        }

    };
};

撤回表单提交

<script type="text/javascript">
    function listenEvent(eventObj,event,eventHandler){
        if(eventObj.addEventListener){
            eventObj.addEventListener(event,eventHandler,false);
        }else if(eventObj.attachEvent){
            event = "on"   event;
            eventObj.attachEvent(event,eventHandler);
        }else{
            eventObj["on"   event] = eventHandler;
        }
    }

    function cancelEvent(event){
        if(event.preventDefault){
            event.preventDefault();//w3c
        }else{
            event.returnValue = true;//IE
        }
    }

    window.onload = function () {
        var form = document.forms["picker"];
        listenEvent(form,"submit",validateFields);
    };

    function validateFields(evt){
        evt = evt ? evt : window.event;
        ...
        if(invalid){
            cancelEvent(evt);
        }
    }
</script>

规定浏览器窗口的尺寸

对于主流浏览器来讲,比方IE玖、Firefox,Chrome和Safari,支持名称叫innerWidth 和 innerHeight的窗口对象属性,它回到窗口的视口区域,减去其他滚动条的轻重。IE不援救innerWidth 和 innerHeight

<script type="text/javascript">
    function size(){
        var w = 0, h=0;

        if(!window.innerWidth){
            w = (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth);

            h = (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight);
        }else{
            w = window.innerWidth;
            h = window.innerHeight;
        }
        return {width:w,height:h};
    }

    console.log(size());//Object { width: 1366, height: 633 }
</script>

实用的 JavaScript 方案(涵盖全体浏览器):

var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight;

对此 IE 陆、七、八的方案如下:

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

Document对象的body属性对应HTML文书档案的<body>标签。Document对象的documentElement属性则象征 HTML文书档案的根节点。

本文由澳门威利斯人发布于网络资讯,转载请注明出处:JavaScript操作DOM的那些坑,Chrome浏览器中的JS差异

关键词: 澳门威利斯人