Как получить элемент с одним атрибутом и без другого с помощью vanilla js?

Question 1

Я пытаюсь получить элемент с атрибутом title="some title", но есть несколько элементов, которые возвращаются, и я должен получить первый элемент, у которого нет атрибута стиля.

Я попытался добавить :not[style] к своему выбору в качестве дополнительного аргумента, но это не сработало.

document.querySelector(':not([style])', 'not[title="Add to Bag"]');

Элемент, который я ищу, должен быть:

<button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag">Add to Bag</button>

javascript

0

N. Amin 27 Окт 2019 в 23:24

Почему вы используете not[title...], когда на самом деле ищете элемент с таким заголовком?

–

raina77ow

27 Окт 2019 в 23:28

Вы ищете элемент, который соответствует обоим селекторам: :not[style][title="Add to Bag"]. Хотя я повторяю вопрос @raina77ow.

–

David Thomas

27 Окт 2019 в 23:28

Answer

Объедините два селектора - '[title="Add to Bag"]:not([style])':

const els = document.querySelectorAll('[title="Add to Bag"]:not([style])');

console.log('Number of buttons found: ', els.length);

console.log(els[0]);

<button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag">Add to Bag</button>

<button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag" style="color: red;">Add to Bag</button>

4

Ori Drori 27 Окт 2019 в 23:28

Интересно, не лучше ли с точки зрения производительности использовать здесь два поиска querySelector - первый только для заголовка, второй для :not (style). Но это в любом случае не должно беспокоить. )

–

raina77ow

27 Окт 2019 в 23:30

1

Я использую querySelectorAll, чтобы продемонстрировать, что он находит первую кнопку, но игнорирует вторую из-за стиля. Он должен использовать querySelector, чтобы найти один предмет.

–

Ori Drori

27 Окт 2019 в 23:32

Question 2

Объедините два селектора - '[title="Add to Bag"]:not([style])':

const els = document.querySelectorAll('[title="Add to Bag"]:not([style])');

console.log('Number of buttons found: ', els.length);

console.log(els[0]);

<button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag">Add to Bag</button>

<button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag" style="color: red;">Add to Bag</button>

4

Ori Drori 27 Окт 2019 в 23:28

Интересно, не лучше ли с точки зрения производительности использовать здесь два поиска querySelector - первый только для заголовка, второй для :not (style). Но это в любом случае не должно беспокоить. )

–

raina77ow

27 Окт 2019 в 23:30

1

Я использую querySelectorAll, чтобы продемонстрировать, что он находит первую кнопку, но игнорирует вторую из-за стиля. Он должен использовать querySelector, чтобы найти один предмет.

–

Ori Drori

27 Окт 2019 в 23:32

Как получить элемент с одним атрибутом и без другого с помощью vanilla js?

1 ответ

Похожие вопросы

Новые вопросы

javascript