javascript - 解析模式微数据并像Google数据结构一样排列它们(Parse schema microdata and arrange them like Google data structure)

Question

Happy Thanksgiving day :)

(感恩节快乐:))

I'm learning Javascript and Dom, and I would like to parse schemadata from HTML and arrage like Google data structure.

(我正在学习Javascript和Dom，并且想解析HTML中的schemadata和像Google数据结构这样的样式。)

*Schema data information

(*模式数据信息)

<div itemscope itemtype="http://www.schema.org/Product">

  <div itemscope itemtype="http://www.schema.org/Person">
  <span itemprop="birthday" datetime="2009-05-10">May 10th 2009</span>
  </div>

  <div itemprop="name"> Product name </div>
  <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <span itemprop="price" content="500.00"> USD 500 </span>
  </div>

</div>

*Google data structure

(* Google数据结构)

My questions are,

(我的问题是)

First, to parse top categories, "Product" and "Person", how can I select the node which contain attribute "[itemtype]" but "[itemprop]" using Javascript and DOM?

(首先，要解析顶级类别“产品”和“人”，如何使用Javascript和DOM选择包含属性“ [itemtype]”但属性为“ [itemprop]”的节点？)

Second, due to the fact that Person node is childnode of Product, it is hard to exclude top category's childnode.

(其次，由于Person节点是Product的子节点，因此很难排除顶级类别的子节点。)

If I select category node, how can I exclude another category's childnode?

(如果选择类别节点，如何排除另一个类别的子节点？)

In this case, I would like to exclude category node while arranging category.

(在这种情况下，我想在排列类别时排除类别节点。)

I found this code snippet from searching, however, this does not work what I want to like Google.

(我从搜索中找到了此代码段，但是，这对我想要的Google无效。)

var result = {};
var items = [];
document.querySelectorAll("[itemscope]")
  .forEach(function(el, i) {
    var item = {
      "type": [el.getAttribute("itemtype")],
      "properties": {}
    };
    var props = el.querySelectorAll("[itemprop]");
    props.forEach(function(prop) {
      item.properties[prop.getAttribute("itemprop")] = [
        prop.content || prop.textContent || prop.src
      ];
      if (prop.matches("[itemscope]") && prop.matches("[itemprop]")) {
        var _item = {
          "type": [prop.getAttribute("itemtype")],
          "properties": {}
        };
        prop.querySelectorAll("[itemprop]")
          .forEach(function(_prop) {
            _item.properties[_prop.getAttribute("itemprop")] = [
              _prop.content || _prop.textContent || _prop.src
            ];
          });
        item.properties[prop.getAttribute("itemprop")] = [_item];
      }
    });
    items.push(item)
  })

result.items = items;

console.log(result);

document.body
  .insertAdjacentHTML("beforeend", "<pre>" + JSON.stringify(result, null, 2) + "<pre>");

var props = ["Blendmagic", "ratingValue"];

// get the 'content' corresponding to itemprop 'ratingValue' 
// for item prop-name 'Blendmagic'
var data = result.items.map(function(value, key) {
  if (value.properties.name && value.properties.name[0] === props[0]) {
    var prop = value.properties.reviews[0].properties;
    var res = {},
      _props = {};
    _props[props[1]] = prop[props[1]];
    res[props[0]] = _props
    return res
  };
})[0];

console.log(data);
document.querySelector("pre").insertAdjacentHTML("beforebegin", "<pre>" + JSON.stringify(result, null, 2) + "<pre>");

Should I use XPATH instead of DOM?

(我应该使用XPATH而不是DOM吗？)

Many thanks to you all :)

(非常感谢大家:))

  ask by hiyo translate from so

Answer 1

等待大神答复