通配符元素名稱與JavaScript 中的“querySelector()”和“querySelectorAll()”匹配

問題：

查詢名稱中嵌入特定字串的元素的XML 文件可能具有挑戰性。雖然 CSS 支援屬性查詢的通配符，但元素名稱似乎缺少相同的功能。

解決方案：

不幸的是，沒有直接的方法來匹配通配符元素使用“querySelector()”或“querySelectorAll()”命名。然而，還有替代方法：

• 屬性匹配： CSS為屬性值提供通配符。若要符合名稱中包含特定字串的元素，請使用下列語法尋找其任何屬性中是否存在該字串：

  • [attribute^='value'] 符合屬性以屬性開頭的元素with 'value'。
  • [attribute$='value'] 符合屬性以 'value' 結尾的元素。
  • [attribute*='value'] 匹配屬性其屬性包含 'value'。
• Name 屬性： 如果您有興趣匹配 'name' 屬性，只需將 'id' 替換為 'name'在上面的表達式中。

範例：

尋找包含字串的所有元素'name' 屬性中的“name”，您可以使用：

const elementsWithName = document.querySelectorAll('[name*="name"]');

注意：

如果您正在尋找元素標籤名稱本身的通配符匹配，目前沒有使用“querySelector()”或“querySelectorAll()”。