TypeError: node.setAttribute не является функцией

Question

Я получаю сообщение об ошибке: «Ошибка типа: item.setAttribute не является функцией», когда я пытаюсь вызвать следующую функцию на веб-странице:

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); 
    } 
} 

mouseover() Функция является вспомогательной функцией для функции list(), которая должна срабатывать, когда атрибут onmouseover добавляется к элементу в функции list().

Когда я загружаю свою страницу, появляется окно с предупреждением и дает мне вышеупомянутую ошибку.

Это фактически добавляет все атрибуты к моим элементам, но я не понимаю, почему эта ошибка появляется. Поскольку эта ошибка запускает, это мешает мне запустить другую функцию сразу после загрузки.

Зачем возникает эта ошибка?

Вот 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> 

Когда пользователь наводит курсор с их мышью по одному из 3-х изображений в DIV с id="colors" фоновое изображение в DIV с id="image" должен изменения, и это действительно изменится, просто я получаю эту досадную ошибку, которая мешает мне запускать другой скрипт, как только это загрузится.

Answer 1

Скорее всего, узел, на котором вы звоните setAttribute(), является текстовым узлом, а не элементом. Самое простое решение проверить nodeType свойство перед вызовом setAttribute():

var item = colors.childNodes[i]; 
if (item.nodeType == 1) { 
    // Do element stuff here 
} 

В сторону: установка обработчика событий атрибуты, такие как onmouseover через setAttribute(), как правило, плохая идея, потому что она не работает, как указано в старых IE (и совместимость режимы в более позднем IE). Вместо этого используйте эквивалентное свойство:

item.onmouseover = function() { 
    moveover(this.src); 
};