query Selector, 와일드카드 요소가 일치합니까?

query Selector, 와일드카드 요소가 일치합니까?

와일드카드 요소명을 대조하는 방법이 있습니까?querySelector또는querySelectorAll?

해석하려는 XML 문서는 기본적으로 일반 속성 목록입니다.

• 이름에 특정 문자열이 있는 요소를 찾아야 합니다.
• 속성 쿼리에서는 와일드카드가 지원되지만 요소 자체는 지원되지 않습니다.

권장되지 않는 것으로 보이는 XPath(IE9에서 폐기)를 사용하는 것을 제외한 모든 해결 방법이 허용됩니다.

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

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

[id*='someId']를 포함하는 모든 ID와 일치합니다.someId.

를 찾으시는 경우name그냥 대용품으로 간주하다id와 함께name.

요소의 태그 이름을 말하는 경우, 다음을 사용하는 방법은 없는 것 같습니다.querySelector

저는 querySelector()를 포함한 한 줄에 대해 메시지를 주고받았고, 결국 여기에 오게 되었습니다.태그명과 querySelector()를 사용하여 OP 질문에 대답할 수 있습니다.또한 MY 질문에 대한 답변에 대해 @JaredMcateer의 크레딧을 가지고 있습니다.일명 바닐라 Javascript의 querySelector()와 RegEx와 일치합니다.

다음 사항이 유용하고 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);
//> (...)

tagName을 명시적 속성으로 설정합니다.

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

XML 문서용으로 Nested Tags 끝부분이 다음과 같이 되어 있어야 합니다._Sequence자세한 내용은 Jared McCateer의 답변을 참조하십시오.

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

예쁘다고는 말하지 않았습니다:) PS: 를 사용하는 것을 추천합니다.tag_nameover tagName을 사용하면 'computer generated' 즉 암묵적인 DOM 속성을 읽을 때 간섭이 발생하지 않습니다.

나는 방금 이 짧은 대본을 썼는데, 효과가 있는 것 같아요.

/**
 * 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"

regex + not + multi Class 셀렉터를 찾고 있는데, 이것이 제가 받은 것입니다.

같은 것을 찾는 사람에게 도움이 되길 바랍니다!

// contain abc class
"div[class*='abc']" 

// contain exact abc class
"div[class~='abc']" 

// contain exact abc & def(case-insensitively)
"div[class~='abc'][class*='DeF'i]" 

// contain exact abc but not def(case-insensitively)
"div[class~='abc']:not([class*='DeF'i])" 

css 셀렉터 문서:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

간단한 테스트: https://codepen.io/BIgiCrab/pen/BadjbZe

위의 답변 중 많은 부분이 마음에 들었지만, 질의는 수업에서만 실행하는 것이 더 좋습니다.모든 요소를 반복할 필요가 없도록 ID를 지정합니다.이것은 @bigiCrab과 @JaredMcateer의 코드 조합입니다.

// class exactly matches abc
const exactAbc = document.querySelectorAll("[class='abc']")

// class begins with abc
const startsAbc = document.querySelectorAll("[class^='abc']")

// class contains abc
const containsAbc = document.querySelectorAll("[class*='abc']")

// class contains white-space separated word exactly matching abc
const wordAbc = document.querySelectorAll("[class~='abc']")

// class ends with abc
const endsAbc = document.querySelectorAll("[class$='abc']")

다른 일치 항목을 가져오려면 "class"를 "id" 또는 "href"로 대체합니다.자세한 예는 아래 링크된 기사를 참조하십시오.

레퍼런스:

1. MDN의 CSS 속성 실렉터:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

없는 것을 말하는 방법이 있다.절대 일어나지 않을 일을 만들어라.적절한 css 셀렉터 레퍼런스: https://www.w3schools.com/cssref/css_selectors.asp 에는 다음과 같이 :not 셀렉터가 표시됩니다.

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

다음은 예를 제시하겠습니다.div 뒤에 뭔가(z 태그 이외의 모든 것)가 표시됩니다.

div > :not(z){
 border:1px solid pink;
}

언급URL : https://stackoverflow.com/questions/8714090/queryselector-wildcard-element-match