兼容的firstChild,lastChild,nextSibling,previousSibling写法

来源：互联网发布：高级ios程序员招聘编辑：程序博客网时间：2024/05/22 03:02

转载地址:http://www.w3cfuns.com/blog-5458045-5402770.html

在IE下是支持firstChild,lastChild,nextSibling,previousSibling

但是在FF下，由于它会把标签之间的空格当成文本节点，所以为了准确地找到相应的元素，会用firstElementChild,lastElementChild,nextElementSibling,previousElementSibling

兼容的写法是这样的

firstChild

var oFirst = oParent.firstElementChild||oParent.firstChild

复制代码

也可以这么写

var oFirst = oParent.children[0];

复制代码

lastChild

var oLast = oParent.lastElementChild||oParent.lastChild

复制代码

也可以这么写

var oLast = oParent.children[oParent.children.length-1];

复制代码

nextSibling

var oNext = obj.nextElementSibling||obj.nextSibling

复制代码

previousSibling

var oPre = obj.previousElementSibling||obj.previousSibling

复制代码

测试如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script>        window.onload=function(){            a();        }        function a(){            var sentBtn=document.getElementById("sent");            var input=sentBtn.previousElementSibling||sentBtn.previousSibling;            var txtCon=sentBtn.nextElementSibling||sentBtn.nextSibling;            /*var txtCon=document.getElementsByClassName("txt")[0];*/            sentBtn.onclick=function(){                txtCon.innerHTML=input.value;                input.value='';            }        }    </script></head><body>   <input type="text"><input type="button" id="sent" value="发送">   <div class="txt"></div></body></html>

PS:如不进行兼容性处理，在webkit及gecko浏览器无法正确获取到txtCon

特别说明：
　　innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

复制代码

0 0