Селекторы DOM
Часть 12
В отличие от объекта окна, который выглядит как объект со свойствами и методами, DOM - документ выглядит как HTML.
Это потому, что веб-браузеры просто скрывают тот факт, что это объект. Представление, которое они дают нам, позволяет нам лучше поиграть с DOM; тем не менее DOM - это объект Javascript.
Селекторы позволяют нам выбирать различные элементы для управления DOM. Мы рассмотрим самые полезные / самые знакомые.
1. getElementsByTagName.
Как следует из названия, он принимает имя тега.
С помощью имени тега я выбираю тег, который хочу выделить.
Если я хочу выбрать тег H1:
Я получаю тег H1.
2. document.getElementsbyClassName
В индексном файле у меня есть класс второй в втором абзаце, в котором говорится: никаких оправданий.
3. getElementById
getElementById не имеет множественного числа, потому что у вас может быть только один идентификатор.
Эти три селектора очень полезны; но есть даже лучше.
4. document.querySelector
Здесь я могу выбирать элементы, как в CSS. Например, если я хотел выбрать H1:
Если бы я хотел выбрать ul:
Or li:
5. document.querySelectorAll
..но похоже, что у меня только первая - записная книжка. Это связано с тем, что Селектор запросов выбирает первый найденный элемент. С другой стороны, если я выполняю querySelectorAll, он выбирает их все:
Чтобы показать вам, что он работает с любыми селекторами CSS, если я использую li и H1:
6. document.getAttribute
Если бы я хотел получить случайное 23 число из первого Ли, мне бы сначала пришлось его выбрать:
Но помните, что мы должны где-то хранить его, поэтому я мог либо передать его переменной и где-нибудь сохранить, либо просто сказать getAttribute random:
И я получаю 123.
Итак, getAttribute может быть любым. Вы можете представить себе тег изображения, который имеет ширину и высоту, и, возможно, вы хотите получить ширину и высоту, чтобы увидеть, какие значения у них есть.
7. setAttribute
Мы можем выбрать случайно и заменить 123 на 2000.
А что, если бы я хотел изменить, например, стиль.
Первый способ изменить свой стиль - просто использовать тег стиля. Выберем тег H1. H1 имеет свойство стиля, как и все элементы на веб-странице. Мы делаем element.style, как показано ниже.
Давайте изменим цвет текста.
Мы только что изменили цвет текста на красный!
Но мы хотим иметь такое разделение HTML, чтобы сосредоточиться на тексте, CSS, чтобы сосредоточиться на стиле, и Javascript для действий (разделение проблем).
Так что же может быть лучше для изменения стилей, чем style. {Property}?
Теперь я добавил новый курс в свой H1. Если я выберу свой H1, вы увидите, что у меня есть класс под названием cssselector.
classList
Допустим, я хотел добавить класс к Ли. скажу:
Итак, теперь у нас есть два предмета класса.
Этот список классов дает нам несколько методов, которые мы можем использовать, например:
Добавить, Удалить, Переключить.
Еще несколько:
innerHTML
Я только что изменил innerHTML для H1, чтобы он имел сильный тег с восклицательными знаками.
parentElement и дети
Селекторы и переменные кеша.
Каждый раз, когда мы выбираем что-то новое, что хотим использовать, это расходует память. Веб-браузер выполняет действия снова и снова, когда все, что нам нужно сделать, это присвоить переменную. Например :
Так что теперь, когда мне нужно использовать H1, веб-браузеру не нужно искать в DOM, чтобы найти H1, а затем сохранить его в памяти; у нас есть H1, пока мы не обновим страницу, чтобы веб-браузеры заработали.
Вот что означает Cache Selectors.
