首页 > web前端 > js教程 > 正文

总结DOM中的节点和关系属性

PHP中文网
发布: 2017-06-21 13:20:59
原创
1252人浏览过
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1">
        <h1>培训课程</h1>
        <ul>
            <li>html+css</li>
            <li>javascript</li>
            <li>正式课</li>
            <li>移动端课程</li>
            <li>node.js正式课</li>
        </ul>
    </div>
    <script>//获取关系的属性var oDiv = document.getElementById("div1");
        console.log(oDiv.childNodes);//获取所有的子节点console.log(oDiv.children);//获取所有的元素子节点</script>
</body>
</html>
登录后复制

节点:node 一个页面中的标签、文字、注释。。。都是节点

childNodes:获取所有的子节点

children:获取所有的元素子节点

parentNode:获取父亲节点

previousSibling:获取上一个哥哥节点

nextSibling:获取下一个弟弟节点

firstChild:获取所有的子节点中的第一个

lastChild:获取所有子节点中的最后一个

在js中需要我们掌握的节点类型:

              nodeType             nodeName                     nodeValue

  元素节点(元素标签)                  1                      大写的标签名                    null

  文本节点(文字)      3       #text         文字内容

  注释节点(注释)      8      #comment       注释内容

  document         9      #document       null

  注意:在标准浏览器下,我们把space空格和Enter回车都当作我们的文本节点

  方法:模拟我们的children方法,实现获取指定元素下的元素子节点  

<em><em><span style="color: #008000">       /        * getMyChildren:获取制定元素下的所有的元素节点<em><em><em>        * @parameter:</em></em></em> <br/>  *   ele:我们要获取谁下面的,就把谁传过来<br/>       tagName:获取元素的类型
        * @return:
        *   我们最后获取的元素子节点
        *   by xxxxxxxxx
        * </span><span style="color: #008000">*/</span><span style="color: #0000ff">function</span><span style="color: #000000"> getMyChildren(ele,tagName){</span><span style="color: #0000ff">var</span> ary = [],nodes =<span style="color: #000000"> ele.childNodes;</span><span style="color: #0000ff">for</span>(<span style="color: #0000ff">var</span> i = 0;i<nodes.length;i++<span style="color: #000000">){</span><span style="color: #0000ff">var</span> cur =<span style="color: #000000"> nodes[i];</span><span style="color: #0000ff">if</span>(cur.nodeType===1<span style="color: #000000">){<br/>            if(tagName){<br/>              if(cur.nodeName.toLowerCase===tagName.toLowerCase){<br/>                ary.push(cur)<br/>              }<br/> <br/>            }else{<br/></span></em></em>
登录后复制
             ary.push(cur);
登录后复制
            }
                   
                }
            }return ary;

        }
登录后复制

获取一个元素的上一个哥哥元素子节点 

 pre =(pre && pre.nodeType!==1=
登录后复制

获取一个元素的所有的哥哥元素节点

 function prevAll(ele){var pre = ele.previousSibling,ary = [];while(pre){if(pre,nodeType===1){
                    ary.unshift(pre);
                }
                pre = pre.previousSibling;
            }return ary;
        }
登录后复制

 

以上就是总结DOM中的节点和关系属性的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号