js实现类似与jquery的find方法

假装我不帅2024-10-30 23:38
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