15 малоизвестных свойств и методов объектов DOM

[taliban]

Это прекрасно, в кои то веки чистый жс

[paratagas]

Если делать проверку на наличие класса, то в пункте №8 на самом деле самым лучшим способом было бы использование коллекции classList:

if (myElement.classList.contains("some-class")) {...}

[JustDont]

Странный набор, если честно.

№3: свойство hidden

Стилем display можно управлять через цсс. Атрибутом hidden — нельзя. Его использование крайне сомнительно, за исключением особо извращенных случаев.

№4: метод toggle()

Это метод коллекции classList, и только её. Там вообще все методы полезны, выделять один только toggle() странно.

№7: метод getBoundingClientRect()

Нет, он не обязательно вызывает перерисовку страницы.

№8: метод matches()

Уже написали — «наиболее правильно» таки будет проверять через classList.

№13: метод forEach()

Не надо писать о том, что NodeList умеет в forEach(). Надо писать о том, что NodeList !== Array, и стоит конвертировать при любой необходимости. Потому что сегодня люди делают forEach() на NodeList, а завтра сделают .map() и обломаются.

[artem_se]

Атрибут hidden не годится для управления видимостью: «The hidden attribute must not be used to hide content that could legitimately be shown in another presentation», отсюда.

[JustDont]

Технически, это абсолютно то же самое, что и display: none. Во всех браузерах, которые у меня под рукой нашлись.

[artem_se]

Я так думаю, речь идет о семантике документа.

[gnaeus]

Только вот любой CSS вида

.my-flex { display: flex; }

перебивает

[hidden] { display: none; }

И уже не получится написать

<div class="my-flex" hidden>...</div>

А значит это свойство бесполезно

[BerkutEagle]

№8: метод matches()

Уже написали — «наиболее правильно» таки будет проверять через classList.

Здесь просто пример неудачный. Через classList правильно проверить наличие класса на элементе, а matches — проверка на соответствие css-селектору

<div class="someParentClass">
   <div id="myElem" class="someChildClass"></div>
</div>

matches «умеет», например, такое:

myElem.matches('div.someParentClass .someChildClass') //true
myElem.matches('span.someParentClass .someChildClass') //false

[Romaboy]

Атрибутом hidden активно пользуюсь и очень советую, с css никаких проблем: [hidden] { display: none !important }
Hidden значит спрятан, и это все что стоит добавить в css.

И чтобы показать элемент: hidden = false vs style.display = '...block? flex? Пойду в css посмотрю'

[JustDont]

Чтоб элемент показать — надо всего лишь убрать добавленный ранее display: none. А правильный display должен быть уже выставлен (в цсс ли, еще ли где-то).

[CoolCmd]

тогда уж лучше removeAttribute('hidden'), чтобы с SVG работало

[Mycolaos]

Ок, а где малоизвестные свойства и методы?

[Focushift]

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

[Focushift]

Простите, я про dialog

[delphinpro]

Забыли написать, что
var v = document.getElementById('MyId');
равносильно
var v = MyId;
Как же так? =)

[KhodeN]

Лучше про это не знать от греха подальше.

[Zenitchik]

Ну да, было такое когда-то. А ещё был набор document.all

[shushu]

Для меня пожалуй «открытием» было: scrollIntoView
А то постоянно офсеты считал :(

[PFight77]

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

[Finesse]

Циклы for() — это вчерашний день

Вчерашний день — это forEach. А for — это снова сегодняшний день:

for (el of document.querySelectorAll('a')) {
    console.log(el.href);
}

[Gif_off]

конструкция myElement.querySelector('.my-class') выберет лишь те элементы, которые имеют класс my-class и при этом являются потомками элемента myElement

Данная конструкция выберет лишь первый элемент, удовлетворяющий селектору

[xobotyi]

Именно, чтобы выбрать все надо делать myElement.querySelectorAll('.my-class');
Который уже вернёт злополучный NodeList

[Sebir]

Производители браузеров как-то не спешат включать поддержку элемента dialog