Цикл по микроданным для извлечения itemprop и текстового значения

Question

Попытка перебрать страницу HTML + микроданных, чтобы получить информацию о продукте от Schema.org. У HTML могли быть неизвестные дети детей. Как бы я сделал несколько циклов для детей неизвестного или лучше всего использовать find?

Итак, я хочу получить все данные схемы в виде массива:

  <span itemprop="name">Product Name</span>

Таким образом, вышеприведенное будет сохранено в массиве [name: "Product Name"].

      function productData(elem) {
    // Get the children
    console.log("elem 1", elem)
    console.log("elem 2", elem[0])

    if (elem[0]) {
      if (elem[0].hasChildNodes()) {
        elem[0].childNodes.forEach(function (item) {
          console.log("item", item)
          console.log("item chilnodes", item.childNodes)
          return productData(item);
        });
      }
    }
  }


  // Get All Products on the page
  const product = document.querySelectorAll('[itemtype="http://schema.org/Product"]');

  productData(product)

Answer 1

Если вам нужен собственный Анализатор микроданных , вы можете начать с чего-то подобного.Конечно, вам нужно много доработать.Например, некоторые свойства array s и т. Д.

function getItem(elem) {
  var item = {
    '@type': elem.getAttribute('itemtype')
  };
  elem.querySelectorAll('[itemprop]')
    .forEach(function(el) {
      var prop = el.getAttribute('itemprop');
      //special cases
      if (el.hasAttribute('itemscope'))
        item[prop] = item[prop] ? [...item[prop], getItem(el)] : getItem(el); //recursion here
      else if (prop == 'url')
        item[prop] = el.getAttribute('href');
      else if (prop == 'image')
        item[prop] = el.getAttribute('src');
      else
        item[prop] = el.innerText;
      });
   return item;
}
var products = [];

document.querySelectorAll('[itemtype*="http://schema.org/Product"]') //*= for multiple types
  .forEach(function(prod) {
    products.push(getItem(prod));
  });

Answer 2

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

function processData (product) {
  if(product.length) {
    const productChildrem =  product[0].childNodes;

    // process this node

    productChildrem.forEach(function (child) {
       return processData(child)
    });
}

Через повторяющиеся вызовы функций для каждого ребенка вы в конечном итоге будете обрабатывать их все.