JavaScript 练习模拟 children() 方法

古城微笑少年丶 2022-05-29 11:09 233阅读 0赞

HTMLDocument.prototype.getChildrenAll = function(node){ 
        // childs存放子元素
        var els = {},childs = []; 
        // 判断选择器类型，id、class
        switch(node.substr(0,1))
        {
            case '#':
                els[0] = document.getElementById(node.substr(1));
                els.length = 1; // 避免后面for没有length
                break;
            case '.':
                els = document.getElementsByClassName(node.substr(1));
                break;
            default:
                els = document.getElementsByTagName(node);
        }
    
        for(let i in els){
            var node = els[i].childNodes; // 子节点集
            for(let j in node){
                // 当节点类型为元素且父节点为els[i]
                if(node[j].nodeType === 1 && node[j].parentNode === els[i]){
                    childs.push(node[j]);
                }
            }
        }
        // 若无子元素则返回 null
        return childs.length !== 0 ? childs : null;
    }
    
    var cor = document.getChildrenAll("div");
    console.log(cor);
    
    // 改变子元素样式操作
    for (let i in cor){
        cor[i].style.color = "red";
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，233人围观）

还没有评论，来说两句吧...

相关阅读

相关深入了解jQuery的children方法

jQuery是一种简化HTML文档遍历和操作、事件处理、动画和AJAX等常见任务的JavaScript库，而children()方法是其中之一。它是一个非常实用的方法，可以让我

痛定思痛。/ 2024年03月24日 21:12/ 0 赞/ 57 阅读

相关 vue-router中children使用方法

children的使用场景：比如页面左侧显示菜单，右侧显示不同菜单下的内容，类似如下element网站，那么右侧部分的内容就是当前页面的children ![waterma

ゝ一世哀愁。/ 2022年12月16日 13:02/ 0 赞/ 210 阅读

相关【jquery】find() 方法,filter()方法和children()方法

1,find() 方法找到的是所有的后代元素,即是子孙元素 2,filter()方法这个方法通常会和find()方法比较.filter()方法

た入场券/ 2022年08月13日 12:39/ 0 赞/ 301 阅读

相关多线程模拟练习

package pxyhomeworkday11; /\第二题：分析以下需求，并用代码实现有100份礼品,两人（小刚和小明）同时发送，当剩下的礼品小于10份的时候则不

柔光的暖阳◎/ 2022年05月31日 00:17/ 0 赞/ 275 阅读

相关 JavaScript 练习模拟 children() 方法

HTMLDocument.prototype.getChildrenAll = function(node){ // childs存放子元素

古城微笑少年丶/ 2022年05月29日 11:09/ 0 赞/ 234 阅读

相关 jquery 后代 children, find方法

后代是子、孙、曾孙等等。通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。 -------------------- 向下遍历 DOM 树下面是

红太狼/ 2022年05月23日 12:43/ 0 赞/ 236 阅读

相关 JavaScript回顾学习：模拟call、apply、bind方法

模拟call方法： Function.prototype.mycall = function (context) { var context = co

浅浅的花香味﹌/ 2022年05月19日 05:47/ 0 赞/ 214 阅读

相关 JavaScript练习

//1、将字符串的首字母转化为大写。 function upperCase(str) { return str.charAt(0).t

「爱情、让人受尽委屈。」/ 2022年05月14日 09:16/ 0 赞/ 217 阅读

相关 JavaScript练习

九九乘法表 function muiltable() { for (var i = 1; i <= 9; i++) { var

迷南。/ 2022年05月14日 07:30/ 0 赞/ 222 阅读

相关 JavaScript练习

//1、已知一个梯形，面积是150,高是15,上底边是3,那么下底边是多少？ var s = 150, height = 15, up = 3, down;

拼搏现实的明天。/ 2022年05月14日 05:57/ 0 赞/ 238 阅读