javascript - 在dom中应用id值并将其设置为js函数中的变量

我想知道如何执行以下操作。

我想设置一个包含特定 id 和特定属性值的 div。然后将此 id 应用于函数内的变量，以便当我调用该函数时它会应用 id 值。

<html>
<head></head>
<body>
<div id="1123123" value="idloader"> </div>
</body>
</html>

id 中包含的字符串应设置为函数内的变量。

<script>

function setTheId() {
div.id.valueOf(id).hasAttribute([value="idloader"])
};

var XYZ = setTheId();

</script>

总之，在带有属性 value="idloader" 的 DOM 元素 id 中设置的 ( var XYZ = 1123123 ) 应等于函数内的变量。

注意..这与 Find an element in DOM based on an attribute value 不同。因为我们并不是试图根据属性在 DOM 中查找元素，而是使用可以存储到脚本中变量的特定字符串来设置该元素。

最佳答案

使用querySelectorAll获取所有具有 id 的 div以及谁的value属性等于 "idloader" .

var elems = document.querySelectorAll('div[id][value="idloader"]');
for (var i = 0; i < elems.length; i++) {
  console.log(elems[i].id);
}

<div id="1123123" value="idloader"> </div>
<div id="1123124" value="idloader"> </div>
<div id="1123125"> </div>
<div value="idloader"> </div>

如果您只想获取与指定 CSS 选择器匹配的第一个 div，请使用 querySelector方法:

var MyID = document.querySelector('div[id][value="idloader"]').id;
console.log(MyID);

<div id="1123123" value="idloader"> </div>
<div id="1123124" value="idloader"> </div>
<div id="1123125"> </div>
<div value="idloader"> </div>

注意value属性对于 <div> 无效元素符合HTML5 Specification 。使用 data-* Attributes相反。

关于javascript - 在dom中应用id值并将其设置为js函数中的变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45221007/