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

htrmnn0y  于 2023-02-11  发布在  Java
关注(0)|答案(4)|浏览(233)

为了简化我想要实现的目标,我想使用javascript bookmarklet alert从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=""。我试图让函数运行通过所有,并从data-code=""获得所有其他的值。
我尝试使用以下脚本,但它返回“undefined”:

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

如果有人能告诉我或指导我如何做到这一点,我将不胜感激。
先谢了。

dgtucam1

dgtucam11#

document.getElementsByName("data-code")是空节点列表,因为不存在具有name s的元素,因此不存在具有属性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">
6g8kf2rb

6g8kf2rb2#

使用此命令,您可以检查页面上的所有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)
tp5buhyn

tp5buhyn3#

使用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">
l2osamch

l2osamch4#

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

相关问题