Перемещение по html-документу с помощью стандартных функций доступа.
По ID элемента и по имени:
document.getElementById("id")
document.getElementsByTagName("tagname")
Надо всегда выполнять проверку на null для getElementById:
var target = document.getElementById("sender");
if (target != null)
{
alert(target.nodeName);
}
а для getElementsByTagName - длину массива = 0:
var listItems = document.getElementsByTagName("li");
var numItems = listItems.length;
Первое время спотыкался в названии функции getElementByTagName вместо getElementsbyTagName и в правильном верхнем/нижнем регистрах названий функций. Напишешь вроде бы правильно - а ничего не работает...
Сужение списка элементов.
Получаем более общий список, а затем внутри применяем ту же функцию getElementsByTagName:
var lists = document.getElementsByTagName("ul");
var secondList = lists[1];
var secondListItems = secondList.getElementsByTagName("li");
Массив ВСЕХ элементов html страницы:
var elementArray = [];
if (typeof document.all != "undefined") {
elementArray = document.all;
}
else {
elementArray = document.getElementsByTagName("*");
}
Поиск элемента по имени класса.
Стандартной функции нет, поэтому разные библиотеки предлагают свои.Вот пример реализации:
Core.getElementsByClass = function(theClass) {
var elementArray = [];
if (document.all) {
elementArray = document.all;
} else {
elementArray = documentGetElementsByName("*");
}
var matchedArray = [];
var pattern = new RegExp("(^| )" + theClass + "( |$)");
for (var i = 0; i < elementArray.length; i++) {
if (pattern.test(elementArray[i].className)) {
matchedArray[matchedArray.length] = elementArray[i];
}
} return matchedArray;
};
Через свойства DOM элемента можно найти родительский элемент, дочерние, соседей:
var oliver = document.getElementById("oliver");
var paragraph = oliver.parentNode;
var child1 = paragraph.childNodes[0];
var alex = paragraph.firstChild;
var jone = paragraph.lastChild;
var tom = alex.nextSibling;
var ann = tom.previousSibling;
Для доступа, создания, манипуляций с частями документа консорциумом W3C была создана Document Object Model (DOM) - система, позволяющая скриптам воздействовать на документ. С её помощью javascript может не только изменять структуру документа, но и получать доступ к стилям документа и изменть его вид.
Как только браузер загрузил документ (просто как последовательность символов), он начинает разбирать его и сохраняет интерпретацию html-кода в виде дерева DOM.
Согласно этой модели, каждый элемент HTML- документа становится объектом.
Javascript может получить доступ к этим элементам с пом. встроенных функций на лету. DOM связывает каждый созданный объект для элемента HTML с соответствующим родителем/потомком.
Для построения DOM документа каждомый элемент в html представляется в виде node с позицией, определяемой нодами родителей/потомков. Каждый element node х-зуется именем элемента (head,body,h1,...), но это имя не уникально. Уникальность обеспечивается, например, атрибутом id. На вершине дерева всегда находится document node.
Кликнииличтобы увеличить/уменьшить изображение...
В перевод node - узел, но как-то звучит не очень. Буду исп. оригинальную терминологию. Element nodes - один из видов nodes, соответствующий элементам HTML. Однако действительный контент документа находится в других нодах - text nodes и attribute nodes.
Всё, что расположено между угловыми скобками ><, относится к text node в DOM.
Основное отличие от elemеnet nodes:text nodesне имеют потомков!
Следует обратить внимание, что пробелы, новая строка, возврат каретки могут образовывать text nodes. Такие text nodes по-разному обрабатываются разными браузерами.
Attribute nodes являются частью html элементов (element nodes). Но они не являются потомкамиelement nodes.
Скрипт выполняется сразу после его загрузки браузером.
Объявление переменных.
Безопаснее всегда использовать ключевое слово var при объявлении переменной.
Javascript не заботится о том, что хранится в переменной. Одна и таже переменная может хранить символ, затем число, затем снова текст или что-угодно.
Определены 4 типа переменых:
числа
строки
логический тип
массивы
объекты
Операторы ++ и --- как в Си:
age++;
--j;
Конкатенация строк:
var sentence = "You are " + 1337
Логические:
var lying = true;
var truthful = false;
function sandwich(bread, meat)
{
alert(bread + meat + bread);
}
sandwich("Rye", "Pastrami");
Также аргументы функции доступны через массив arguments:
debate("affirmative", "negative");
function debate()
{
var affirmative = arguments[0];
var negative = arguments[1];
}
Возврат значения из функции - return:
Область видимости переменых. Переменные, объявленные вне функции, доступны другим функциям javascript в пределах той же html-страницы. Это global scope.
С помощью ключевого слова var переменные обявляются внутри функции как local scope и доступны только внутри данной функции.
ОБЪЕКТЫ.
Представляют собой амальгаму всех других типов данных.
Объкты существуют как способ организации переменных и функций в логические группы. Свойства объекта предст. собой переменные, доступные только через объект. Методы - это функции, доступные только через объект.
Примером встроенного объекта является массив.
Создание объекта:
var Robot = new Object();
Теперь можно добавлять к объекту свойства и методы:
Robot.color ="red";
Robot.displayMessage = function() {
alert("Some message");
}; //обязательно точка запятой при таком объявлении!
Вызов: Robot.displayMessage();
Использование литерального синтаксиса объекта:
var Robot =
{
color: "red",
displayMessage: function()
{
alert("Some message");
}
}; //обязательно точка запятой !
Unobtrusive Scripting in the Real World
В большинстве случаев, практически всегда, код javascript загружается раньше кода всей html-страницы. Это может привести к некоторым незначительным проблемам. Браузеры выполняют код javascript сразу после его загрузки, не дожидаясь загрузки всей страницы. Если в коде есть обращение к элементов, которые ещё не загрузились, то можно не увидеть ожидаемого эффекта.
Для облегчения жизни создаётся специальный объект Core с методом start(), который наблюдает за статусом загрузки страницы и сообщает нашей функции, когда можно безопасно выполняться. Это делается вызовом метода init() нашего объекта.
Т.о., наш объект выглядит :
var Robot = {
init: function()
{ Your HTML modifying code
}
};
Core.start(Robot);
Грамотный подход в web-дизайне - использование 3-х уровней:
Content - HTML
Presentation - CSS
Behaviour - JavaScript
Другими словами, the separation of concerns (отделение мух от котлет...).
Раздельное хранение этих 3-х типов кода - упрощает повторное использование, сокращает дублирование и облегчает поиск ошибок. Javascript изнутри значительно больше, чем он кажется снаружи - как Tardis языков программирования.
