Как быстро приступить к работе с VUE3.0: Начало обучения
Рекомендации по теме: Учебное пособие по JavaScript
1. Получитерабочих элементов.
Объект документа предоставляет некоторые методы для поиска элементов. Эти методы можно использовать для поиска элементов. на основе их идентификатора, имени и класса. Получите элемент операции через атрибуты и имена тегов.
Описание:
за исключением того, что метод document.getElementById() возвращает элемент с указанным идентификатором, другие методы возвращают коллекцию, соответствующую требованиям. Чтобы получить один из объектов, вы можете получить его по индексу, который по умолчанию начинается с 0.
Объект документа предоставляет некоторые свойства, которые можно использовать для получения элементов в документе. Например, получите все теги форм, теги изображений и т. д.
Обратите внимание, что
элементы операции, полученные с помощью методов объекта документа, и свойств объекта документа представляют один и тот же объект. Например, document.getElementsByTagName('body')[0] соответствует document.body.
Новые методы объекта документа HTML5
Чтобы упростить получение элементов для работы, HTML5 добавляет к объекту документа два новых метода, а именно querySelector() и querySelectorAll().
Поскольку эти два метода используются одинаково, в качестве примера используется метод document.querySelector().
В операциях DOM объекты элементов также предоставляют методы для получения указанных элементов внутри элемента. Два наиболее часто используемых метода — это getElementsByClassName() и getElementsByTagName(). Они используются так же, как одноименные методы в объекте документа.
Кроме того, объект элемента также предоставляет атрибут Children для получения дочерних элементов указанного элемента. Например, получите дочерние элементы ul в приведенном выше примере.
Объект HTMLCollection
Разница между объектами HTMLCollection и NodeList:
Совет: Для коллекции, возвращаемой методом getElementsByClassName(), методом getElementsByTagName() и дочерним атрибутом, идентификатор и имя могут быть автоматически преобразованы в атрибут.
2. Содержимое элемента.
В JavaScript, если вы хотите работать с полученным содержимым элемента, вы можете использовать свойства и методы, предоставляемые DOM.
Приведите пример
Реализация кода
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="UTF-8">
<title>Операции с содержимым элемента</title>
</голова>
<тело>
<p id="box">
Первый абзац...
<р>
Второй абзац...
<a href="http://www.example.com">третий</a>
</p>
</p>
<скрипт>
var box = document.getElementById('box');
console.log(box.innerHTML);
console.log(box.innerText);
console.log(box.textContent);
</скрипт>
</тело>
</html> Обратите внимание, что
при использовании атрибута InsideText могут возникнуть проблемы с совместимостью браузера. Поэтому рекомендуется
использовать внутренний HTML, чтобы получить или установить как можно больше текстового содержимого элементов во время разработки. В то же время существуют определенные различия между атрибутом InnerHTML и методом document.write() при настройке содержимого. Первый воздействует на указанный элемент, а второй реконструирует всю страницу HTML-документа. Поэтому читатели должны выбрать подходящий метод реализации в соответствии с фактическими потребностями во время разработки.
[Случай] Изменение размера коробки.
Идеи реализации кода :
① Напишите HTML и установите размер p.
② Завершите изменение размера окна в соответствии с количеством кликов пользователя.
③ Если количество щелчков нечетное, поле становится больше; если количество щелчков четное, поле становится меньше.
Реализация кода
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="UTF-8">
<стиль>
.box{ширина:50 пикселей;высота:50 пикселей;фон:#eee;поля:0 авто;}
</стиль>
</голова>
<тело>
<p id="box" class="box"></p>
<скрипт>
var box = document.getElementById('box');
var i = 0; // Сохраняем количество кликов пользователя по полю box.onclick = function() { // Обрабатываем событие щелчка по полю ++i;
if (i % 2) { // Количество кликов является нечетным числом и становится больше this.style.width = '200px';
this.style.height = '200 пикселей';
this.innerHTML = 'большой';
} else { // Число кликов четное и становится меньше this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = 'маленький';
}
};
</скрипт>
</тело>
</html> 3. Атрибуты элемента
В DOM, чтобы облегчить JavaScript для получения, изменения и просмотра соответствующих атрибутов указанного элемента HTML, предусмотрены атрибуты операций и методы.
Вы можете использовать атрибут атрибутов, чтобы получить все атрибуты элемента HTML, а также количество всех атрибутов и длину.
Приведите пример
Реализация кода
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="UTF-8">
<title>Операции с атрибутами элемента</title>
<стиль>
.gray{фон: #CCC;}
#thick{font-weight: жирнее;}
</стиль>
</голова>
<тело>
<p>проверочное слово.</p>
<скрипт>
// Получаем элемент p var ele = document.getElementsByTagName('p')[0];
// ① Вывести количество атрибутов текущего элемента console.log('Количество атрибутов до операции: ' + ele.attributes.length);
// ② Добавляем атрибуты в ele и проверяем количество атрибутов ele.setAttribute('align', 'center');
ele.setAttribute('title', 'Тестовый текст');
ele.setAttribute('класс', 'серый');
ele.setAttribute('id', 'толстый');
ele.setAttribute('style', 'font-size:24px;border:1px сплошной зеленый;');
console.log('Количество атрибутов после добавления атрибутов: ' + ele.attributes.length);
// ③ Получить значение атрибута стиля ele console.log('Получить значение атрибута стиля:' + ele.getAttribute('style'));
// ④ Удаляем атрибут стиля ele и проверяем оставшиеся атрибуты ele.removeAttribute('style');
console.log('Просмотреть все свойства:');
for (var i = 0; i <ele.attributes.length; ++i) {
console.log(ele.attributes[i]);
}
</скрипт>
</тело>
</html> 4. Проверка стиля элемента
: изменение стиля с помощью атрибутов элемента.
Синтаксис стиля элемента: стиль.Имя атрибута.
Требование: вам необходимо удалить дефис «-» в названии стиля CSS и сделать вторую английскую букву заглавной.
Пример: Чтобы установить цвет фона, фоновый цвет необходимо изменить на фоновый цвет в операции атрибута стиля.
Обратите внимание, что
стиль float в CSS конфликтует с зарезервированными словами JavaScript, и в разных браузерах есть разные решения
. Например, IE9-11, Chrome и FireFox могут использовать «float» и «cssFloat», браузер Safari использует «float», а IE6~8 использует «styleFloat».
Вопрос: Элемент может иметь несколько селекторов классов. Как работать со списком селекторов во время разработки?
Исходное решение: используйте атрибут className объекта элемента для получения результата. Полученный результат представляет собой символьный тип, а затем обработайте строку в соответствии с реальной ситуацией.
Метод, предоставляемый HTML5: список выбора классов нового элемента classList (только для чтения).
Например: если значением класса элемента p является «заголовок списка навигации заголовка поля», как удалить заголовок?
Решение HTML5:например
, p element object.classList.toggle("header");
Реализация кода
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="UTF-8">
<title>Использование списка классов</title>
<стиль>
.bg{фон:#ccc;}
.strong{размер шрифта:24px;цвет:красный;}
.smooth{высота: 30 пикселей; ширина: 120 пикселей; радиус границы: 10 пикселей;}
</стиль>
</голова>
<тело>
<ул>
<li>PHP</li>
<li class="bg">JavaScript</li>
<li>С++</li>
<li>Ява</li>
</ul>
<script> // Получаем второй элемент li var ele = document.getElementsByTagName('li')[1] // Если в элементе li нет строгого класса, добавьте if (!ele.classList.contains('strong) ' )) { ele.classList.add('strong'); } // Если в элементе li нет класса Smooth, добавьте его; если он удален, ele.classList.toggle('smooth'); log('Добавить и переключить стиль After: '); console.log(ele </script>);
<скрипт>
ele.classList.remove('bg');
console.log('После удаления:');
console.log(еле);
</скрипт>
</тело>
</html> Кроме того, атрибут classList также предоставляет множество других связанных методов и свойств.
5. [Кейс] Эффект переключения панели вкладок
Идеи реализации кода :
① Напишите HTML для разработки структуры и стиля панели вкладок, где класс равен текущему, чтобы указать отображаемую в данный момент вкладку, а значением по умолчанию является первая вкладка.
② Получить все теги и отображаемый контент, соответствующий тегам.
③ Перейдите и добавьте событие наведения курсора мыши для каждой метки. В функции обработки событий пройдите по всему отображаемому содержимому, соответствующему метке. Когда указатель мыши скользит по метке, добавьте текущий метод add() классаList, в противном случае используйте. Remove() Метод выходит из текущего.
Реализация кода
<!DOCTYPE html>
<html>
<голова>
<мета-кодировка="UTF-8">
<title>Эффект переключения панели вкладок</title>
<стиль>
.tab-box{ширина:383px;margin:10px;border:1px сплошной #ccc;border-top:2px сплошной #206F96;}
.tab-head{высота:31px;}
.tab-head-p{ширина:95 пикселей;высота:30 пикселей;float:left;border-bottom:1px Solid #ccc;border-right:1px Solid #ccc;background:#206F96;line-height:30px;text- выровнять:центр;курсор:указатель;цвет:#fff;}
.tab-head .current{background:#fff;border-bottom:1px сплошной #fff;цвет:#000;}
.tab-head-r{border-right:0;}
.tab-body-p{display:none;margin:20px 10px;}
.tab-body .current{display:block;}
</стиль>
</голова>
<тело>
<p class="tab-box">
<p class="tab-head">
<p class="tab-head-p current">Первая вкладка</p>
<p class="tab-head-p">Вкладка 2</p>
<p class="tab-head-p">Третья вкладка</p>
<p class="tab-head-p tab-head-r">Четвертая вкладка</p>
</p>
<!--jkdjfk?-->
<p class="tab-body">
<p class="tab-body-p current"> 1 </p>
<p class="tab-body-p"> 2 </p>
<p class="tab-body-p"> 3 </p>
<p class="tab-body-p"> 4 </p>
</p>
</p>
<скрипт>
// Получаем все объекты элементов табуляции панели вкладок var tabs = document.getElementsByClassName('tab-head-p');
// Получаем все объекты содержимого панели вкладок var ps = document.getElementsByClassName('tab-body-p');
for (var i = 0; i < tabs.length; ++i) { // Обходим объект элемента tabs[i].onmouseover = function() { // Добавляем событие наведения курсора мыши на объект элемента тега for ( var i = 0; i < ps.length; ++i) { // Обходим объект элемента содержимого панели вкладок if (tabs[i] == this) { // Отображаем элемент li ps[i], на котором находится текущая мышь проскользнул над .classList.add('current');
tabs[i].classList.add('текущий');
} else { // Скрываем другие элементы li ps[i].classList.remove('current');
tabs[i].classList.remove('текущий');
}
}
};
}
</скрипт>
</тело>
</html> Рекомендации по теме: учебник по javascript
Выше приведено подробное содержание операций с HTML-элементами, подробно объясненное на примерах JavaScript. Для получения дополнительной информации обратите внимание на другие соответствующие статьи на китайском веб-сайте php!
