Получение элементов со страницы 

Заглавная страница
Избранные статьи
Случайная статья
Познавательные статьи
Новые добавления
Обратная связь

КАТЕГОРИИ:

Археология
Биология
Генетика
География
Информатика
История
Логика
Маркетинг
Математика
Менеджмент
Механика
Педагогика
Религия
Социология
Технологии
Физика
Философия
Финансы
Химия
Экология

ТОП 10 на сайте

Приготовление дезинфицирующих растворов различной концентрации

Техника нижней прямой подачи мяча.

Франко-прусская война (причины и последствия)

Организация работы процедурного кабинета

Смысловое и механическое запоминание, их место и роль в усвоении знаний

Коммуникативные барьеры и пути их преодоления

Обработка изделий медицинского назначения многократного применения

Образцы текста публицистического стиля

Четыре типа изменения баланса

Задачи с ответами для Всероссийской олимпиады по праву


Мы поможем в написании ваших работ!



ЗНАЕТЕ ЛИ ВЫ?

Влияние общества на человека

Приготовление дезинфицирующих растворов различной концентрации

Практические работы по географии для 6 класса

Организация работы процедурного кабинета

Изменения в неживой природе осенью

Уборка процедурного кабинета

Сольфеджио. Все правила по сольфеджио

Балочные системы. Определение реакций опор и моментов защемления

Получение элементов со страницы

⇐ ПредыдущаяСтр 7 из 15Следующая ⇒


https://learn.javascript.ru/css-selectors

https://habr.com/ru/post/336136/

DOM (document object modal) – объектная модель документа.       Old method:

const box = document.getElementById("box"); console.log(box);                        ---à const btns = document.getElementsByTagName("button"); console.log(btns); Получим HTMLcollection P[]-------> Для получения отдельного элемента button нужен i 1)document.getElementsByTagName("button")[1]; или 2) console.log(btns[1]); -> <button>2</button>   Вызов id Элемента

Если даже убрать все кнопки, кроме 1 и обратиться const btns = document.getElementsByTagName("button");

<div class="box" id="box"></div>

<button>1</button>

<button>2</button>

<button>3</button>

<button>4</button>

<button>5</button>

, то всё равно получим псевдо [] -

Нельзя обратиться к массиву для стилизации кнопки, нужно обращаться непосредственно к кнопке  

Также можно обращаться через class

const circle = document.getElementsByClassName("circle"); console.log(circle); 1. HTMLCollection(3) [div.circle, div.circle, div.circle] 1. 0: div.circle 2. 1: div.circle 3. 2: div.circle 4. length: 3 5. __proto__: HTMLCollection

Современный метод

document.querySelectorAll();  

() помещаем абсолютно любой CSS селектор: #id,.class, вложенность классов, псевдоклассы, атрибуты, комбинация всего этого + у этого псевдо[] есть метод forEach.

const hearts = document.querySelectorAll(".heart");

console.log(hearts);

 Нужно указывать что за элемент

 

Выведу в консоль все элементы p[]hearts

hearts.forEach(item => {

console.log(item);

});

 
     

 

const oneHearts = document.querySelector(".heart"); const oneCircle = document.querySelector(".circle"); const oneId = document.querySelector("#box"); const oneBtn = document.querySelector("button"); console.log(oneHearts); console.log(oneCircle); console.log(oneId); console.log(oneBtn); .querySelector – возвращает первый найденный элемент по условию. Удобно использовать, когда есть элемент с уникальным CSS селектором

Рабочая область:

<body>

<div class="box" id="box"></div>

<button>1</button>

<button>2</button>

<button>3</button>

<button>4</button>

<button>5</button>

 

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

 

<div class="wrapper">

<div class="heart"></div>

<div class="heart"></div>

<div class="heart"></div>

 

</div>

 

<script src="js/script.js"></script>

</body>

 

document- работает только внутри браузера

У него есть два метода, чтобы получать один элемент

document.getElementById(); document.querySelector();

- gives an element by id, use without #

- вытаскивает первый попавщийся элемент

Есть методы для получения p[]

getElementsByClassName

querySelectorAll

getElementsByTagName

   -. не ставим для класса -. нужна, ищем по типу селектора
     

 


⇐ Предыдущая234567891011Следующая ⇒

Поделиться:


Читайте также:


Организация работы процедурного кабинета
Статус республик в составе РФ
Понятие финансов, их функции и особенности
Сущность демографической политии


Последнее изменение этой страницы: 2021-07-18; просмотров: 40; Нарушение авторского права страницы; Мы поможем в написании вашей работы!

infopedia.su Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав. Обратная связь - 3.137.218.215 (0.006 с.)