element.setAttribute 不是函数

Question

所以，我知道这已经得到解答，但是 none 之前的答案设法使我的代码工作。我有一个 html 结构如下：

<div class="form">
    <div class="formrow">
        <div class="previewcontainer">
            <object id="preview">
            <object>
        </div>
    </div>
</div>

我正在尝试将数据属性设置为这样的对象：

var link = "http://www.someurl.com";
var preview = document.querySelectorAll ("#preview");
preview.setAttribute("data", link);

但是，我得到一个错误preview.setAttribute is not a function

Answer 1

试试这个：

var link = "http://www.someurl.com";
var preview = document.querySelectorAll ("#preview");
preview[0].setAttribute("data", link);

Answer 2

或者这个：

var link = "http://www.someurl.com";
var preview = document.getElementById("preview"); //getElementById instead of querySelectorAll
preview.setAttribute("data", link);

一定要运行元素创建后的代码，或者使用jQuery代码：

$( document ).ready(function() {
}

@Lazarus Rising提到，

Uncaught TypeError: Cannot read property 'setAttribute' of null

在这种情况下，该元素在文档中尚不存在。您需要运行创建元素后的代码，例如加载事件之后或元素下方的脚本。

Answer 3

使用 querySelectorAll() 时，将其视为一个数组，您需要 'for loop' 来遍历不同的元素。例如

var link = "http://www.someurl.com";
var preview = document.querySelectorAll ("#preview");
for (var i = 0; i < preview.length;  i++ {
preview[i].setAttribute("type", 'href');
}

这会将 ID 为 'preview' 的所有元素的 'type attributes' 更改为 link。

Answer 4

如果您应该使用 querySelectorAll， of @Viktor Akanam 会帮助您

或者您可以直接起诉 querySelector 而不是 querySelectorAll！

Answer 5

如果您使用任何 select 或能够一次 select 多个元素（例如 getElementsByClassName ， querySelectorAll ）分配变量，那么它显示错误，因此一次使用任何 select 或那个 select 单个元素（例如：getElementById）

element.setAttribute 不是函数

element.setAttribute is not a function

javascript

object

setattribute