如何在JavaScript中通过非标签、类、ID的属性获取元素并赋值变量？

可以通过以下几种常用的JavaScript方法实现需求：

方法一：直接使用属性选择器 #

这是最简洁的方式，利用document.querySelector结合属性选择器精准定位元素：

// 存储data-language为"hu"的span元素
const huLangElement = document.querySelector('span[data-language="hu"]');
// 存储data-language为"en"的span元素
const enLangElement = document.querySelector('span[data-language="en"]');

方法二：先批量获取再筛选 #

如果需要处理更多语言项，可先获取所有带language-item类的元素，再通过dataset属性筛选目标元素：

// 获取所有语言选择项
const allLanguageItems = document.querySelectorAll('.language-item');

// 初始化变量
let huLangElement, enLangElement;

// 遍历筛选对应元素
allLanguageItems.forEach(item => {
  switch(item.dataset.language) {
    case 'hu':
      huLangElement = item;
      break;
    case 'en':
      enLangElement = item;
      break;
  }
});

补充说明 #

• querySelector会返回匹配到的第一个元素，如果页面中存在多个相同属性值的元素，可改用querySelectorAll获取所有匹配元素后再处理。
• element.dataset.language是获取元素data-language属性值的便捷方式，等价于element.getAttribute('data-language')。

内容的提问来源于stack exchange，提问作者Péter Szabó