Основні операції JS

// Створити div і span
document.createElement("div");
document.createElement("span");

Щоб додати декілька функцій в атрибут onclick, ви можете використовувати символ крапки з комою ; для розділення функцій. Наприклад:

<button onclick="function1(); function2();">Натисни мене</button>

Як виконати скрипт після повного завантаження DOM?

// Пишемо  метод
var ready = (callback) => {
  if (document.readyState != "loading") callback();
  else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => { 
  /*  Починаємо роботу після завантаження DOM */ 
});
// або ЗАПУСК СКРИПТІВ після загрузки HTML
window.onload = () => {
			fixedHed();
			startScrollHandler();
		}

Як отримати список усіх класів що є у html елемента з #red?

let allStyle =  document.getElementById("red").classList;

Як на чистому JS викликати вікно підтвердження дій?

<button type='submit'  onclick="confirmdel(event)">Delete</button>

<script>
    //Викликає вікно перевірки файла на видалення
   function confirmdel(event) { if(confirm('Файл буде видалено без можливості відновити?')){return true; }else{e.preventDefault();}};
</script>

Як вибрати елемент з DOM:

let input = document.querySelector("input[type = 'text']");
let ul = document.querySelector("ul");
let pencil = document.querySelector("#pencil");
let saveBtn = document.querySelector(".save");
let overlay = document.getElementById("overlay")

// Вибрати Слідуючий, Попередній і Батьківський елемент для .box
var box = document.querySelector(".box");
box.nextElementSibling;
box.previousElementSibling;
box.parentElement;

// Вибрати дочірній елемент по класу. наприклад: <div id="social_gr"><a href="" class="btn_fb">войти</a></div>
var links = document.getElementById('social_gr').getElementsByTagName('a');

Навігація між сторінками:

history.go(-3) //відправити браузер назад на три сторінки,
//Для переходу вперед і назад на одну сторінку
history.back()
history.forward()

Робота із подіями в JS:

//обробка події клацання
document.querySelector(".button").addEventListener("click", (e) => { /* ... */ });
//обробляти подію підняття ключа
document.addEventListener("keyup", (e) => { /* ... */ });

//ПРОСЛУХОВУВАННЯ подій на ДИНАМІЧНО створених елементах
// Створює елемент в структурі DOM
var searchElement = document.createElement("div");
document.querySelector(".search-container").appendChild(searchElement);
// Слухає подію на елементі
searchElement.addEventListener("click", handleClick);

// Визиваємо і створюємо подію myEvent
document.dispatchEvent(new Event("myEvent"));
document.querySelector(".box").dispatchEvent(new Event("myEvent"));

Як отримати url сторінки з якої відправили форму:

<!-- Створюємо скритий input у формі -->
<input class="some-class" type="hidden" name="url">

<!-- Скрипт який передасть у скритий input url сторінки з якої відправляється форма -->
<script>
document.addEventListener("DOMContentLoaded", () => { 
 let urlInput = document.querySelector('.some-class');
 urlInput.value = window.location.href;
});
</script>

Передати в input значення value з кнопки при кліці по ній:

<input type="text" id="test"/>
<button onclick="document.getElementById('test').value+='red-500'">red-500</button>

Смертельний трюк - Видаляємо блок < div > при натискуванні на кнопку.

<!--๑۩۩๑== при кліці на "notn-m2-close"  видаляється "notification-m2" -->
            <div class="notification-m2">
                <div class="notn-m2-close"><s class="knpclose ti-close" onclick="removeElement()"></s></div>
                <div class="row-bc">
                    <div class="notn-m2-img col-40"><img src="$url_adm/aa-design/images/logo_v4.png" alt="logo"/></div>
                    <div class="notn-m2-text col-55">{$message2}</div>
                </div>
            </div>

            <script>
                function removeElement() {
                var nodes = document.querySelectorAll('.notn-m2-close');
                for (var i = 0; i < nodes.length; i++)
                nodes[i].parentNode.remove(nodes[i]);
                }
            </script>

Робота з атрибутами в JS:

// Добавляємо, Видаляємо та Переключаємо атрибути
var box = document.querySelector(".box");
box.classList.add("focus");
box.classList.remove("focus");
box.classList.toggle("focus");

// Можна передати одразу декілька атрибутів
var box = document.querySelector(".box");
box.classList.add("focus", "highlighted");
box.classList.remove("focus", "highlighted");

Провіряємо чи є в .box атрибут focus і запускаємо функцію:

if (document.querySelector(".box").classList.contains("focus")) {
 //  Поїхали...
}

Якщо потрібно прочитати або обновити текст тега використовувати - textConten:

// Міняємо текст в .button
document.querySelector(".button").textContent = "New text";
// Зчитуємо текст з .button
document.querySelector(".button").textContent; // Отдаёт"New text"

Якщо ви створюєте елемент і вам потрібно додати його іншому елементу, використовуйте на батьківському елементі метод appendChild():

// Створюємо div і вставляємо його в .container
var element = document.createElement("div");
document.querySelector(".container").appendChild(element);

// Створюємо div
var element = document.createElement("div");

// Додаємо йому клас
element.classList.add("box");

// Вказуємо текст
element.textContent = "Text inside box";

// Вставляємо його в .container
document.querySelector(".container").appendChild(element);

Як поміняти в тезі його style=""

// Міняємо display на block або none
document.querySelector(".box").style.display = "none";
document.querySelector(".box").style.display = "block";