- Автоматизация
- Антропология
- Археология
- Архитектура
- Биология
- Ботаника
- Бухгалтерия
- Военная наука
- Генетика
- География
- Геология
- Демография
- Деревообработка
- Журналистика
- Зоология
- Изобретательство
- Информатика
- Искусство
- История
- Кинематография
- Компьютеризация
- Косметика
- Кулинария
- Культура
- Лексикология
- Лингвистика
- Литература
- Логика
- Маркетинг
- Математика
- Материаловедение
- Медицина
- Менеджмент
- Металлургия
- Метрология
- Механика
- Музыка
- Науковедение
- Образование
- Охрана Труда
- Педагогика
- Полиграфия
- Политология
- Право
- Предпринимательство
- Приборостроение
- Программирование
- Производство
- Промышленность
- Психология
- Радиосвязь
- Религия
- Риторика
- Социология
- Спорт
- Стандартизация
- Статистика
- Строительство
- Технологии
- Торговля
- Транспорт
- Фармакология
- Физика
- Физиология
- Философия
- Финансы
- Химия
- Хозяйство
- Черчение
- Экология
- Экономика
- Электроника
- Электротехника
- Энергетика
Поиск элементов
Поиск элементов
Для поиска элементов на странице применяются следующие методы:
getElementById(value): выбирает элемент, у которого атрибут id равен value
getElementsByTagName(value): выбирает все элементы, у которых тег равен value
getElementsByClassName(value): выбирает все элементы, которые имеют класс value
querySelector(value): выбирает первый элемент, который соответствует css-селектору value
querySelectorAll(value): выбирает все элементы, которые соответствуют css-селектору value
Например, найдем элемент по id:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div>
<h3 id="header">Block Header</h3>
<p>Text</p>
</div>
<script>
let headerElement = document.getElementById("header");
document.write("Текст заголовка: " + headerElement.innerText);
</script>
</body>
</html>
С помощью вызова document.getElementById("header") находим элемент, у которого id="header". А с помощью свойства innerText можно получить текст найденного элемента.
Поиск по определенному тегу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div>
<h3>Заголовок</h3>
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
let pElements = document.getElementsByTagName("p");
for (let i = 0; i < pElements.length; i++) {
document.write("Текст параграфа: " + pElements[i].innerText + "<br/>");
}
</script>
</body>
</html>
С помощью вызова document.getElementsByTagName("p") находим все элементы параграфов. Этот вызов возвращает массив найденных элементов. Поэтому, чтобы получить отдельные элементы массива, необходимо пробежаться по ним в цикле.
Если нам надо получить только первый элемент, то можно обратиться к первому элементу найденной коллекции объектов:
let pElement = document.getElementsByTagName("p")[0];
document.write("Текст параграфа: " + pElement.innerText);
Получение элемента по классу:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="article">
<h3>Заголовок статьи</h3>
<p class="text">Первый абзац</p>
<p class="text">Второй абзац</p>
</div>
<script>
let articleDiv = document.getElementsByClassName("article")[0];
console.log(articleDiv);
let textElems = document.getElementsByClassName("text");
for (let i = 0; i < textElems.length; i++) {
console.log(textElems[i]);
}
</script>
</body>
</html>
Выбор по селектору css:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="annotation">
<p>Аннотация статьи</p>
</div>
<div class="text">
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
let elem = document.querySelector(".annotation p");
document.write("Текст селектора: " + elem.innerText);
</script>
</body>
</html>
Выражение document.querySelector(".annotation p") находит элемент, который соответствует селектору .annotation p. Если на странице несколько элементов, соответствующих селектору, то метод выберет первый из них. В итоге браузер выведет:
Аннотация статьи
Первый абзац
Второй абзац
Текст селектора: Аннотация статьи
Чтобы получить все элементы по селектору, можно подобным образом использовать метод document.querySelectorAll, который возвращает массив найденных элементов:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="annotation">
<p>Аннотация статьи</p>
</div>
<div class="text">
<p>Первый абзац</p>
<p>Второй абзац</p>
</div>
<script>
let elems = document.querySelectorAll(".text p");
for (let i = 0; i < elems.length; i++) {
document.write("Текст селектора " + i + ": " + elems[i].innerText + "<br/>");
}
</script>
</body>
</html>
Вывод браузера:
Аннотация статьи
Первый абзац
Второй абзац
Текст селектора 0: Первый абзац
Текст селектора 1: Второй абзац
Задание
Повторите несколько примеров, приведенных выше в теоретической части. Проверьте на наличие ошибок и соответствие вывода браузера.
|
|
|
© helpiks.su При использовании или копировании материалов прямая ссылка на сайт обязательна.
|