如何用JS获取指定属性的所有HTML元素？及自定义非data-*属性求助

嘿，我来帮你一步步解决这两个问题～

最常用也最便捷的方法是用document.querySelectorAll()，它支持CSS选择器语法，能直接匹配带指定属性的元素：

• 匹配所有包含某属性的元素：不管属性值是什么，只要元素有这个属性就会被选中

  // 获取所有带有custom-attr属性的元素
  const elements = document.querySelectorAll('[custom-attr]');
  

• 匹配属性值等于特定值的元素：如果需要更精确的匹配，可以指定属性值

  // 获取所有custom-attr属性值为"example"的元素
  const elements = document.querySelectorAll('[custom-attr="example"]');
  

• 其他匹配规则：还支持部分匹配，比如属性值以某字符串开头（^=）、结尾（$=）或包含（*=），比如：

  // 获取custom-attr值以"test"开头的元素
  const elements = document.querySelectorAll('[custom-attr^="test"]');
  

如果你需要兼容非常老旧的浏览器（比如IE8及以下），可以用getElementsByTagName('*')遍历所有元素，再检查是否包含目标属性：

const allElements = document.getElementsByTagName('*');
const targetElements = [];
for (let elem of allElements) {
  if (elem.hasAttribute('custom-attr')) {
    targetElements.push(elem);
  }
}

不过这种方法效率较低，现代浏览器优先用querySelectorAll就好。

Vue和Angular的自定义指令属性（比如v-click、ng-model）其实是框架帮你封装了属性解析、事件绑定、数据响应等逻辑。原生JS里你完全可以自己实现类似的效果，不用局限于data-*，下面给你一个新手友好的示例：

步骤1：在HTML中添加自定义属性 #

先随便定义你的自定义属性，比如我们做一个类似v-click的my-click属性，点击元素时执行指定的函数：

<button my-click="handleButtonClick">点我触发自定义逻辑</button>
<div my-click="handleDivClick">我也是可点击的</div>

步骤2：编写JS逻辑处理自定义属性 #

接下来我们要获取所有带my-click属性的元素，然后给它们绑定点击事件，执行属性里指定的函数：

// 先定义我们要执行的函数
function handleButtonClick() {
  alert('按钮被点击啦！');
}

function handleDivClick() {
  alert('Div被点击啦！');
}

// 获取所有带有my-click属性的元素
const customElements = document.querySelectorAll('[my-click]');

// 遍历元素，绑定事件
customElements.forEach(elem => {
  // 获取属性值（也就是我们要执行的函数名）
  const funcName = elem.getAttribute('my-click');
  // 检查全局环境中是否存在这个函数
  if (window[funcName]) {
    // 给元素添加点击事件，触发对应函数
    elem.addEventListener('click', window[funcName]);
  } else {
    console.warn(`函数${funcName}不存在，请检查！`);
  }
});

进阶：模拟更复杂的自定义属性 #

如果想要类似Vue的v-text（设置元素文本），可以这样做：

<p my-text="Hello, 自定义属性！"></p>

const textElements = document.querySelectorAll('[my-text]');
textElements.forEach(elem => {
  const textContent = elem.getAttribute('my-text');
  elem.textContent = textContent;
});

给新手的提示 #

框架里的自定义指令之所以强大，是因为它们还处理了数据更新、组件生命周期等复杂逻辑。作为新手，你可以从简单的功能入手，比如事件绑定、内容设置，慢慢扩展。只要你在HTML里写的自定义属性，都可以通过JS获取并编写逻辑处理，完全不用依赖data-*～

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