Javascript.RU

Свойство объекта или атрибут html элемента

И снова поднимаю на обсуждение проблему связанную с нашим "любимым" Internet Explorer!
Во время работы над эффектом MySelect, Internet Explorer показал ошибку, которую я не сразу смог найти. После долгого разбора своего кода я нашел ошибку и был очень удивлен!

Здесь и возникла ошибка

var elems = document.getElementsByTagName('*');
var length = elems.length;
// результат Internet Explorer [object HTMLInputElement] 
// а другие браузеры возвращали число - количество элементов в объекте
alert(length);

По началу, я не мог понять что возвращает мне Internet Explorer и почему вместо цифры выдает input элемент. Проверив атрибут name элемента input я получил результат length

alert(length.name); // результат равнялся length

Тогда я понял, что это был один из input'ов на странице, который имел атрибут name со значением length.

Вывод

Если на странице имеется html элемент с name=length, то при использовании метода getElementsByTagName и при попытке получить количество его элементов с помощью свойства объекта length, Internet Explorer вернет html элемент с name=length, а другие браузеры количество элементов в этом объекте.
Поэтому не следует использовать зарезервированные слова в значениях атрибутов элементов страницы!

<div>текст</div>
<p>еще текста</p>
<input type="text" name="length">
<script language=javascript>
var elems = document.getElementsByTagName('*');
var length = elems.length;
// IE вернет input элемент страницы, а другие браузеры цифру
alert(length);
</script>
+4

Автор: torbasow, дата: 26 декабря, 2010 - 12:50
#permalink

Вывод недостаточно радикален. Эта проблема имеет отношение ко всем браузерам и всем языкам программирования. Мораль на самом деле такова: не следует использовать метки, совпадающие с зарезервированными словами языка; сие всегда может таить в себе опасность.


Автор: ixth, дата: 27 декабря, 2010 - 01:22
#permalink

А что, обращение к элементам нодлиста по имени — это нормальное поведение? Я сейчас серьезно спрашиваю. Как тогда узнать количество элементов в нем?


Автор: HelpeR, дата: 27 декабря, 2010 - 22:36
#permalink

torbasow, спасибо, не смог выразить свою мысль! И если честно я тоже задался вопросом, а как можно узнать количество элементов в Internet Explorer'e?
Неужели выходом будет

Object.prototype.count = function() {
    var i = 0;
    for(var c in this) {
        i++;
    }
    return i;
}

Автор: I-zone, дата: 28 декабря, 2010 - 21:05
#permalink

На самом деле выход гораздо проще. Не использовать имена нод, совпадающих с названиями свойств :-) Не думаю, например, что кто то будет баловаться id="undefined", так и здесь. Рекомендацией w3c не предусмотренно поведение в этой ситуации. К тому же другие обозреватели тоже по логике поступают не правильно. Почему они не возвращают запрошенный элемент? В данном случае это не баг internet explorer, а баг вашего кода. Удачи.


Автор: nikita.mmf, дата: 17 января, 2011 - 00:37
#permalink
var size = function( collection ){ 
     if ( typeof collection.length === "number" ) {
           return collection.length;
     }
     var length = 0;
     while ( collection[length++] != undefined );
     return length;
}

Автор: Гость (не зарегистрирован), дата: 14 января, 2011 - 04:54
#permalink

А я бы просто не исполнялся в глобальной области.


Автор: I-zone, дата: 15 января, 2011 - 01:50
#permalink

И что же в глобальной области не так? Что даст углубление на один scope? Никакого отношения "глобальная область" к данной проблеме не имеет.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
6 + 4 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
HelpeR
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum