[javascript] querySelector, 와일드 카드 요소 일치?

Program / 글쓴이

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

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

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

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

답변

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

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

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

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

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

답변

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);
//> (...)

답변

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 속성을 읽을 때 간섭이 발생하지 않습니다.

답변

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

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

답변

그렇지 않은 것을 말하는 방법이 있습니다. 절대 안될 무언가를 만드십시오. 좋은 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;
}

답변