web-dev-qa-db-ja.com

querySelector、ワイルドカード要素の一致？

querySelectorまたはquerySelectorAllを使用してワイルドカード要素名の一致を行う方法はありますか？属性クエリではワイルドカードがサポートされていますが、要素自体はサポートされていません。

解析しようとしているXMLドキュメントは基本的にプロパティのフラットリストであり、名前に特定の文字列を含む要素を見つける必要があります。

これが必要な場合、おそらくXML文書が再構築を必要としていることを理解しますが、それは起こりません。

明らかに非推奨になったXPathの使用に戻る（IE9で廃止された）以外の解決策は受け入れられます。

javascriptdomdomparserselectors-api
92
Erik Andersson

[id^='someId']は、someIdで始まるすべてのIDと一致します。

[id$='someId']は、someIdで終わるすべてのIDと一致します。

[id*='someId']は、someIdを含むすべてのIDと一致します。

name属性を探している場合は、idをnameに置き換えてください。

要素のタグ名について話している場合、querySelectorを使用する方法があるとは思わない

255
JaredMcAteer

私はquerySelector（）を含むワンライナーをいじり回していましたが、ここで終了し、タグ名とquerySelector（）を使用してOP質問に可能な答えがあります。私の質問に答える@JaredMcAteer Vanilla Javascriptの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);
//> (...)
17
StephaneAG

TagNameを明示的な属性として設定します。

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

ネストされたタグが_Sequenceで終わるXMLドキュメントのために、私は自分でこれを必要としました。 JaredMcAteer answerを参照してください。

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

私はそれがきれいだとは言いませんでした:) PS：tagNameでtag_nameを使用することをお勧めします。そのため、「コンピューター生成」、暗黙のDOM属性を読み取るときに干渉が発生しません。

10
Lorenz Lo Sauer

この短いスクリプトを書きました。動作するようです。

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

そうではないことを言う方法があります。決してそうではない何かを作ってください。適切な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;
}
0
Steve Lloyd