如何动态获取HTML标签及其子标签文本并生成组合输出至控制台

以下是实现需求的完整代码，可适配任意数量的<select>标签，点击按钮后将组合文本输出至浏览器控制台：

<p><code>C:\<select>
        <option value="test1\">test1\</option>
        <option value="test2\">test2\</option>
    </select>test3\<select>
        <option value="test4\">test4\</option>
        <option value="test5\">test5\</option>
    </select>test6\<select>
        <option value="test7\">test7\</option>
        <option value="test8\">test8\</option>
        <option value="test9\">test9\</option>
    </select>test10.txt</code></p>

<button id="generateTextBtn">生成并输出文本</button>

<script>
document.getElementById('generateTextBtn').addEventListener('click', function() {
    const codeElement = document.querySelector('p code');
    let combinedText = '';

    // 遍历code元素下的所有子节点，逐个处理
    codeElement.childNodes.forEach(node => {
        if (node.nodeType === Node.TEXT_NODE) {
            // 处理文本节点：去除多余空白后追加
            combinedText += node.textContent.trim().replace(/\s+/g, '');
        } else if (node.tagName === 'SELECT') {
            // 处理select元素：追加选中选项的文本
            const selectedOpt = node.options[node.selectedIndex];
            if (selectedOpt) {
                combinedText += selectedOpt.textContent.trim().replace(/\s+/g, '');
            }
        }
    });

    console.log(combinedText);
});
</script>

核心逻辑说明 #

• 节点遍历：通过childNodes遍历目标容器（<code>标签）内的所有节点，自动识别文本节点和<select>元素，无需硬编码数量。
• 文本清洗：使用trim()和replace(/\s+/g, '')去除原HTML中的换行、缩进等多余空白，保证输出文本格式整洁。
• 动态取值：对每个<select>，通过selectedIndex获取当前选中的选项，提取其文本内容追加到结果中。

测试时，切换任意下拉选项后点击按钮，控制台就会输出对应的组合文本，完全适配1个、2个或更多<select>的场景。

内容的提问来源于stack exchange，提问作者Antoine Hazebrouck