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

相关推荐
第九序言T4 小时前
Python 数据处理进阶(十八)批量处理同结构文件:一个文件夹一次跑完
开发语言·python·自动化·pandas·数据处理
龙亘川5 小时前
构建城市公共安全数字底座:亘川智城智慧安防系统全维度解读
java·大数据·开发语言·人工智能·信息可视化
程序喵大人5 小时前
【C++入门】内存模型与资源管理 - 09 shared_ptr 和 weak_ptr 解决共享,也带来代价
开发语言·c++·资源管理·智能指针·内存模型
Raas1006 小时前
AI网关部署方案?从部署到上线全流程
java·开发语言·人工智能·gateway·ai网关·企业级ai网关·企业级ai产品
程序员大阳6 小时前
副队长JavaScript教程(50)-DOM:网页开发的起点
javascript·dom·es·节点·概念·document·关系
专注仿真6 小时前
线性回归和逻辑回归算法详解
开发语言·人工智能·python·大模型训练·控制算法
jimy17 小时前
C++ 中的 `T&&`:右值引用与转发引用
开发语言·c++
呆呆虫127 小时前
用 orjson 加速 SerpBase 响应解析:基准对比与注意事项
开发语言·php
心疼你的一切8 小时前
Python自动发邮件实战定时发报表
大数据·开发语言·python
Wang's Blog9 小时前
Java 项目实战:交友项目 - 用户体系集成总结
java·开发语言·交友