javascript：如何获取嵌套 div 中特定属性的值

Question

为了简化我想要实现的目标，我想使用 javascript bookmarklet 警报从 data-code="popular-laptop-deals" 获取流行笔记本电脑交易。

<div class="display-table-column scroll-item display-block-xs top-padding-mini-xs tile-highlight category-tile" data-code="popular-laptop-deals" data-testid="tile-highlight">

这些属于嵌套的 div，其中还有其他带有 data-code="" 的<div> 。 我试图让函数运行所有并从 data-code="" 获取所有其他值。

我尝试使用以下脚本，但它返回“未定义”：

 javascript:alert(document.getElementsByName("data-code")[0]);

感谢有人可以向我展示或指导我如何实现这一目标。

提前致谢。

Answer 1

带有querySelector选择标记和带有getAttribute选择属性

 var attr_code = document.querySelector('div').getAttribute('data-code'); alert(attr_code);

 <div class="display-table-column scroll-item display-block-xs top-padding-mini-xs tile-highlight category-tile" data-code="popular-laptop-deals" data-testid="tile-highlight">

Answer 2

document.getElementsByName("data-code")是一个空的 NodeList 因为没有name s 的元素，因此没有具有属性data-code元素。

您可以将getElementsByName更改为getElementsByTagName等，然后获取其属性值。

此外，可以通过元素的dataset属性访问data-*属性，例如yourDiv.dataset.code 。

 alert(document.getElementsByTagName('div')[0].dataset.code);

 <div class="display-table-column scroll-item display-block-xs top-padding-mini-xs tile-highlight category-tile" data-code="popular-laptop-deals" data-testid="tile-highlight">

Answer 3

有了这个，您可以检查页面上的所有 div 标签，如果包含数据代码，则将它们添加到数组中。

var divs = document.getElementsByTagName("div");
var result = [];

for (var i = 0; i < divs.length; i++) {
    if (typeof divs[i].dataset.code !== "undefined") {
        result.push(divs[i].dataset.code);
    }
}

console.log(result)

Answer 4

使用 Jquery，您可以实现如下所示。

查询：

 alert($("div").attr("data-code"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="display-table-column scroll-item display-block-xs top-padding-mini-xs tile-highlight category-tile" data-code="popular-laptop-deals" data-testid="tile-highlight">