DOM

Part 3

  1. Поменяйте цвет для первого параграфа через style
  2. Поменяйте цвет для второго параграфа через класс из js 
<!DOCTYPE html>
<html>
<body>
  <style type="text/css">
    .red {
      color: red;
    }
  </style>
  <p id="p1">Hello World!</p>
  <p id="p2">Hello World!</p>

  <script>
    // ваш код
  </script>

</body>
</html>

Task

  1. Получите коллекцию их всех li
  2. Получите коллекцию из li которые последние в ul
<!DOCTYPE html>
<html>
<body>
  <ul>
    <li>Этот</li>
    <li>тест</li>
  </ul>
  <ul>
    <li>полностью</li>
    <li>пройден</li>
  </ul>
  <script>
  
  </script>

</body>
</html>

Task

Создайте функцию getTextFromTextNode(elem), которая возвращает текст из текстовой node.

<!DOCTYPE html>
<html>
<body>
  <ul>
    <li>полностью</li>
    <li>пройден</li>
  </ul>
  <p>Hello</p>

  <script>
    function getTextFromTextNode(elem) { /* ваш код */ }

    getTextFromTextNode(elem); // выводит текст с text node
  </script>
</body>
</html>

Task

Создайте функцию clear(elem), которая удаляет всё содержимое из elem.

<!DOCTYPE html>
<html>
<body>

  <ol id="elem">
    <li>Привет</li>
    <li>Мир</li>
  </ol>

  <script>
    function clear(elem) { /* ваш код */ }

    const elem = ...
    clear(elem); // очищает список

  </script>

</body>
</html>

Task

Change document

let div = document.createElement('div');
div.className = "alert";
div.innerHTML = "<strong>Всем привет!</strong> Вы прочитали важное сообщение.";

Модификации DOM – это ключ к созданию «живых» страниц.

Создание сообщения:

Вставка:

document.body.append(div)

Change document

Вот методы для различных вариантов вставки:

  • node.append(...nodes or strings) – добавляет узлы или строки в конец node,
  • node.prepend(...nodes or strings) – вставляет узлы или строки в начало node,
  • node.before(...nodes or strings) – вставляет узлы или строки до node,
  • node.after(...nodes or strings) – вставляет узлы или строки после node,
  • node.replaceWith(...nodes or strings) – заменяет node заданными узлами или строками.

classList

Свойство classList возвращает псевдомассив DOMTokenList, содержащий все классы элемента.

<div id="clock" class="example for you"> </div>

const elem = document.querySelector("#clock")

//Выведем классы
console.log(elem.classList); //DOMTokenList ["example", "for", "you"]

classList

add( String [,String] )   Добавляет элементу указанные классы

remove( String [,String] ) Удаляет у элемента указанные классы

item ( Number ) Результат аналогичен вызову сlassList[Number]

toggle ( String [, Boolean]) Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.

contains ( String ) Проверяет, есть ли данный класс у элемента (вернёт true или false)

Создайте функцию createElement(elemName, text), которая создает элемент по имени тега который передаем в функцию и записывает в элемент текст который передаем в функцию. Затем добавить созданный элемент в DOM.

<!DOCTYPE html>
<html>
<body>
  <script>
    function createElement(elemName, text) { /* ваш код */ }

    createElement('div', 'Hello World!');
  </script>
</body>
</html>

Task

Создайте функции getClasses, addClass и removeClass.

  1. При вызове getClasses() нужно вывести список доступных классов на p.
  2. При вызове addClass('new class') должны добавить новый класс к тегу p.
  3. При вызове removeClass('name class') нужно удалить класс с тега p. 
<!DOCTYPE html>
<html>
<body>
  <p class="test1 test2 test3">Hello World!</p>

  <script>
    // ваш код
    function removeClass(class) {}
    function addClass(class) {}
    function getClasses() {}
  </script>
</body>
</html>

Task

Есть массив элементов ['Work', 'HW', 'JS', 'Friends']. Необходимо вывести массив в виде списка.

Task

<!DOCTYPE html>
<html>
<body>
  <script>
    const arr = ['Work', 'HW', 'JS', 'Friends'];
    // ваш код
  </script>
</body>
</html>

Templates

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

// до стандарта es2015
'test str' + 1234 + '!' // test str123!

'test str' + ' ' + 1234 + ' !' // test str 123 !
// начиная с es2015
`обратные кавычки`;

const num = 1234
`test str ${num} !` // test str 123 !

const apples = 2;
const oranges = 3;

console.log(`${apples} + ${oranges} = ${apples + oranges}`); // 2 + 3 = 5

Templates

// до стандарта es2015

const arr = ['JS', 'JAVA'];
let li = '';
let ul;
arr.forEach((value) => {
   li += '<li>' + value + '</li>';
})
ul = '<ul>' + li + '</ul>'
// начиная с es2015

const arr = ['JS', 'JAVA'];
let li = '';
let ul;
arr.forEach((value) => {
   li += `<li> ${value} </li>`;
})
ul = `<ul> ${li} </ul>`

Делегирование событий

Всплытие и перехват событий позволяет реализовать один из самых важных приёмов разработки – делегирование.

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

Из него можно получить целевой элемент event.target, понять на каком именно потомке произошло событие и обработать его.

Делегирование событий

<!DOCTYPE html>
<html>
<body>

  <div id="wrapper">
    <p id="p1"><span>Hello World!</span></p>
    <p id="p2"><span>Hello World!</span></p>
  </div>

  <script>
    const wrapper = document.querySelector('#wrapper');
    
    wrapper.addEventListener('click', function (event) {
      console.log(event.target);
      console.log(event.target.tagName);
    })
  </script>

</body>
</html>

Делегирование событий

<!DOCTYPE html>
<html>
<body>

  <div class="wrapper">
    <ul>
      <li><span>Save</span></li>
      <li><span>Update</span></li>
    </ul>

	<button>without handler</button>	
  </div>


  <script>
    const wrapper = document.querySelector('.wrapper');
    
    wrapper.addEventListener('click', function (event) {
      console.log(event.target);
      console.log(event.target.tagName);
      
      let item = event.target.closest('li');
      
      if (!item) return; 
      
      console.log(item.innerText);
    })
  </script>

</body>
</html>

Делегирование событий

<!DOCTYPE html>
<html>
<body>

  <ul>
  	<li data-action="save">Save</li>
    <li data-action="update">Update</li>
  </ul>



  <script>
    const ul = document.querySelector('ul');
    
    ul.addEventListener('click', function (event) {
      let action = event.target.dataset.action;
      
      switch (action) {
        case 'save':
          save();
          break;
        case 'update':
          update();
          break;
        default:
          console.error('error')
        }
     })
  </script>

</body>
</html>

При клике на элемент подсветить его.

<!DOCTYPE html>
<html>
<body>
  <style type="text/css">
    .active {
      color: green;
    }
  </style>

  <div>
    <p id="p1"><span>Hello World p1!</span></p>
    <p id="p2"><span>Hello World p2!</span></p>
  </div>

  <script>
    // ваш код
  </script>

</body>
</html>

Task

При клике на кнопку добавить в список то что пользователь ввел в input.

<!DOCTYPE html>
<html>
<body>

  <ul id="list"></ul>

  <input name="task" id="task" />
  <button id="add">add</button>

  <script>
    // ваш код
  </script>

</body>
</html>

Task

DOM part 3

By Oleg Rovenskyi

Made with Slides.com

DOM part 3

  • 243

More from Oleg Rovenskyi