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

最新推荐文章于 2019-09-25 22:17:22 发布

abxn2002

最新推荐文章于 2019-09-25 22:17:22 发布

阅读量1.7k

点赞数

分类专栏： javascript学习笔记

javascript学习笔记专栏收录该内容

75 篇文章 0 订阅

订阅专栏

转载地址: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.οnlοad=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.οnclick=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>

复制代码

abxn2002

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
兼容的firstChild,lastChild,nextSibling,previousSibling写法

转载地址:http://www.w3cfuns.com/blog-5458045-5402770.html在IE下是支持firstChild,lastChild,nextSibling,previousSibling但是在FF下，由于它会把标签之间的空格当成文本节点，所以为了准确地找到相应的元素，会用firstElementChild,lastElementChild,next
复制链接

扫一扫