• 7 минут чтения

• Кодирование, JavaScript, Методы, HTML

• Поделись ТвиттерЛинкедин

За последние четыре или пять лет регулярного ведения блога и проведения исследований для других писательских проектов я наткнулся, вероятно, на тысячи статей о JavaScript.

Мне кажется, что большую часть этих статей можно разделить на две очень общие категории:

1. jQuery;
2. Теоретические и концептуальные статьи посвящены таким вещам, как IIFE, замыкания и шаблоны проектирования.

Да, я, вероятно, наткнулся на массу других статей, которые не попадают ни в одну из этих категорий, либо являются более конкретными. Но почему-то кажется, что большинство тех, кого действительно продвигают в сообществе, подпадают под одну из двух вышеперечисленных категорий.

Я думаю, что эти статьи великолепны, и я надеюсь, что мы увидим их больше. Но иногда самые простые функции JavaScript находятся прямо у нас под носом и мы просто не имели большого воздействия на них. Я говорю о нативных, более-менее кроссбраузерных функциях, которые уже некоторое время присутствуют в языке.

Дальнейшее чтение на SmashingMag:

• Полезные демонстрации функций jQuery для ваших проектов
• Развитие понимания зависимости
• 7 вещей в JavaScript, которые я хотел бы знать намного раньше в своей карьере
• Уменьшение масштаба методологии БЭМ для небольших проектов

Итак, в этой статье я не буду говорить о jQuery и не буду рассматривать концепции или шаблоны структурного кода. Вместо этого я собираюсь познакомить вас с некоторыми функциями чистого JavaScript, которые вы можете использовать уже сегодня и о которых, возможно, никогда раньше не задумывались.

вставить соседнийHTML()

Несколько лет назад Microsoft представила метод под названием insertAdjacentHTML() как способ вставить указанную строку текста в формате HTML или XML в определенное место в модели DOM. Эта функция доступна в Internet Explorer (IE) начиная с версии 4. Давайте посмотрим, как она работает.

Предположим, у вас есть следующий HTML:

<div id="box1">
    <p>Some example text</p>
</div>
<div id="box2">
    <p>Some example text</p>
</div>

Предположим, вы хотите вставить еще один фрагмент HTML между #box1 и #box2. Вы можете сделать это довольно легко, используя insertAdjacentHTML():

var box2 = document.getElementById("box2");
box2.insertAdjacentHTML('beforebegin', '<div><p>This gets inserted.</p></div>');

При этом сгенерированный DOM выглядит следующим образом:

<div id="box1">
    <p>Some example text</p>
</div>
<div><p>This gets inserted.</p></div>
<div id="box2">
    <p>Some example text</p>
</div>

• Посмотреть простую демонстрацию.

То insertAdjacentHTML() метод принимает два параметра. Первый определяет, где вы хотите разместить HTML относительно целевого элемента (в данном случае #box2 элемент). Это может быть одно из следующих четырех строковых значений:

• beforebegin HTML будет размещен непосредственно перед элементом, как родственный элемент.
• afterbegin HTML будет помещен внутри элемента перед его первым дочерним элементом.
• beforeend HTML будет помещен внутри элемента после его последнего дочернего элемента.
• afterend HTML будет размещен сразу после элемента, как родственный элемент.

Снова, это строковые значения, а не ключевые словапоэтому они должны быть заключены в одинарные или двойные кавычки.

Второй параметр — это строка, которую вы хотите вставить, также заключенная в кавычки (иначе это будет переменная, содержащая ранее определенную строку). Обратите внимание, что это должна быть строка, а не элемент DOM или набор элементов; так что это может быть просто текст без фактической разметки.

insertAdjacentHTML() имеет, как указано в сообщении о Mozilla Hacks, несколько преимуществ по сравнению с чем-то более традиционным, например innerHTML(): он не повреждает существующие элементы DOM и работает лучше.

И если вам интересно, почему этому до сих пор не уделялось много внимания, несмотря на то, что он хорошо поддерживается во всех используемых версиях IE, причина, вероятно, в том, что, как упоминалось в статье Mozilla Hacks, это не было добавлено в Firefox до версии 8. Поскольку все другие основные браузеры поддерживают это, а пользователи Firefox автоматически обновляются с версии 5, использовать его вполне безопасно.

Подробнее об этом методе:

• «insertAdjacentHTML()» в спецификации «Синтаксический анализ и сериализация DOM», WHATWG
• «Element.insertAdjacentHTML», Сеть разработчиков Mozilla

получитьBoundingClientRect()

Вы можете получить координаты и, соответственно, размеры любого элемента на странице, используя другой, менее известный метод, getBoundingClientRect() метод.

Вот пример того, как это можно использовать:

var box = document.getElementById('box'),
    x, y, w;

x = box.getBoundingClientRect().left;
y = box.getBoundingClientRect().top;

if (box.getBoundingClientRect().width) {
  w = box.getBoundingClientRect().width; // for modern browsers
} else {
  w = box.offsetWidth; // for oldIE
}

console.log(x, y, w);

• Посмотреть демо.

Здесь мы нацелились на элемент с идентификатором boxи мы получаем доступ к трем свойствам getBoundingClientRect() метод для #box элемент. Вот краткое изложение шести довольно очевидных свойств, которые предоставляет этот метод:

• top На сколько пикселей верхний край элемента от самого верхнего края области просмотра
• left Сколько пикселей левый край элемента от самого левого края области просмотра
• right Сколько пикселей правый край элемента от самого левого края области просмотра
• bottom На сколько пикселей нижний край элемента от самого верхнего края области просмотра
• width Ширина элемента
• height Высота элемента

Все эти свойства доступны только для чтения. И обратите внимание, что свойства координат (top, left, right и bottom) все относятся к верхнему левому углу окна просмотра.

Что насчет if/else в примере сверху? IE 6–8 не поддерживает width и height характеристики; поэтому, если вам нужна полная кросс-браузерная поддержка для них, вам придется использовать offsetWidth и/или offsetHeight.

Как с insertAdjacentHTML()несмотря на отсутствие поддержки width и heightэтот метод поддерживается в IE с древних времен, и он поддерживается везде, где это применимо, так что его довольно безопасно использовать.

Здесь я кое-что уступлю: получение координат элемента с использованием значений на основе смещения (таких как offsetWidth) на самом деле быстрее, чем использование getBoundingClientRect(). Обратите внимание, однако, что значения, основанные на смещении, всегда будут округляться до ближайшего целого числа, тогда как getBoundingClientRect()свойства будут возвращать дробные значения.

Для получения дополнительной информации:

• «Element.getBoundingClientRect», сеть разработчиков Mozilla.
• «getBoundingClientRect — это круто», — Джон Резиг.

API

Если вы когда-либо манипулировали элементами на лету с помощью JavaScript, то вы, вероятно, использовали такие методы, как createElement, removeChild, parentNode и сопутствующие функции. Таким же образом вы можете манипулировать HTML-таблицами.

Но вы можете не осознавать, что существует очень специфический API для создания HTML-таблиц и управления ими с помощью JavaScript, и он очень хорошо поддерживается браузерами. Давайте кратко рассмотрим некоторые методы и свойства, доступные в этом API.

Все следующие методы доступны для использования в любом HTML-коде. table элемент:

• insertRow()
• deleteRow()
• insertCell()
• deleteCell()
• createCaption()
• deleteCaption()
• createTHead()
• deleteTHead()

И тогда есть следующие свойства:

• caption
• tHead
• tFoot
• rows
• rows.cells

С помощью этих функций мы можем создать целую таблицу, включая строки, ячейки, заголовок и содержимое ячейки. Вот пример:

var table = document.createElement('table'),
    tbody = document.createElement('tbody'),
    i, rowcount;

table.appendChild(tbody);

for (i = 0; i <= 9; i++) {
  rowcount = i + 1;
  tbody.insertRow(i);
  tbody.rows[i].insertCell(0);
  tbody.rows[i].insertCell(1);
  tbody.rows[i].insertCell(2);
  tbody.rows[i].cells[0].appendChild(document.createTextNode('Row ' + rowcount + ', Cell 1'));
  tbody.rows[i].cells[1].appendChild(document.createTextNode('Row 1, Cell 2'));
  tbody.rows[i].cells[2].appendChild(document.createTextNode('Row 1, Cell 3'));
}

table.createCaption();
table.caption.appendChild(document.createTextNode('A DOM-Generated Table'));

document.body.appendChild(table);

• Посмотреть демо.

Приведенный выше сценарий сочетает в себе некоторые обычные базовые методы DOM с методами и свойствами HTMLTableElement API. Тот же самый код, написанный без табличного API, может быть значительно сложнее и, следовательно, его труднее читать и поддерживать.

Опять же, эти функции, связанные с таблицами, поддерживаются начиная с IE 7 (и, возможно, ранее) и везде, где это применимо, поэтому не стесняйтесь использовать эти методы и свойства там, где вы считаете нужным.

Для получения дополнительной информации:

• «HTMLTableElement», Сеть разработчиков Mozilla
• «Табличные данные» в спецификации «HTML», WHATWG

Подведение итогов

Это обсуждение конкретных нативных функций JavaScript было своего рода напоминанием. Мы можем легко привыкнуть к особенностям языка, который хорошо знаем, не углубляясь в синтаксис языка в поисках более простых и удобных в сопровождении способов решения наших проблем.

Так что время от времени смотри внутри коробка, так сказать. То есть исследуйте все, что может предложить ванильный JavaScript, и старайтесь не слишком полагаться на плагины и библиотекичто может излишне раздуть ваш код.

(Кредиты изображения на первой странице: nyuhuhuu)

(всегда)