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

Question

为了简化我想要实现的目标，我想使用 javascript 小书签从 data-code="popular-laptop-deals" 中获取 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，其中还有其他 <div> 数据代码 =“”。我正在尝试通过所有函数获取运行并从 data-code="".

获取所有其他值

我试过使用以下脚本，但它 returns "undefined":

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

如果有人可以向我展示或指导我如何实现这一点，我将不胜感激。

提前致谢。

Answer 1

使用Jquery，你可以实现如下。

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">

Answer 2

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

的元素

可以把getElementsByName改成getElementsByTagName等，然后得到它的属性值

此外，data-* 属性可以通过元素的 dataset 属性访问，例如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

带有 querySelector select 标签和 getAttribute select 属性

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 4

有了这个，您可以检查页面上的所有 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)

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

javascript: how do i get the value of a specific attribute in a nested div

javascript

bookmarklet