JavaScript查找指定DOM元素并获取其data-count自定义属性的方法

两种可行的取值方式 #

你已经正确获取到目标DOM元素的前提下，可以用以下两种方式读取data-count属性：

• 方式1：使用HTML5标准的datasetAPI，所有data-前缀的自定义属性都会挂载到元素的dataset对象上，属性名需要把短横线命名转成小驼峰命名：

var x = document.querySelector("#ember7026");
if (x) {
  // 读取属性，得到的是字符串类型
  const countVal = x.dataset.count;
  // 如果需要数值类型可以做类型转换
  const countNum = Number(countVal);
  console.log(countVal);
}

• 方式2：使用通用的getAttribute方法，直接传入完整的属性名即可：

var x = document.querySelector("#ember7026");
if (x) {
  const countVal = x.getAttribute("data-count");
  console.log(countVal);
}

常见取值失败的原因及解决方法 #

如果执行上述代码还是拿不到值，大概率是以下两个原因导致：

1. 代码执行时机早于元素渲染
   Ember框架的DOM是动态渲染生成的，如果你在元素还没挂载到页面DOM树的时候就执行了选择逻辑，得到的x会是null，自然读取不到属性。
   你可以调整浏览器扩展content script的执行时机，在manifest.json中配置"run_at": "document_idle"保证页面基础内容渲染完成后再执行代码；如果元素是后续交互才渲染的，可以用MutationObserver监听父节点的DOM变化，等目标元素出现后再执行取值逻辑。
2. 选择器不稳定
   你当前用的idember7026是Ember自动生成的动态id，页面刷新、路由切换后id值会发生变化，会导致后续再也找不到目标元素。
   建议用更稳定的属性选择器替换id选择器：

// 用固定的data-test-id属性选择，兼容性更强
var x = document.querySelector('[data-test-id="public-conversation"]');

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