首页 / JAVASCRIPT / 总结DOM中的节点和关系属性

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了总结DOM中的节点和关系属性，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2263字，纯文字阅读大概需要4分钟。

内容图文

<!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方法，实现获取指定元素下的元素子节点　　

       /        * getMyChildren:获取制定元素下的所有的元素节点        * @parameter： 
　　*   ele:我们要获取谁下面的，就把谁传过来
　　　　　　　tagName:获取元素的类型
        * @return:
        *   我们最后获取的元素子节点
        *   by xxxxxxxxx
        * */function getMyChildren(ele,tagName){var ary = [],nodes = ele.childNodes;for(var i = 0;i<nodes.length;i++){var cur = nodes[i];if(cur.nodeType===1){
　　　　　　　　　　　　if(tagName){
　　　　　　　　　　　　　　if(cur.nodeName.toLowerCase===tagName.toLowerCase){
　　　　　　　　　　　　　　　　ary.push(cur)
　　　　　　　　　　　　　　}
　
　　　　　　　　　　　　}else{
 　　　　　　　　　　　　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中的节点和关系属性的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的总结DOM中的节点和关系属性全部内容，希望文章能够帮你解决总结DOM中的节点和关系属性所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/300772.html

来源：【匿名】