와일드카드 요소 이름이 JavaScript의 "querySelector()" 및 "querySelectorAll()"과 일치합니다.

문제:

이름에 특정 문자열이 포함된 요소가 있는 XML 문서를 쿼리하는 것은 어려울 수 있습니다. CSS는 속성 쿼리에 와일드카드를 지원하지만 요소 이름에는 동일한 기능이 누락된 것 같습니다.

해결책:

안타깝게도 와일드카드 요소를 일치시키는 간단한 방법은 없습니다. "querySelector()" 또는 "querySelectorAll()"을 사용하여 이름을 지정합니다. 그러나 다음과 같은 대체 접근 방식도 있습니다.

• 속성 일치: CSS는 속성 값에 와일드카드를 제공합니다. 이름에 특정 문자열이 포함된 요소를 일치시키려면 다음 구문을 사용하여 해당 속성 내에서 해당 문자열이 있는지 확인하세요.

  • [attribute^='value']는 속성이 시작하는 요소와 일치합니다. with 'value'.
  • [attribute$='value']는 속성이 'value'로 끝나는 요소와 일치합니다.
  • [attribute*='value']는 속성에 다음이 포함된 요소와 일치합니다. 'value'.
• 이름 속성: 'name' 속성 일치에 관심이 있는 경우 위의 'id'를 'name'으로 대체하면 됩니다. 표현.

예:

문자열 "이름"이 있는 모든 요소를 ​​찾으려면 'name' 속성을 사용하려면 다음을 사용할 수 있습니다.

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

참고:

요소 태그 이름 자체에 대한 와일드카드 일치를 찾고 있는 경우 현재 "querySelector()"를 사용하는 직접적인 솔루션이 없습니다. "querySelectorAll()".