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

最新推荐文章于 2020-06-17 11:48:07 发布

diao1981

最新推荐文章于 2020-06-17 11:48:07 发布

阅读量174

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/Xuman0927/p/5480885.html

版权

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

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

firstElementChild,

lastElementChild,

nextElementSibling,

previousElementSibling

兼容的写法是这样的

var oFirst = oParent.firstElementChild||oParent.firstChild
也可以这么写
var  oFirst = oParent.children[0];

var oLast = oParent.lastElementChild||oParent.lastChild
也可以这么写
var  oLast = oParent.children[oParent.children.length-1];

var oNext = obj.nextElementSibling||obj.nextSibling

var oPre = obj.previousElementSibling||obj.previousSibling

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload = function() {
    var oUl = document.getElementById('ul1');
    
        /*
        元素.lastChild || 元素.lastElementChild 第一个子节点
        元素.lastChild || 元素.lastElementChild 最后一个子节点
        元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点
        元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点
        
    */
    var oFirst = oUl.firstElementChild || oUl.firstChild;
    //var  oFirst = oUl.children[0];
    oFirst.style.background = 'red';
    

    var oLast = oUl.lastElementChild || oUl.lastChild;
    //var  oLast = oUl.children[oUl.children.length-1];
    oLast.style.background = 'yellow';
    
    var oNext = oFirst.nextElementSibling || oFirst.nextSibling;
    oNext.style.background = 'blue';
    
    var oPrev = oLast.previousElementSibling || oLast.previousSibling;
    oPrev.style.background = 'orange';
    
    
}
</script>
</head>

<body>
<ul id="ul1">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul></body>
</html>

转载于:https://www.cnblogs.com/Xuman0927/p/5480885.html

diao1981

关注

0
点赞
踩
0

收藏

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

在IE下是支持firstChild,lastChild,nextSibling,previousSibling但是在FF下，由于它会把标签之间的空格当成文本节点，所以为了准确地找到相应的元素，会用firstElementChild,lastElementChild,nextElementSibling,previousElementSibling兼容的写法是这样的...
复制链接

扫一扫