如何用JavaScript定位特定值的data-ref并添加内联样式

我需要定位带有特定值的data-ref元素，为其添加内联样式style="display:none;"，但尝试的代码未生效，求解决办法。

目标HTML结构 #

<div data="{test-bubble}}" data-ref="bubbles[test-link.com/test]" class="bubbles" state="default">
</div>

我尝试的无效代码 #

var bubbleremoval = document.querySelector('[data-ref="bubbles[test-link.com/test]"]')
bubbleremoval.style.display = "none";

问题原因 #

你的data-ref值包含方括号[]，而方括号在CSS属性选择器中属于特殊字符，直接写在选择器里会被解析为选择器的一部分，无法正确匹配目标元素。

解决方案 #

1. 转义特殊字符：在JS字符串中，需要用双反斜杠\\转义方括号，让选择器正确识别属性值：

var bubbleremoval = document.querySelector('[data-ref="bubbles\\[test-link.com/test\\]"]');
// 增加判断避免元素不存在时报错
if (bubbleremoval) {
  bubbleremoval.style.display = "none";
}

2. 确保DOM加载完成：如果JS代码执行时目标元素还未渲染，querySelector会返回null，导致代码失效。可以把代码放在DOMContentLoaded事件中，保证DOM完全加载后再执行：

document.addEventListener('DOMContentLoaded', function() {
  var bubbleremoval = document.querySelector('[data-ref="bubbles\\[test-link.com/test\\]"]');
  if (bubbleremoval) {
    bubbleremoval.style.display = "none";
  }
});

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