Question

所以我试图从脚本中从DOM中获取div表的一些属性 - 并且失败了。

守则应该说明一切：

<head>
<script type = "text/javascript" src = "SCRIPT_IN_QUESTION.js"></script>
</head>

<body>
      <div id = "my_elements">

            <!-- I want to access 'attribute-one' data attributes from 
                 all children -->
            <div data-attribute-one = "Hello"></div>
            <div data-attribute-one = "World"></div>
      </div>       

</body>

我已经看到如何使用DOM中的嵌入式脚本完成这项工作：

 <script type = "text/javascript">

      var values  = document.getElementById('my_elements').childNodes;

      var foo = values[0].getAttribute('data-attribute-one');

 </script>

我正在尝试从未嵌入到DOM中的脚本中访问这些属性，并且getAttribute未定义 - 猜测你只能在DOM中使用它。

如何在DOM外部的脚本中访问此数据？

正如下面的评论所述，在加载DOM之后执行此操作是有意义的，并且我这样做：

window.addEventListener('load', onload, false);


function onload(){

    var data = document.getElementById('canvas_segments').childNodes;

    //This throws an undefined error
    var attribute = data[0].getAttribute('data-attribute-one'); 
}

非常感谢

Answer 1

这里有时间问题。有问题的脚本在DOM完成之前正在执行，因此没有元素。

您可以在所有其他标记之后将脚本标记移动到页面底部，也可以将代码放在window.onload函数中。

Answer 2

使用.children代替.childNodes（也包括文本节点）。您可能需要将调用包装到onload事件中，例如

<body onload="onLoad()";>
      <div id = "my_elements">

            <!-- I want to access 'attribute-one' data attributes from 
                 all children -->
            <div data-attribute-one = "Hello"></div>
            <div data-attribute-one = "World"></div>
      </div>       

</body>

并在您的脚本中：

function onLoad() {
   var values  = document.getElementById('my_elements').children;
   var foo = values[0].getAttribute('data-attribute-one');
}

Answer 3

首先，在上面的代码片段中，您在加载DOM结构之前附加了javascript。在身体后面附加js文件，以便首先加载HTML内容，然后执行js。

完成此操作后，您仍然会遇到一个问题：＆＃39; Uncaught TypeError：undefined不是函数。＆＃39; 这是因为您正在使用＆＃39;的childNodes＆＃39;而不是儿童。＆＃39; 两者之间的区别在于，儿童只获得元素，而儿童节点则只有＃39;也将获取节点。请参阅此问题，以便更清楚地区分两者（What is the difference between children and childNodes in JavaScript?）

您可能对代码的工作副本感兴趣：http://goo.gl/HonxtJ

从javascript获取DOM元素信息

3 个答案: