js实现类似与jquery的find方法

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>
        <label>
            <input class='aui-radio' type='radio' name='authorizedCompanyList' value='1'>
            <span>测试1</span>
        </label>
    </div>
    <div>
        <label>
            <input class='aui-radio' type='radio' name='authorizedCompanyList' value='2'>
            <span>测试2</span>
        </label>
    </div>
    <button onclick="getSelectValue()">获取选中的值</button>
    <script>

        function getSelectValue() {
            const radios = document.getElementsByName('authorizedCompanyList');
            for (let i = 0; i < radios.length; i++) {
                if (radios[i].checked) {
                    // 输出选中的值  
                    console.log(radios[i].value);
                    //支持span .class #id等方式查找
                    var spans = findElements(radios[i].parentNode,"span")
                    console.log(spans[0].innerText);
                    
                }
            }
        }

        function findElements(element, selector) {
            var elements = [];
            var children = element.childNodes;

            for (var i = 0; i < children.length; i++) {
                var child = children[i];

                if (child.nodeType === 1 && child.matches(selector)) {
                    elements.push(child);
                }

                elements = elements.concat(findElements(child, selector));
            }

            return elements;
        }
    </script>
</body>

</html>

参考

https://blog.51cto.com/u_16213353/9429580

相关推荐
LOVE️YOU3 小时前
Python 中 Tuple 为什么有时可 Hash,有时不可 Hash?
开发语言·python·哈希算法
李永奉3 小时前
C语言-指针函数与函数指针及回调函数的使用
c语言·开发语言
小oo呆3 小时前
【学习心得】迭代器和可迭代对象
开发语言·python
AC赳赳老秦3 小时前
采集行为合规自检:OpenClaw 自动校验 robots 协议与采集频率,规避违规采集风险
java·开发语言·c++·python·php·deepseek·openclaw
钱栈up3 小时前
mvn compile 卡死在 javac 阶段:一次类型不匹配的排查与修复
java·开发语言
迅猛龙办公室3 小时前
Python输出当前计算机的系统日期和时间
开发语言·前端·python
杨丰玮4183 小时前
C语言基础知识(一)————各类符号的含义与输入输出库(stdio)
c语言·开发语言
程序猿编码4 小时前
工业视觉多任务方案:可编程梯度信息视觉框架,训练评估 + C++ 部署完整实战
开发语言·c++·视觉·推理引擎
言乐65 小时前
Python实现语音审核模型
开发语言·python·django·virtualenv·pygame
朝朝辞暮i5 小时前
C++ 第 21 课:struct —— 把一组相关数据打包在一起
开发语言·c++·算法