querySelector, 와일드 카드 요소 일치?


133

다음을 사용하여 와일드 카드 요소 이름을 일치시키는 방법이 있습니까? querySelector 또는 querySelectorAll? 속성 쿼리에서는 와일드 카드를 지원하지만 요소 자체는 지원하지 않습니다.

구문 분석하려는 XML 문서는 기본적으로 단순한 속성 목록이며 이름에 특정 문자열이있는 요소를 찾아야합니다.

XML 문서가 필요할 경우 구조 조정이 필요할 수도 있지만 실제로는 그렇지 않을 것입니다.

더 이상 사용되지 않는 XPath (IE9에서 삭제)를 다시 사용하는 것을 제외한 모든 솔루션을 사용할 수 있습니다.


"이름"이란 태그 이름을 의미합니까?
kennytm

1
@JaredMcAteer의 답변은 답변으로 인정받을 가치가 있습니다. 고려하십시오.
RBT

답변:


347

[id^='someId']로 시작하는 모든 ID와 일치합니다 someId.

[id$='someId']로 끝나는 모든 ID와 일치합니다 someId.

[id*='someId']가 포함 된 모든 ID와 일치합니다 someId.

당신이 찾고 있다면 name속성 단지 대체 id와 함께 name.

요소의 태그 이름에 대해 이야기하고 있다면 사용 방법이 없다고 생각합니다. querySelector


4
감사합니다. 태그 이름을 의미했습니다.
Erik Andersson

흠 document.querySelectorAll ( "div. [id $ = 'foo']") 할 수 없습니다
SuperUberDuper

4
아마도 document.querySelectorAll("div[id$='foo']")IE8을 어지럽히는 기간 은 부분 QSA 만 지원하므로 CSS2.1 선택기 만 지원하므로 IE8에서는 작동하지 않지만 IE9 +는 작동합니다.
JaredMcAteer

이 대답은 내 생명을 구했습니다! 감사합니다!!
메 나스

28

querySelector ()와 관련된 하나의 라이너를 엉망으로 만들고 여기에 올랐고 태그 이름 및 querySelector ()를 사용하여 OP 질문에 대한 가능한 답변을 얻었습니다. 내 질문에 대답하기 위해 @JaredMcAteer에 크레딧이 있습니다. 바닐라 자바 ​​스크립트에서 querySelector ()와 일치

다음을 희망하면 OP의 요구 사항이나 다른 사람의 요구에 적합하고 적합합니다.

// basically, of before:
var youtubeDiv = document.querySelector('iframe[src="http://www.youtube.com/embed/Jk5lTqQzoKA"]')

// after     
var youtubeDiv = document.querySelector('iframe[src^="http://www.youtube.com"]');
// or even, for my needs
var youtubeDiv = document.querySelector('iframe[src*="youtube"]');

그런 다음 예를 들어 src 물건 등을 얻을 수 있습니다 ...

console.log(youtubeDiv.src);
//> "http://www.youtube.com/embed/Jk5lTqQzoKA"
console.debug(youtubeDiv);
//> (...)

12

tagName을 명시 적 속성으로 설정하십시오.

for(var i=0,els=document.querySelectorAll('*'); i<els.length;
          els[i].setAttribute('tagName',els[i++].tagName) );

중첩 태그가 끝나는 XML 문서의 경우이 작업이 필요했습니다 _Sequence. 자세한 내용은 JaredMcAteer 답변을 참조하십시오.

document.querySelectorAll('[tagName$="_Sequence"]')

PS : 나는 tag_nametagName 이상 을 사용 하는 것이 좋습니다 . 따라서 '컴퓨터 생성', 암시 적 DOM 속성을 읽을 때 간섭이 발생하지 않습니다.


8

방금이 짧은 스크립트를 썼습니다. 작동하는 것 같습니다.

/**
 * Find all the elements with a tagName that matches.
 * @param {RegExp} regEx  regular expression to match against tagName
 * @returns {Array}       elements in the DOM that match
 */
function getAllTagMatches(regEx) {
  return Array.prototype.slice.call(document.querySelectorAll('*')).filter(function (el) { 
    return el.tagName.match(regEx);
  });
}
getAllTagMatches(/^di/i); // Returns an array of all elements that begin with "di", eg "div"

querySelectorAll에 의해 리턴 된 오브젝트는 모든 브라우저에서 반드시 필터를 지원하지는 않습니다 (항상 일반적인 자바 스크립트 배열이 아님). 스크립트가 생성되기 전에 (스크립트가 동적으로 생성되는 경우) 또는 조건문을 사용하여 프로덕션에서이 어설 션을 확인하십시오.
Dmitry

아주 좋은 답변 ... 이것은 내 문제에서 찾은 마감 경기였습니다. 나는 사용자 지정 요소로 작업하고 있으며 이와 같은 기능은 여전히 ​​수동 작업입니다.
codepleb

-1

그렇지 않은 것을 말하는 방법이 있습니다. 절대 안될 무언가를 만드십시오. 좋은 CSS 선택기 참조 : https://www.w3schools.com/cssref/css_selectors.asp : : not 선택기가 다음과 같이 표시됩니다.

:not(selector)  :not(p) Selects every element that is not a <p> element

예를 들면 다음과 같습니다. div 뒤에 무언가 (az 태그 이외의 것)

div > :not(z){
 border:1px solid pink;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.