不使用jQuery，如何筛选不含data属性或排除指定data属性值的元素？

1. 查找所有不含任何data属性的元素 #

原生JS可以通过两种方式实现：

方法一：CSS伪类选择器（现代浏览器） #

直接用:not([data-])匹配所有没有以data-开头属性的元素：

const elementsWithoutDataAttrs = document.querySelectorAll(':not([data-])');

这个选择器会筛选出所有不包含任何data-*属性的元素，现代浏览器（Chrome、Firefox、Edge等）都支持。

方法二：遍历检查（兼容旧浏览器） #

如果需要兼容更老的浏览器，可以手动遍历元素并检查属性：

const allElements = document.querySelectorAll('*');
const elementsWithoutDataAttrs = [];

allElements.forEach(el => {
  const hasDataAttr = Array.from(el.attributes).some(attr => attr.name.startsWith('data-'));
  if (!hasDataAttr) {
    elementsWithoutDataAttrs.push(el);
  }
});

这段代码会遍历页面所有元素，检查每个元素的属性中是否有以data-开头的，没有的话就加入结果数组。

2. 排除data-last="yes"的.form-step元素 #

你之前的选择器语法有误，正确的写法是把:not伪类紧跟在目标选择器后面，调整后即可生效：

方法一：修正后的CSS选择器 #

const validFormSteps = document.querySelectorAll('.form-step:not([data-last="yes"])');

// 遍历处理符合条件的元素
validFormSteps.forEach(step => {
  console.log(step.textContent); // 输出两个" Stay "
});

错误原因：你之前写的.form-step not:[data-last="yes"]不符合CSS选择器语法，正确结构是目标选择器:not(排除条件)，:not是伪类，必须放在括号包裹的排除条件前。

方法二：遍历中手动过滤 #

如果需要更灵活的判断逻辑，也可以先获取所有.form-step元素，再在遍历中排除目标元素：

const allFormSteps = document.querySelectorAll('.form-step');

allFormSteps.forEach(step => {
  // 使用dataset属性直接获取data-last的值，更简洁
  if (step.dataset.last !== 'yes') {
    // 处理保留的元素
    console.log(step.textContent);
  }
});

element.dataset.last是原生JS提供的便捷方式，等价于element.getAttribute('data-last')，写法更简洁。

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