Последние учебники веб-разработки
×

JS Руководство

JS ГЛАВНАЯ JS Введение JS Куда JS Вывод JS Синтаксис JS Заявления JS Комментарии JS переменные JS операторы JS арифметика JS присваивание JS Типы данных JS функции JS Объекты JS Объем JS Мероприятия JS Строки JS Методы струнных JS чисел JS Методы Number JS математический JS Даты JS Форматы даты JS Методы Дата JS Массивы JS Методы массивов JS Booleans JS Сравнения JS условия JS переключатель JS петля For JS В то время как Loop JS Ломать JS Тип преобразования JS RegExp JS ошибки JS отладка JS Подъемно JS Строгий режим JS Гид по стилю JS Лучшие практики JS Ошибки JS Представление JS Зарезервированные слова JS JSON

JS формы

Формы проверки Формы API

JS объект

Определения объектов Свойства объекта Методы объекта Прототипы объектов

JS функции

Определения функций Функциональные параметры Функция Призвание Функция Затворы

JS HTML DOM

DOM вступление DOM методы DOM Документ DOM элементы DOM HTML DOM CSS DOM Анимации DOM Мероприятия DOM EventListener DOM навигация DOM Вершины DOM Nodelist

JS браузер BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Примеры

JS Примеры JS HTML DOM JS HTML вход JS HTML Объекты JS HTML Мероприятия JS браузер JS викторина JS Резюме

JS Рекомендации

JavaScript Объекты HTML DOM Объекты


 

JavaScript HTML DOM элементы

❮ Предыдущая Следующая Глава ❯

Эта страница научит вас, как найти и доступ к HTML-элементы в HTML-страницы.

Обнаружение HTML Elements

Часто, с JavaScript, вы хотите, чтобы манипулировать HTML-элементов.

Для этого вы должны найти элементы в первую очередь. Есть несколько способов сделать это:

  • Обнаружение HTML - элементов по id
  • Обнаружение HTML-элементов по имени тега
  • Обнаружение HTML - элементов с помощью class имени
  • Обнаружение HTML-элементов с помощью CSS селекторов
  • Обнаружение HTML-элементов с помощью наборов объектов HTML

Нахождение элемента HTML с помощью Id

Самый простой способ найти HTML - элемент в DOM, является использование элемента id .

Этот пример находит элемент с id="intro" :

пример

var myElement = document.getElementById("intro");
Попробуй сам "

Если элемент найден, то метод возвращает элемент как объект (в myElement ).

Если элемент не найден, myElement будет содержать нуль.

Обнаружение HTML-элементов по имени тега

Этот пример находит все <p> элементы:

пример

var x = document.getElementsByTagName("p");
Попробуй сам "

Этот пример находит элемент с id="main" , а затем находит все <p> элементы внутри "main" :

пример

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Попробуй сам "

Обнаружение HTML - элементов по Class Name

Если вы хотите , чтобы найти все HTML элементы с одинаковым class именем, используйте getElementsByClassName() .

Этот пример возвращает список всех элементов с class="intro" .

пример

var x = document.getElementsByClassName("intro");
Попробуй сам "

Поиск элементов по имени класса не работает в Internet Explorer 8 и более ранних версий.

Обнаружение HTML-элементов по CSS селекторов

Если вы хотите , чтобы найти все элементы HTML, соответствующий заданному селектор CSS ( id , имена классов, типы, атрибуты, значения атрибутов и т.д.), используйте querySelectorAll() метод.

Этот пример возвращает список всех <p> элементов с class="intro" .

пример

var x = document.querySelectorAll("p.intro");
Попробуй сам "

querySelectorAll() метод не работает в Internet Explorer 8 и более ранних версий.

Обнаружение HTML-элементов по коллекции объектов HTML

Этот пример находит элемент формы с id="frm1" , в коллекции форм, и отображает все значения элементов:

пример

var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Попробуй сам "

Следующие объекты HTML (и коллекции объектов) также доступны:

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »


❮ Предыдущая Следующая Глава ❯