javascript - W3C セレクター API は jquery セレクターを実装します $('a span:contains("myText")')

Question

変わりたい

$('a span:contains("myText")').click();

に

var ev = document.createEvent("MouseEvents");
ev.initEvent("click", true, true);
document.querySelector(???).dispatchEvent(ev);

とは ？？？入力する必要がありますか？

Answer 1

残念ながら、JavaScript には「contains」セレクターがないため、あなたが求めていることを 1 行で実行することはできません。

あなたがしなければならないことは、'a span'使用してすべての要素を取得し、document.querySelectorAll()それらを繰り返し処理して、それらが含ま'myText'れているかどうかを確認することです。

これがフィドルの例です

html:

<a href="/three"><span>banana button</span></a>
<a><span>orange button</span></a>

CSS:

span {
    width:100px;
    height:25px;
    border:2px solid red;
    cursor:pointer;
}

js:

var ev = document.createEvent("MouseEvents");
ev.initEvent("click", true, true);
var all_spans = document.querySelectorAll("a span");
for (i = 0; i < all_spans.length; i++) {
    if (all_spans[i].innerText.indexOf("banana")>-1) {
        all_spans[i].dispatchEvent(ev);
    }
}