Question

我目前正在尝试找出一种获取元素ID的方法，具体取决于它的类是否包含某些内容。我不确定是否有比现在更好的方式做到这一点，但环顾四周并不符合我的需要。我目前拥有的代码是，我在寻找一个div元素，其中包含字符串＆＃34; one＆＃34;但并不仅限于此。目前只有一个包含此字符串的元素，但警报为我提供了[Object NodeList]（我可能会过度复杂）：

$idToMove = document.querySelectorAll('div[class^="one"]');
        alert($idToMove);

Answer 1

document.querySelectorAll()返回一个节点列表（有点像数组），如果你确定只有一个节点列表，你有两个选项。

1）改为使用.querySelector：

// returns the first node that matches
var elm = document.querySelector('div[class~="one"]');
console.log(elm.id);

2）访问返回列表中的第一个元素：

// returns all nodes that match
var elms = document.querySelectorAll('div[class~="one"]');
console.log(elms[0].id);

确保空检查.querySelector的返回和.querySelectorAll的长度检查返回。

另请注意，我使用~=而非^=。您可以阅读on the MDN关于所有相等运算符之间的区别。但对于这两个：

[ATTR〜=值]   表示属性名称为attr的元素，其值是以空格分隔的单词列表，其中一个单词恰好是“value”。

[ATTR ^ =值]   表示属性名称为attr且其第一个值以“value”为前缀的元素。

Answer 2

首先从DOM获取元素，然后从该元素获取id属性：

1-如果只需要第一个元素，则使用如下所示的querySelector：

  ...
  expense.date = row[0][0];
  expense.category = row[0][2];
   expense.description = row[0][3];
   expense.amount = row[0][4];
  this.jsonConvert.push(expense);

2-如果需要所有具有此类的元素，请使用querySelectorAll像这样：

let elms = document.querySelector('div[class~="one"]')[0].id
console.log(elms)

获取类包含给定字符串的元素的ID

2 个答案: