Перемещение по 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;
Отправить комментарий