Html 类型错误：node.setAttribute 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15686504/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: node.setAttribute is not a function
提问by SineLaboreNihil
I'm getting an error: "TypeError: item.setAttribute is not a function" when I try to call the following function on my webpage:
当我尝试在我的网页上调用以下函数时，出现错误：“TypeError: item.setAttribute is not a function”：
function list() {
var colors = document.getElementById('colors');
var colors = colors.childNodes.length;
for (var i = 1; i < broj; i++) {
var item = colors.childNodes.item(i);
item.setAttribute("id", i);
item.setAttribute("onmouseover", "moveover(src)");
item.setAttribute("alt", "Color");
item.hspace = "2";
item.height = "23";
}
}
function moveover(colorAddress) {
var source = colorAddress;
var image = source.slice(0, source.length - 4);
var start = "url(";
var extension = ".jpg)";
var newImage = start.concat(image, extension);
document.getElementById('image').style.backgroundImage = newImage;
}
window.onload = function() {
try {
list();
} catch (err) {
alert(err);
}
}
The mouseover()function is a helper function for the list()function that should fire when the event onmouseoverattribute is added to the element in the list()function.
该mouseover()函数是函数的辅助函数，list()当将事件onmouseover属性添加到list()函数中的元素时应触发该函数。
When I load my page the alert box pops up and gives me the above mentioned error.
当我加载我的页面时，警报框会弹出并给我上述错误。
It's actually adding all the attributes to my elements but I don't understand why this error is showing up. Because this error is triggering it's preventing me from running another function right after this one loads.
它实际上是将所有属性添加到我的元素中，但我不明白为什么会出现此错误。因为这个错误正在触发它阻止我在加载这个函数后立即运行另一个函数。
Why is this error showing up?
为什么会出现这个错误？
Here is the HTML document I'm trying to manipulate:
这是我试图操作的 HTML 文档：
<div id="image" style="background-image: url(images/nova_brilliant/1.jpg)"></div>
<div id="tekst">
<h1>Nova Brilliant</h1>
<div id="contents">
<p>Hover with your mouse over the desired color to see the kitchen in that color:</p>
<div id="colors">
<img src="images/nova_brilliant/1.gif">
<img src="images/nova_brilliant/2.gif">
<img src="images/nova_brilliant/3.gif">
</div>
<p>Other available colors:</p>
<div id="others">
<img src="images/nova_brilliant/4.gif">
<img src="images/nova_brilliant/5.gif">
<img src="images/nova_brilliant/6.gif">
</div>
</div>
</div>
When a user hovers with their mouse over one of the 3 images in the div with id="colors"the background image in the div with id="image"should change and it really does change, it's just that I get that annoying error which prevents me from running another script as soon as this one loads.
当用户将鼠标悬停在 div 中的 3 个图像之一上时，div 中id="colors"的背景图像id="image"应该发生变化并且确实发生了变化，只是我遇到了烦人的错误，这会阻止我尽快运行另一个脚本这个加载。
回答by Tim Down
Chances are the node on which you're calling setAttribute()is a text node rather than an element. The easiest solution is check the nodeTypeproperty before calling setAttribute():
您调用的节点很可能setAttribute()是文本节点而不是元素。最简单的解决方案是nodeType在调用之前检查属性setAttribute()：
var item = colors.childNodes[i];
if (item.nodeType == 1) {
// Do element stuff here
}
An aside: setting event handler attributes such as onmouseovervia setAttribute()is generally a bad idea because it doesn't work as specified in older IE (and compatibility modes in later IE). Use the equivalent property instead:
顺便说一句：设置事件处理程序属性（例如onmouseovervia setAttribute()）通常是一个坏主意，因为它不能像旧 IE 中指定的那样工作（以及更高版本 IE 中的兼容模式）。请改用等效属性：
item.onmouseover = function() {
moveover(this.src);
};
