QuerySelectorAll yalnızca belirli bir öznitelik kümesine sahip öğeler için nasıl kullanılır?

124

Öznitelik kümesine document.querySelectorAllsahip tüm onay kutuları için kullanmaya çalışıyorum value.

Sayfada valueayarlanmamış başka onay kutuları vardır ve her bir onay kutusu için değer farklıdır. Kimlikler ve isimler benzersiz değil.

Misal: <input type="checkbox" id="c2" name="c2" value="DE039230952"/>

Yalnızca değerleri ayarlanmış olan onay kutularını nasıl seçerim?

javascript css-selectors selectors-api

— Soryn
kaynak

bu boşlukları içeriyor mu? gibivalues=""

— Joseph

diğer onay kutularının hiçbir değeri yoktur, bu nedenle bunu dahil etmesi gerekmez.

— Soryn

Yanıtlar:

217

Bunun gibi kullanabilirsiniz querySelectorAll():

var test = document.querySelectorAll('input[value][type="checkbox"]:not([value=""])');

Bu şu anlama gelir:

"değer" özelliğine sahip tüm girdileri alın ve boş olmayan "değer" özniteliğine sahiptir.

Bu demoda , boş olmayan bir değere sahip onay kutusunu devre dışı bırakır.

— Joseph
kaynak

Yine de yalnızca onay kutusu türü girişler nasıl seçilir? değer özniteliklerine sahip birçok başka girdi etiketi var, ancak ben yalnızca onay kutularını istiyorum.

— Soryn

@Soryn ekle [type="checkbox"]. Cevabım güncellendi.

— Joseph

MÜKEMMEL CEVAP! Bu, DOM geçişi için mini kitaplıklara jQuery'nin dahil edilmesi ihtiyacını büyük ölçüde ortadan kaldırır. Aşağıdaki yanıtta bazı ekstra ipuçları var.

— mattdlockyer

bana bu sözdizimi girdisinin ne olduğunu söyleyebilir misiniz [değer] [tür = "onay kutusu"]: hayır ([value = ""] Bu sözdizimini daha önce javascript'te

— görmemiştim

@blackHawk Sözdizimi CSS Seçicileri kullanır. MDN tarafından belirtildiği gibi "virgülle ayrılmış bir veya daha fazla CSS seçicisi içeren bir dizedir". CSS Seçiciler hakkında buradan bilgi edinebilirsiniz .

— martieva

Ekstra İpuçları:

Çoklu "not", gizli olmayan ve devre dışı bırakılmayan giriş:

:not([type="hidden"]):not([disabled])

Ayrıca bunu yapabileceğinizi biliyor muydunuz:

node.parentNode.querySelectorAll('div');

Bu, jQuery'ye eşdeğerdir:

$(node).parent().find('div');

Etkin bir şekilde "düğüm" ve altında yinelemeli olarak tüm div'leri bulacak, HOT DAMN!

— mattdlockyer
kaynak

Örneğinizle:

<input type="checkbox" id="c2" name="c2" value="DE039230952"/>

Örneklerde $$ değerini document.querySelectorAll ile değiştirin:

$$('input') //Every input
$$('[id]') //Every element with id
$$('[id="c2"]') //Every element with id="c2"
$$('input,[id]') //Every input + every element with id
$$('input[id]') //Every input including id
$$('input[id="c2"]') //Every input including id="c2"
$$('input#c2') //Every input including id="c2" (same as above)
$$('input#c2[value="DE039230952"]') //Every input including id="c2" and value="DE039230952"
$$('input#c2[value^="DE039"]') //Every input including id="c2" and value has content starting with DE039
$$('input#c2[value$="0952"]') //Every input including id="c2" and value has content ending with 0952
$$('input#c2[value*="39230"]') //Every input including id="c2" and value has content including 39230

Örnekleri doğrudan şu şekilde kullanın:

const $$ = document.querySelectorAll.bind(document);

Bazı eklemeler:

$$(.) //The same as $([class])
$$(div > input) //div is parent tag to input
document.querySelector() //equals to $$()[0] or $()

— Punnerud
kaynak