美文网首页
Dom3 首尾节点&兄弟节点

Dom3 首尾节点&兄弟节点

作者: maomizone | 来源:发表于2017-03-15 16:51 被阅读0次

1 firstChild / lastChild

2 nextSibling / previousSibling

适用于IE6-8 高版本浏览器存在兼容问题 能找到文字节点,这是我们不希望看到的

3 firstElementChild/ lastElementChild

4 nextElementSibling / previousElementSibling

适用于高级浏览器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var ul = document.getElementById("ul");
            //IE6-8没有问题
            alert(ul.firstChild.nodeType);  // 3 说明一段空格被视为首节点 
            //高级浏览器
            alert(ul.firstElementChild.nodeType);  // 1 chrome测试
            
            //处理兼容问题
            if(ul.firstElementChild){ //如果firstElementChild存在 为真
                alert(ul.firstElementChild.nodeType);
            }else{
                alert(ul.firstChild.nodeType);
            }
            
        }
    </script>
</head>
<body>
<ul id="ul">
    <li></li>
    <li></li>
    <li></li>
   
</ul>
</body>
</html>

相关文章

  • Dom3 首尾节点&兄弟节点

    1 firstChild / lastChild 2 nextSibling / previousSibling ...

  • JS学习笔记(Dom操作)

    Dom操作: 获取父节点: 获取子节点: 获取上一个兄弟节点: 获取下一个兄弟节点: 获取首尾子节点:

  • jQuery 常用的节点操作

    js 获取元素(父节点,子节点,兄弟节点) jQuery 获取元素(父节点,子节点,兄弟节点) 元素筛选

  • 4.树

    树的基本概念 节点、根节点、父节点、子节点、兄弟节点(同层节点不一定是兄弟节点,兄弟节点必须有同一个父节点) 空树...

  • JavaScript DOM常用笔记

    获取元素(父节点,子节点,兄弟节点)

  • 兼容IE的Prve、Next、first、last

    查找上一个兄弟节点 查找下一个兄弟节点 查找第一个兄弟节点 查找最后一个兄弟节点

  • dom,子节点,兄弟节点,父节点

    dom 主要节点类型:DOCUMENT 位于DOM树最顶端的节点,代表文档本身,且出现在HMTL元的的上一层ELE...

  • 二叉树

    二叉树 概念 父节点、子节点 兄弟节点:具有相同父节点的子节点 根节点:没有父节点的节点 叶子节点(叶节点):没有...

  • 原生js的DOM相关操作

    获取节点 获取父节点: parentNode 获取兄弟节点:nextElementSibling || ne...

  • 获取节点

    1获取兄弟父节点的兄弟节点 this.praent.parentElement.parentNode.childr...

网友评论

      本文标题:Dom3 首尾节点&兄弟节点

      本文链接:https://www.haomeiwen.com/subject/pttrnttx.html