如何为html元素赋予范围

【问题标题】：How to give scope to a html element如何为html元素赋予范围
【发布时间】：2017-08-12 12:21:50
【问题描述】：

<article class="product_summary" data-product-id="1" data-product-price="45.00">
<img class="product_image" src="images/cufflinks.jpg" alt="cufflinks">
<h1 class="product_title">Personalised cufflinks</h1>
<span class="product_price">£45.00</span>
<a class="add_to_basket" href="/add-to-basket?product_id=1">Add to Basket</a>
</article>

假设我有一个类似上面的元素。我怎样才能给它范围，以便我可以访问其中的不同元素？我本质上希望能够从中获取价值。即价格、标题等

【问题讨论】：

如果 data-product-id="1" 是唯一的，则使用任何 div 容器包装并访问 div[data-product-id="1"] 和其中的所有子项。跨度>
请分享相关的JavaScript代码。
到目前为止你尝试过什么？请更新您的问题并包括您所做的任何尝试，谢谢。
“给定范围”是什么意思？是什么让您认为您甚至需要这样做？

标签： javascript html scope

【解决方案1】：

HTML sn-p 中有一些zero-width spaces，这会使事情复杂化。该字符出现在每个 = 和 > 以及其他几个地方之后。由于它不占用水平空间，因此不容易被发现。

此字符严重影响属性值，因此最好将其从源中删除。

这是列出部分内容的代码。我已经从 HTML 中删除了那些零空格字符：

for (let article of document.querySelectorAll("article")) {
    console.log('Article ID:', article.dataset.productId);
    console.log('Price:', article.dataset.productPrice);
    console.log('Title:', article.querySelector("h1").textContent);
}

<article class="productsummary" data-product-id="1" data-product-price="45.00">
    <img class="product_image" src="images/cufflinks.jpg" alt="cufflinks">
    <h1 class="product_title">Personalised cufflinks</h1>
    <span class="product_price">£45.00</span>
    <a class="add_to_basket" href="/add-to-basket?product_id=1">Add to Basket</a>
</article>

【讨论】：