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

PHP中文网

发布时间：2017-06-21 13:20:59

1326人浏览过

来源于php中文网

原创




    
    Title


    
        培训课程
        
            html+css
            javascript
            正式课
            移动端课程
            node.js正式课

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

childNodes：获取所有的子节点

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

parentNode:获取父亲节点

previousSibling:获取上一个哥哥节点

nextSibling:获取下一个弟弟节点

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

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

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

　　　　　　　　　　　　　　nodeType nodeName nodeValue

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

ChatGPT Website Builder

ChatGPT网站生成器，AI对话快速生成网站

下载

　　文本节点（文字）　　　　　　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){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;
        }

如何在 Flask 模板中动态选择图像路径并实现交互式图像集切换

javascript如何实现权限控制与用户认证【教程】

什么是事件循环_JavaScript如何实现异步【教程】

javascript JSON如何解析_怎样处理API返回数据【教程】

javascript如何实现历史记录管理_pushState如何工作【教程】

相关标签:

javascript

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：一个小demo之“拖拽”效果的实现下一篇：js中正则表达式是怎么使用的？

作者最新文章

小米笔记本重装系统的方法

2024-07-12 05:54