スニぺったん

メニュー

ホーム

検索

言語

ノードを再帰的に検索してテキストに一致するノードを返す関数 (findNodeByText)

総合評価: - 作成日: 2025-10-05

コメント:
Braveブラウザで動作確認済み。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>findNodeByText</title>
    <script>
        /**
         * textに一致するノードを再帰的に検索して返す。
         */
        function findNodeByText (node, text) {
            if (node.textContent === text) {
                return node
            }

            for (let child of node.childNodes) {
                let found = findNodeByText(child, text)
                if (found) {
                    return found
                }
            }

            return null
        }

        document.addEventListener('DOMContentLoaded', () => {
            let root, node

            root = document.getElementById('root')
            
            node = findNodeByText(root, 'EEE')
            console.log(node.textContent) // EEE

            node = findNodeByText(root, 'nothing')
            console.log(node) // null
        })
    </script>
</head>
<body>
    <div id="root">
        <div>
            <span>AAA</span>
            <span>BBB</span>
        </div>
        <ul>
            <li>CCC</li>
            <li>DDD</li>
            <li>
                <ul>
                    <li>EEE</li>
                    <li>FFF</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

メニュー

検索

言語

タグ

ノードを再帰的に検索してテキストに一致するノードを返す関数 (findNodeByText)