循环显示微数据以提取itemprop和文本值

Question

Trying to loop over a HTML+Microdata page to get the product info from Schema.org. HTML could have unknown children of children. How would I do multiple loops on children of unknown or is it best to use find?

So I want to grab all schema data a put in an array:

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

So the above would be save to an array [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

While this question is missing some detail, one powerful tool for traversing unknown levels of a tree-like structure is recursion :

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

    // process this node

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

Through repeated function calls to each child, you will eventually process all of them.

Answer 2

If you want your own Microdata parser then you can start from something like this. Off course you need to elaborate it a lot. For example, some properties are array s and so on.

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));
  });