Сначала давайте обсудим разницу между HTML и DOM.
Очевидно, рядовой<table>Элемент — это фрагмент HTML-кода, который можно использовать в любом файле с расширением .html. Элемент поставляется с набором атрибутов, которые управляют его внешним видом и поведением.
Вот что такое элемент, он не имеет ничего общего с JavaScript.
Роль DOM заключается в том, чтобы связать ваш код JavaScript с элементами HTML в документе, позволяя вам взаимодействовать с этими элементами как с объектами.
Это называется объектной моделью документа.
Каждый элемент в HTML соответствует «интерфейсу» DOM, который определяет несколько свойств (свойств, обычно отображаемых в атрибуты элементов HTML) и методов. Например,<table>Элемент соответствует интерфейсу HTMLTableElement.
Вы можете получить ссылку на элемент следующим образом:
const searchBox = document.getElementById('search-box');скопировать кодТеперь вы можете получить доступ ко всем свойствам и методам, определенным для этого элемента. Например, вы можете получить доступ к его свойству value через searchBox.value или вызвать метод searchBox.focus(), чтобы переместить курсор в поле ввода.
Спасибо, что прошли этот 58-секундный вводный курс обучения DOM, ха-ха.
Проблема сейчас в том, что большинство элементов не предоставляют никаких интересных методов. Поэтому, если вы специально не обращаетесь к официальным спецификациям документации для поиска вещей, которые вы, возможно, никогда не используете, легко упустить из виду странные маленькие хитрости.
К счастью, просмотр спецификаций и советы по организации — лишь два из моих любимых способов избежать неприятностей. Итак, приступим...
Если вы также хотите попробовать эти трюки, и у вас есть доступ к некоторым браузерным DevTools, вы можете сначала выбрать элемент в структуре дерева элементов, а затем ввести в консоли$0, который возвращает вам ссылку на выбранный элемент. Если вам нужно вернуть объект элемента, введитеdir($0).
В консоли можно реализовать различные богатые функции.
1. Метод таблицыИсходный элемент таблицы (до сих пор являющийся методом веб-макетирования № 1) имеет множество собственных изящных методов, и использовать эти методы для создания таблицы так же просто, как построить таблицу IKEA.
Вот несколько полезных методов:
const tableEl = document.querySelector('table');
const headRow = tableEl.createHead().insertRow();
headerRow.insertCell().textContent = 'Make';
headerRow.insertCell().textContent = 'Model';
headerRow.insertCell().textContent = 'Color';
const newRow = tableEl.insertRow();
newRow.insertCell().textContent = 'Yes';
newRow.insertCell().textContent = 'No';
newRow.insertCell().textContent = 'Thank you';скопировать кодСовершенно нет необходимости использовать метод document.createElement() во всем коде.
Если вы вызовете метод .insertRow() непосредственно для элемента таблицы, он даже автоматически вставит<tbody>Элементы, разве это не здорово?
вы знаете? Когда URL-адрес страницы содержит элемент #something, браузер автоматически прокручивается до элемента с этим идентификатором после загрузки страницы.
Это хорошая функция, но она не работает, если вы визуализируете элементы после загрузки страницы.
Однако вы также можете повторно активировать эту функцию вручную, выполнив следующие действия:
document.querySelector(document.location.hash).scrollIntoView();скопировать кодНу, скрытый может и не быть методом, но если вы будете возражать, я тоже поспорю: вероятно, за скрытым стоит сеттер, который является настоящим методом, верно?
В любом случае, вы когда-нибудь использовали myElement.style.display = 'none', чтобы скрыть элемент? Если да, пожалуйста, не делайте этого снова!
Просто вызовите myElement.hidden = true, вы можете реализовать функцию скрытия элемента.
4.toggle()Ну, toggle также не является методом элемента, на самом деле это метод свойства элемента. Строго говоря, это способ добавить или удалить класс из элемента, как myElement.classList.toggle('some-class') .
Если вы когда-либо добавляли класс к элементу с помощью условного оператора if, пришло время переключиться на эту практику.
Правильный способ — передать методу toggle второй параметр, если параметр возвращает true, указанный класс будет добавлен к элементу.
el.classList.toggle('some-orange-class', theme === 'orange');скопировать кодЯ знаю, о чем вы думаете: такой способ написания противоречит самому смыслу слова 'toggle' (переключатель), поскольку так думают разработчики времен IE, и они утверждают, что от использования второго параметра следует отказаться совсем .
Итак, беру свои слова обратно. Не настаивайте на таком способе написания, пожалуйста, не стесняйтесь!
5.querySelector()Ну, конечно, вы знаете этот метод, но я предполагаю, что только 17% разработчиков знают, что этот метод можно использовать для любого элемента.
Например, myElement.querySelector('.my-class') возвращает все элементы, которые содержат класс my-class в дочерних элементах myElement.
6.closestЭтот метод можно использовать для любого элемента, он может искать древовидную структуру элемента, что можно понимать как метод, противоположный методу querySelector(). Итак, я могу получить соответствующий заголовок текущего контента:
myElement.closest('article').querySelector('h1');скопировать кодЭтот метод сначала находит ближайший вверх<article>элемент, затем вниз к ближайшему<h1>элемент.
Когда этот метод вызывается для элемента DOM, он возвращает простой объект, содержащий сведения о его пространственной структуре.
{
x: 604.875,
y: 1312,
width: 701.625,
height: 31,
top: 1312,
right: 1306.5,
bottom: 1343,
left: 604.875
}скопировать кодОднако при вызове этого метода следует помнить о двух вещах:
-
Вызов этого метода приведет к перерисовке элемента, что может занять несколько миллисекунд в зависимости от устройства и сложности страницы. Поэтому, если вам нужно неоднократно вызывать этот метод, например, в сценариях с использованием анимации, вам нужно обратить на это особое внимание.
-
Не все браузеры возвращают эти значения, несут ли они за это ответственность?
Предположим, мне нужно проверить, включает ли элемент определенный класс.
Это самый сложный способ:
if (myElement.className.indexOf('some-class') > -1) {
// do something
}скопировать кодНемного лучше, чем выше, но не относится к этой статье:
Лучший способ:
if (myElement.matches('.some-class')) {
// do something
}скопировать кодЯ только сегодня узнал об этом! Он действует как appendChild(), но обеспечивает больший контроль над тем, куда вставлять дочерние элементы.
parentEl.insertAdjacentElement('beforeend', newEl) имеет ту же функцию, что и parentEl.appendChild(newEl), но, кроме того, вы также можете указать параметры beforebegin, afterbegin или afterend, и элемент будет изменен в соответствии с этими значениями. Вставьте в соответствующую позицию, указанную в названии.
Какой мощный контроль!
10.contains()Вы когда-нибудь были в ситуации, когда вам нужно знать, содержится ли элемент внутри другого элемента? По крайней мере я сам часто сталкиваюсь с этой проблемой.
Например, предположим, что я обрабатываю щелчок мышью и мне нужно знать, произошло ли это в модальном окне или за его пределами (чтобы я мог закрыть окно), я бы, вероятно, сделал что-то вроде этого:
const handleClick = e => {
if (!modalEl.contains(e.target)) modalEl.hidden = true;
};скопировать кодmodalEl в коде является ссылкой на модальное окно, а e.target представляет различные элементы, которые имеют события щелчка.
Интересно, что всякий раз, когда я сталкиваюсь с этой ситуацией, когда я пишу код в первый раз, есть 100% вероятность того, что логика суждения будет обратной.
Даже если я буду бдителен и попытаюсь изменить логику перед сохранением кода, это все равно будет ошибкой.
11.getAttribute()Это, без сомнения, наименее полезный из всех методов элементов, за одним исключением.
Помните, я упомянул в начале этой статьи, что свойство свойства объекта обычно сопоставляется с его атрибутом атрибута (выше я выделил это жирным шрифтом, а не курсивом)?
Но в определенном сценарии это предположение не выполняется, это свойство href элемента, например<a href="/animals/cat">Cat</a>.
Вызов el.href не возвращает /animals/cat, что может не совпадать с вашим предположением. Причина в том, что элемент реализует интерфейс HTMLHyperlinkElementUtils, который предоставляет ряд вспомогательных свойств, таких как prototol и hash и т. д., для представления значений, связанных с целью ссылки.
Одним из полезных свойств является href, которое возвращает полный URL-адрес, лишенный нежелательных пробелов, вместо того, чтобы возвращать относительный URL-адрес, указанный в атрибуте.
Таким образом, если вам нужно получить значение строкового литерала в атрибуте href, вы можете использовать только метод el.getAttribute('href').
12. Три волшебных оружия диалоговых элементов<dialog>Относительно новый элемент, он предлагает два работающих метода и один действительно крутой. Функции методов show() и close() такие, как вы себе представляли, и я думаю, что они в порядке.
И метод showModal() может<dialog>Элемент отображается на верхнем уровне страницы с выравниванием по центру, что является ожидаемым поведением модального окна. Вам не нужно указывать z-индекс или вручную добавлять серый фон, и вам не нужно слушать клавишу esc, чтобы закрыть это окно. Браузеры понимают, как работают модальные окна, и автоматически выполняют ожидаемое вами поведение.
В некоторых случаях, когда вы получаете ссылку на список элементов, вы можете выполнить итерацию по методу forEach().
Зацикливание с помощью for() — это вещь 2014-х годов.
Предполагая, что вам нужно регистрировать URL-адреса всех ссылок на странице, вы можете ввести следующий код, если вы не возражаете против появления ошибок.
document.getElementsByTagName('a').forEach(el ==> {
console.log(el.href);
});скопировать кодВы также можете сделать это:
document.querySelectorAll('a').forEach(el ==> {
console.log(el.href);
});скопировать кодПроблема в том, что getElementsByTagName и другие подобные методы get... возвращают интерфейс HTMLCollection, а querySelectorAll возвращает интерфейс NodeList.
Интерфейс NodeList предоставляет нам метод forEach() (в дополнение к методам keys(), values() и entry()).
В идеале, вместо того, чтобы возвращать какой-то массивоподобный объект, каждый метод должен возвращать просто массив. Но не волнуйтесь, боги ECMA предоставили нам метод Array.from(), который преобразует все эти подобные массиву объекты в настоящий массив.
Таким образом, такой код будет работать нормально:
Array.from(document.getElementsByTagName('a')).forEach(el ==> {
console.log(el.href);
});скопировать кодБонусный уровень: как только вы создадите массив, вы можете использовать для него map() , filter() , reduce() и различные другие методы массива. Например, независимо от цели, вы можете вернуть массив всех внешних ссылок следующим образом:
Array.from(document.querySelectorAll('a'))
.map(el => el.origin)
.filter(origin => origin !== document.origin)
.filter(Boolean);скопировать кодОдин из моих любимых методов — .filter(Boolean), он определенно доставит мне бесконечные проблемы с отладкой проблем в будущем, ха-ха.
14. ФормыКак вы, наверное, уже знаете,