如何使用JavaScript获取HTML元素的data-ad-status属性值并用于条件判断

嘿，我来帮你搞定这个需求！你要获取那个带adsbygoogle类的ins元素的data-ad-status属性值并做条件判断，其实步骤很简单，我给你拆解清楚：

第一步：定位目标元素 #

首先你需要精准获取到这个ins元素，用document.querySelector()方法就能选中页面中第一个匹配的元素：

const adElement = document.querySelector('.adsbygoogle');

如果你页面中有多个同class的ins元素，那可以用document.querySelectorAll()，然后遍历每个元素处理，不过先按你给出的单个元素场景来。

第二步：获取data-ad-status属性值 #

有两种常用方法可以拿到这个属性值：

• 方法一：用getAttribute()方法，直接指定属性名：

  const adStatus = adElement.getAttribute('data-ad-status');
  

• 方法二：用DOM元素的dataset属性，这是专门处理data-*系列属性的语法，属性名会自动转成驼峰式（比如data-ad-status对应dataset.adStatus）：

  const adStatus = adElement.dataset.adStatus;
  

两种方法都能用，dataset更简洁直观，推荐优先用它。

第三步：编写条件判断逻辑 #

这里要注意！你原来写的if (data-ad-status="unfilled")是错误的——=是赋值符号，判断相等要用==（宽松相等）或者===（严格相等，更推荐，避免类型转换问题）。

把前面的步骤整合起来，完整的代码应该是这样：

// 先获取元素
const adElement = document.querySelector('.adsbygoogle');

// 一定要先检查元素是否存在，避免页面找不到元素时报错
if (adElement) {
  // 获取属性值
  const adStatus = adElement.dataset.adStatus;

  // 条件判断
  if (adStatus === 'unfilled') {
    // 这里放你要执行的函数
    console.log('广告位未填充，执行相关操作');
    // 比如：showAlternativeContent();
  } else {
    // 广告位已填充或状态不同时的处理
    console.log('广告位状态正常，执行其他操作');
  }
} else {
  console.log('未找到目标广告元素');
}

这样就能完美实现你的需求啦，先确保元素存在，再拿属性值，最后做判断，逻辑清晰还不容易出错~

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