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

Question

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

我想设置一个 div 包含具有特定属性值的特定 ID。然后将此 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>

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

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

Answer 1

是的，这是可能的，但您不需要通过所有这些来获得您想要的结果。

要获取属性等于特定值的元素，可以使用querySelector。获得该元素后，获得 id.

var XYZ = document.querySelector('[value="idloader"]').id;

Answer 2

HTML 不要在元素 div.

上管理属性值

正确的解决方法是

let x = document.querySelector('[data-value="idloader"]').id
console.log(x)

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

Answer 3

使用 querySelectorAll 获取所有具有 id 且 value 属性等于 "idloader".

的 div

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>

注意根据 HTML5 Specification. Use data-* Attributes，value 属性对 <div> 元素无效。

Apply id value in dom and set it to variable within js function