如何实现点击段落特定单词添加<dds>标签，适配document.querySelector('dds')

数据老陈

2026-7-17

实现点击单词切换标签的方案

要实现点击段落中的单词时为其添加<dds>标签，且每次仅保留一个<dds>标签（点击新单词时自动移除旧标签），可以按照以下步骤实现：

实现思路

将段落中的每个单词单独包裹为可交互元素，便于点击定位；
监听单词点击事件，每次点击时先清理已存在的<dds>标签，再为当前点击的单词添加标签；
确保始终只有一个<dds>标签存在，适配document.querySelector('dds')的获取逻辑。

代码示例

HTML

<p id="example-paragraph">This domain is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission.</p>

JavaScript

// 目标段落元素
const paragraph = document.getElementById('example-paragraph');

// 拆分段落文本为单词，每个单词用span包裹
paragraph.innerHTML = paragraph.textContent.split(/\s+/).map(word => `<span class="clickable-word">${word}</span>`).join(' ');

// 为每个可点击单词绑定事件
document.querySelectorAll('.clickable-word').forEach(wordElement => {
  wordElement.addEventListener('click', () => {
    // 移除已存在的dds标签
    const existingDds = document.querySelector('dds');
    if (existingDds) {
      // 将包含dds的单词还原为普通文本
      const parentWord = existingDds.closest('.clickable-word');
      parentWord.textContent = existingDds.textContent;
    }

    // 为当前点击的单词添加dds标签
    wordElement.innerHTML = `<dds>${wordElement.textContent}</dds>`;

    // 适配需求中的查询逻辑
    var card = document.querySelector('dds');
    console.log('当前选中的单词元素:', card);
  });
});