Марк Кан - Основы программирования на JavaScript

Вот и все! Теперь у нас есть новый элемент TR , и он находится на странице. Осталось пояснить еще пару моментов. Чтобы форма была обработана правильно, все поля ввода должны иметь различные имена. Поэтому мы задаем имя двух полей ввода на основе счетчика (21-22), а затем увеличиваем счетчик (31). Это делается с помощью еще одной новой функции setAttribute , которая имеет два параметра: имя атрибута и значение атрибута. Для нее существует дополнительная функция getAttribute , которая имеет только один аргумент: имя атрибута, значение которого надо получить.

element.setAttribute("name", "elementName")

по сути то же самое, что

element.name="elementName"

Однако задание атрибута непосредственно, как в предыдущем примере, может иногда вызывать некоторые проблемы для различных браузеров или для некоторых специфических атрибутов. Поэтому хотя любой метод обычно будет работать, предпочтительным является первый метод, использующий setAttribute .

Необходимо также позаботиться о кнопке удаления. Мы уже знаем, что кнопка удаления для первой строки полей не создается, но необходимо заставить ее работать для всех остальных. Это делается в строках кода 15-16. Здесь к изображению добавлена функция onclick , которая вызывает функцию removeContact , передавая элемент TR в качестве единственного аргумента.

Взглянув на функцию removeContact , можно видеть, что сначала происходит обращение tr.parentNode к функции parentNode , которая является еще одной функцией для работы с DOM . Она просто возвращает порождающий элемент для текущего элемента. Если посмотреть на изображенное ранее дерево документа, то видно, что parentNode вернет элемент непосредственно над элементом, на котором он вызван. Поэтому, если вызвать parentNode на одиночном элементе A в этом дереве, то будет получена ссылка на элемент TD над ним.

Поэтому tr.parentNode возвращает ссылку на элемент TABLE над TR . Затем вызывается функция removeChild на этом элементе TABLE , которая просто удаляет у предка указанного потомка.

Взглянув еще раз на строку 34, можно теперь увидеть, что она просто говорит: " Удалить элемент TR у его предка " или еще проще " Удалить элемент TR ".

Ко всем потомкам элемента можно обратиться с помощью атрибута childNodes , который возвращает массив, содержащий все узлы потомки текущего элемента. Можно также использовать атрибуты firstChild и lastChild на любом элементе, чтобы получить ссылки на первый или на последний элемент.

Чтобы увидеть, как это работает, давайте напишем сценарий для раскраски чередующихся строк TR в таблице:

function setColors(tbody, color1, color2){

var colors = [color1, color2];

var counter = 0;

var tr = tbody.firstChild;

while(tr){

tr.style.backgroundColor = colors[counter++ % 2];

tr = tr.nextSibling;

}

}

Демонстрация

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Color #1: Color #2: Раскрасьте таблицу

При рассмотрении этого небольшого фрагмента кода мало что нужно пояснять в том, как можно получить этот интересный небольшой эффект. Код начинается с получения ссылки на первый элемент TR в таблице с помощью метода firstChild . Затем каждый TR раскрашивается по очереди двумя разными цветами, используя tr.style . Цвет фона задается одним из двух цветов из массива colors . Если counter имеет четное значение, то цвет фона задается как color1 . Иначе он задается как color2 . Это реализуется с помощью оператора деления по модулю ( % ). Для тех, кто забыл, напомним, что операция вычисляет остаток при делении. 5/2 = 2 с остатком 1 . Поэтому 5 % 2 (5 по модулю 2) = 1 .

Здесь не будет обсуждаться в данный момент изменение стилей, но достаточно сказать, что element.style предоставляет доступ ко всему, что можно задать с помощью таблицы стилей. Если нужно, например, задать стиль элемента, то можно прочитать/записать весь стиль с помощью element.style.cssText .

После задания цвета фона берется следующий элемент TR в таблице. Это делается с помощью функции nextSibling , которая возвращает следующий элемент в DOM , с тем же предком, что и текущий элемент. Если посмотреть на тег TABLE , то все его потомки являются элементами TR , поэтому nextSibling будет в цикле перебирать все элементы TR . Если отыскивается элемент TR с потомками, состоящими из элементов TD , то nextSibling будет циклически перебирать все элементы TD . Когда элементов TR больше не останется, цикл автоматически закончится, так как TR будет неопределенным, что в JavaScript оценивается как false .