CSS: выбор элементов только с одним родительским селектором соответствия атрибута

Question

Я немного новичок в кодировании, так что извините, если это глупый вопрос, но я пытаюсь написать скребок общего назначения для получения данных о продукте, используя "schema.org/Product" HTML микроданные.

Однако при тестировании у меня возникла проблема ( на этой странице, в частности, когда имя было задано как «Электроника» из схемы «Хлебные крошки» ), поскольку были элементы-предки с разные itemtypes / schema.

Сначала я объявил эту переменную, чтобы проверить, есть ли у страницы элемент с использованием микроданных схемы продукта.

var productMicrodata = document.querySelector('[itemscope][itemtype="https://schema.org/Product"], [itemscope][itemtype="http://schema.org/Product"]');

Затем я хотел выбрать для всех элементов с атрибут itemprop. например,

productMicrodata.querySelectorAll('[itemprop]');

Проблема, однако, заключается в том, что я хочу игнорировать любые элементы, у которых есть другие предки с различными атрибутами itemtypes / schema, так как в этом случае данные схемы Breadcrumbs и ListItem все еще включаются.

Я подумал, что тогда я мог бы просто сделать что-то вроде этого:

productMicrodata.querySelectorAll(':not([itemscope]) [itemprop]');

Однако это все еще возвращает совпадения для дочерних элементов, имеющих элементы-предки с различными атрибутами itemcope (например, хлебные крошки).

Я уверен, что мне просто не хватает чего-то очень очевидного, но любая помощь в том, как мне добиться только выбора элементов, у которых есть только один предок с атрибутом itemtype="http://schema.org/Product", была бы очень признательна.

РЕДАКТИРОВАТЬ: Для выяснения того, где находятся элементы, с которыми я пытаюсь избежать соответствия, вот как выглядит DOM на странице примера, на которую дана ссылка. Я пытаюсь игнорировать элементы, у которых есть какие-либо предки с атрибутами itemtype.

EDIT 2: изменено неправильное использование parent на ancestor. Извините, я все еще новичок в этом: |

РЕДАКТИРОВАТЬ 4 / РЕШЕНИЕ: Я нашел не-1044 * решение для того, что я пытаюсь достичь с помощью javascript Element.closest() метод. например,

let productMicrodata = document.querySelectorAll('[itemprop]');
let itemProp = {};

for (let i = 0; i < productMicrodata.length; i++) {
    if (productMicrodata[i].closest('[itemtype]').getAttribute('itemtype') === "http://schema.org/Product" || productMicrodata[i].closest('[itemtype]').getAttribute('itemtype') === "https://schema.org/Product") {
        itemProp[productMicrodata[i].getAttribute('itemprop')] = productMicrodata[i].textContent; 
    }
}

console.log(itemProp);

Answer 1

[...] помощь в том, как я могу добиться только выбора элементов, которые имеют только атрибут itemtype="http://schema.org/Product", будет принята с благодарностью.

Селекторы атрибутов могут принимать явные значения:

[myAttribute="myValue"]

Таким образом, синтаксис для этого будет:

var productMicrodata.querySelectorAll('[itemtype="http://schema.org/Product"]');

Answer 2

:not([itemscope]) [itemprop] означает:

Элемент с атрибутом itemprop и любым предком без предка itemprop.

Итак:

<div>
    <div itemprop>
        <div itemprop> <!-- this one -->
        </div>
    </div>
</div>

… будет соответствовать, потому что, хотя у родительского элемента есть атрибут, у дедушки нет.

Вам необходимо использовать дочерний комбинатор , чтобы исключить элементы с соответствующими родительскими элементами:

:not([itemscope]) > [itemprop]