DOM: работа с HTML-страницей
Большинство действий в javascript выполняется с HTML-страницей. В javascript страница представлена в виде объектной модели DOM (Document Object Model).
Любые действия со страницей требуют вызова соответствующего метода DOM.
Понимание, как работать с документом в модели DOM - краеугольный камень в javascript-программировании.
- Введение. DOM в примерах.
Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) - объектная модель, используемая для XML/HTML-документов.
Согласно DOM-модели, документ является иерархией.
Каждый HTML-тег образует отдельный элемент-узел, каждый фрагмент текста - текстовый элемент, и т.п. читать дальше »
- DOM: свойства VS атрибуты
У DOM-элементов в javascript есть свойства и атрибуты. И те и другие имеют имя и значение.
Поэтому иногда разработчики путают одно с другим.
Между ними есть соответствие, но оно не однозначное и его лучше понимать. читать дальше »
- Интерактивное путешествие по DOM
Здесь вы сможете побродить по DOM, посмотреть все элементы и проверить, все ли вы понимаете правильно. читать дальше »
- Поиск элементов в DOM
Стандарт DOM предусматривает несколько средств поиска элемента. Это методы getElementById, getElementsByTagName и getElementsByName.
Более мощные способы поиска предлагают javascript-библиотеки. читать дальше »
- Изменение страницы посредством DOM
Рассмотрим основные способы изменять DOM, вначале - в общих чертах, затем - на конкретном примере из жизни. читать дальше »
- Списки узлов DOM. Динамика в примере.
При поиске элементов в DOM надо помнить одну простую вещь: все списки узлов - не массивы Array, а специальные динамичные сущности DOMNodeList.
Какое это имеет значение? Разберем на примере. читать дальше »
|
Спасибо! Надо читать, и вам понравится! Написано очень живо, без лишнего занудства! Коротко и ясно! И красочно! По вопросам обращайтесь на форуме, вам там помогут, как помогли мне!
следующий код должен строить сетку при нажатии на кнопку, но вместо этого
каждый раз появляется только один квадрат
подскажите где ошибка
<style> .draw-field{ border: 1px dashed black; width: 100px; height: 100px; } .cell{ background-color: #ffffff; border: 1px solid black; width: 15px; height: 15px; display: inline-block; } </style><script type="text/javascript"> function CreateGrid(){ var DrawField = document.getElementById('draw-field'); var NewCell = document.createElement("div"); var CellX = document.getElementById('height').value; var CellY = document.getElementById('width').value; NewCell.setAttribute('class','cell'); CellX = parseInt(CellX); CellY = parseInt(CellY); for (var x=1; x<=CellX; x++) for (var y=1; y<=CellY; y++){ DrawField.appendChild(NewCell); } } </script><input id="width" size="5" value="3">x<input id="height" size="5" value="3"> <input type="button" onclick="CreateGrid()" value="GO"><br /><br /> <div class="draw-field" id="draw-field"></div>Очевидно же. У вас при создание новое ячейки никак независит от x и y. Вам нужно при создании ячейки , сделать зависимость от x и y.
спасибо,все понятно
for (i=1; i<=5; i=i-1)
{
document.write(i + "");
}
Хорошо
sps)
Отправить комментарий
Приветствуются комментарии:- Полезные.
- Дополняющие прочитанное.
- Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.Для остальных вопросов и обсуждений есть форум.