JS DOM

let element = document.createElement('div'); // div

let text = document.createTextNode('Контент'); // #text

ul = document.createElement('ul');
li = document.createElement('li');
li.textContent = '1 элемент списка';
ul.append(li);

li2 = document.createElement('li');
li2.textContent = '2 элемент списка';
ul.append(li2);

ul.append(li,li2, 'Какой-то текст'); // Можно вставлять сразу несколько элементов и тектовых узлов
document.querySelector('.test').append(ul);

li6 = document.createElement('li');
li6.textContent = '55 элемент списка';
ul.insertAdjacentElement('beforeend',li6)

li3 = document.createElement('li');
li3.textContent = '0 элемент списка';

li4 = document.createElement('li');
li4.textContent = '-1 элемент списка';

ul.prepend(li4, li3);

document.querySelector('.test').append(ul);

li5 = document.createElement('li');
li5.textContent = '-2 элемент списка';
ul.insertAdjacentElement('afterbegin',li5)

document.querySelector('.test').before(document.createElement('div'));
document.querySelector('.test').insertAdjacentElement('beforebegin',document.createElement('div'))

document.querySelector('.test').after(document.createElement('div'));
document.querySelector('.test').insertAdjacentElement('afterbegin',document.createElement('div'))

element.textContent = 'Текст для вставки'; // Вставка теста
element.append(text); // Вставка тестового узла внутрь, что дает тот же самый результат

document.querySelector('.my-ul').insertAdjacentText('afterbegin','текст afterbegin') // В начало элемента
document.querySelector('.my-ul').insertAdjacentText('beforeend','текст beforeend') // В конец элемента
document.querySelector('.my-ul').insertAdjacentText('beforebegin','текст beforebegin') // До элемента
document.querySelector('.my-ul').insertAdjacentText('afterend','текст afterend')  // После элемента

element.innerHTML = '<div class="div"><ul><li>Элемент 1</li><li>Элемент 2</li></ul></div>';

element.insertAdjacentHTML('afterbegin','<div class="afterbegin"><ul><li>Элемент 1</li><li>Элемент 2</li></ul></div>'); // В начало выбранного элемента
element.insertAdjacentHTML('beforeend','<div class="beforeend"><ul><li>Элемент 1</li><li>Элемент 2</li></ul></div>'); // В конец выбранного элемента
document.querySelector('.test').insertAdjacentHTML('beforebegin','<div class="beforebegin"><ul><li>Элемент 1</li><li>Элемент 2</li></ul></div>'); // Вставка выше указанного элемента
document.querySelector('.test').insertAdjacentHTML('afterend','<div class="afterend"><ul class="my-ul"><li>Элемент 1</li><li>Элемент 2</li></ul></div>'); // Вставка после указанного элемента

let element = document.createElement('div');
element.textContent = 'элемент 1';

let element2 = document.createElement('div');
element2.textContent = 'элемент 2';

document.querySelector('.test').append(element);
document.querySelector('.test').children[0].replaceWith(element2);

document.querySelector('.test').remove();

for (const el of [...document.querySelectorAll('li')]) {
  el.remove();
}

let list = document.getElementById('list');
let cloneNode = list.cloneNode(true); // Склонировать полностью все вложенные элементы
document.body.append(cloneNode);

document.getElementById('list'); // По идентификатору
document.querySelector('#list'); // Тоже самое по идентификатору
document.querySelector('[user-id="4"]'); // Найдем элмент по атрибуту
document.querySelectorAll('.element')[1].innerText // Получить контент из коллекции элементов

document.body.childNodes // Коллекция NodeList всех дочерних элементов включая текстовые
document.body.children // Получить коллекцию HTML Collection только html элементы
document.body.firstChild // Получение первого элемента коллекции
document.body.lastChild // Получение последнего элемента коллекции
document.body.parentNode // Родительский узел
document.body.parentElement // Родительский html элемент
document.head.nextSibling // Следующий соседний узел
document.body.previousSibling // Предыдущий соседний узел
document.body.children[0].lastElementChild // Последний элемент коллекции
document.body.children[0].lastElementChild.previousElementSibling.parentElement.parentElement // Можно строить столь угодно длинные цепочки

let li = event.target.closest('li'); // Найти ближайшего родителя включая текущий элемент, в данном случае нашили текущий - это li

for (let node of lis) {
    console.log(node);
  }

for (let i = 0; i < document.body.childNodes.length; i++) {
    console.log( document.body.childNodes[i] );
}

let j = 0;
while (j < document.body.childNodes.length) {
    console.log( document.body.childNodes[j] );
    j++;
}

array.forEach((item, i) => {
    let li = document.createElement('li');
    li.textContent = item.title;
    ul.append(li);
    console.log(item)
})

document.querySelector('ul').attributes // Получим коллекцию атрибутов NamedNodeMap у элемента ul

document.querySelector('ul').setAttribute('id', 'ul') // Установили атрибут
document.querySelector('ul').setAttribute('title', 'Это элемент ul') // Установили еще атрибут

document.querySelector('ul').getAttribute('title') // "Это элемент ul"

document.querySelector('ul').removeAttribute('title')

document.querySelector('ul').hasAttribute('id') // true
document.querySelector('ul').hasAttributes() // Иммется ли у элемента один или более атрибутов

document.querySelector('ul').attributes[0].nodeName // имя атрибута id
document.querySelector('ul').attributes[0].name // имя атрибута id
document.querySelector('ul').attributes[0].nodeType // 2 тип узла
document.querySelector('ul').attributes[0].nodeValue  // ul значение атрибута
document.querySelector('ul').attributes[0].value // ul значение атрибута

document.querySelector('ul').children[1].dataset.user = 1 // Установить data атрибут
document.querySelector('ul').children[1].dataset.user = 5476567 // Отредактировать data атрибут
delete document.querySelector('ul').children[1].dataset.user // Правильно удалить data атрибут можно так

document.querySelector('ul').classList // Коллекция классов элемента DOMTokenList []

document.querySelector('ul').classList.add('one', 'two', 'three') // Добавить три класса к элементу

document.querySelector('ul').classList.remove('one', 'two') // Удалить два класса

document.querySelector('ul').classList.toggle('test') // Если данного класса не было у элемента, он будет добавлен
document.querySelector('ul').classList.toggle('test') // Если класс есть у элемента, он будет удален

document.querySelector('ul').classList.contains('test') // Проверка на наличие класса у элемента

document.querySelector('ul').classList.replace('test','test2') // Заменить test на test2

let ul = document.createElement('ul');
document.body.prepend(ul);

let buttonClose = document.createElement('button');
buttonClose.textContent = 'Удалить элемент';
document.body.prepend(buttonClose);

let buttonCreate = document.createElement('button');
buttonCreate.textContent = 'Добавить элемент';
document.body.prepend(buttonCreate);

// Привязка к событию
buttonCreate.addEventListener('click', (e) => {
   let li = document.createElement('li');
   li.textContent = 'Элемент';
   ul.append(li);
});

// Привязка к событию
buttonClose.addEventListener('click', (e) => {
   let lis = document.querySelectorAll('ul > li');
   let last = lis[lis.length - 1];
   if (lis.length !== 0) {
     last.remove();
   }
});

button.addEventListener('click', (e) => {
   
});

ul.removeEventListener('click',colorStr) // Код должен быть таким же ка  и при здании слушателя

// Делегирование событий, вешаем на родительский элемент, в нем проверяем по чему кликнули
ul.addEventListener('click', (e) => {
    // Текущий кликнутый элемент
    let li = event.target.closest('li');

    if (!li) {
        return false;
    }
    
    // если ul не содержит li, то ничего не делаем
    if (!ul.contains(li)) {
        return false;
    }
    // Что-то делаем с элементом, в данном случае применяем стиль
    hover(li);
});
let selected;
function hover(li) {
    if (selected) {
        selected.style.backgroundColor = '';
    }
    selected = li;
    selected.style.backgroundColor = 'gray';
}

async function responseFunction() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
  if (response.ok) {
    return response.json();
  } else {
    return 'Ошибка запроса' + response.status;
 }
}

//или так, что практически тоже самое, но кода меньше
async function response2Function() {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos');
        return response.json();
    } catch (e) {
        console.error('Произошла ошибка!', e);
    }
}

response2Function().then((result) => (
  console.log(result)
));

await fetch('/my/url', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
});

localStorage.setItem('test1', 1);
localStorage.setItem('test2', 2);

localStorage.test1 = 12321321;

localStorage.test1 // 12321321
localStorage.getItem('test1') // 12321321 - Именно этот способ предпочтительнее

delete localStorage.test1;

for(let i=0; i<localStorage.length; i++) {
  let key = localStorage.key(i);
  console.log(`${key}: ${localStorage.getItem(key)}`);
}