JavaScript 如何在一段字前添加黑点

在网页设计与开发中，常常会遇到需要对文本进行特定格式处理的需求，比如在一段文字前添加黑点。JavaScript作为一种强大的脚本语言，为我们实现这一功能提供了有效的方法。

我们需要获取要处理的文本元素。这可以通过多种方式实现，最常见的是使用 document.getElementById() 方法。假设我们有一个 id 为 textElement 的元素，代码如下：

const textElement = document.getElementById('textElement');

获取到元素后，接下来就要在其文本内容前添加黑点。我们可以利用JavaScript的字符串操作方法来达成目的。先获取元素的文本内容，然后在其前面拼接上黑点。代码示例如下：

let text = textElement.textContent;
text = '●' + text;
textElement.textContent = text;

在上述代码中，textElement.textContent 用于获取元素的文本内容，接着将黑点字符 ● 与原文本拼接，最后再将拼接后的新文本重新赋值给 textElement.textContent，从而实现了在文本前添加黑点的效果。

不过，如果页面中有多个需要添加黑点的元素，逐个处理会比较繁琐。此时可以利用 querySelectorAll() 方法来批量获取元素。例如：

const textElements = document.querySelectorAll('.textClass');
textElements.forEach((element) => {
    let text = element.textContent;
    text = '●' + text;
    element.textContent = text;
});

在这段代码里，document.querySelectorAll('.textClass') 会获取所有具有 textClass 类名的元素。然后通过 forEach 方法遍历这些元素，对每个元素执行添加黑点的操作。

另外，还可以使用 innerHTML 属性来实现类似效果，但需要注意其安全性。如果要处理的文本包含用户输入内容，使用 innerHTML 可能会导致跨站脚本攻击（XSS）风险。代码示例如下：

let text = textElement.innerHTML;
text = '●' + text;
textElement.innerHTML = text;

通过上述方法，利用JavaScript就能轻松地在一段文字前添加黑点，满足不同的页面设计与交互需求，提升用户体验和页面的美观度。