Question

尝试遍历HTML + Microdata页面以从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

虽然这个问题缺少一些细节，但递归是

的一种用于遍历树状结构未知级别的强大工具：

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

    // process this node

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

通过重复调用每个子函数，您最终将处理所有子函数。

Answer 2

如果您想要自己的 Microdata分析器，则可以从这样的内容开始。当然，您需要详细说明。例如，某些属性是array，依此类推。

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

遍历微数据以提取itemprop和文本值

2 个答案: