Давайте научимся манипулировать объектной модели HTML документа (DOM) в JavaScript, создавая приложение для списка

Цель

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

Темы охватывали

• Создать HTML -элементы внутри JavaScript

• Выбор && манипулирование элементами DOM

• Template Literals (плюс createrange () и createcontextualfragment ())

• DOM Traversal

• События (поднятие и обработка событий)

• ES6 Синтаксис

• Методы массива

• API веб -хранилища (локальное хранение, хранение сеанса и файлы cookie)

Предпосылка

Я ожидаю, что вы узнаете основные HTML, CSS и JavaScript

Дом

Что такое Дом? Модель объекта документа (DOM) – это представление данных объектов, которые составляют структуру и содержание документа в Интернете. Он определяет элементы HTML как объекты, свойства для всех элементов HTML, методы для всех элементов HTML и события для всех элементов HTML.

Примечание

Браузер моделирует структуру после получения ответа HTTP с сервера! Он представляет страницу, так что программы (например, JavaScript) могли изменить структуру документа, стиль и контент.

Мы обсудим больше о структуре дерева DOM, которая показывает родительскую дочернюю связь узлов В разделе «Траверная передача Дома» Анкет На данный момент нам понадобится первый узел дерева (корневой узел) под названием Документ Чтобы получить доступ к любому объекту на HTML -странице.

Изменение структуры документов, стиля и контента

Мы сказали, что DOM определяет методы для всех элементов HTML, и мы можем использовать один из его методов, CreateElement (указать элемент) для создания любого указанного HTML -элемента

const heading = document.createElement('h1') // 

Чтобы создать текст, мы можем использовать метод, CreateTextNode (Text)

const heading_text = document.createTextNode("Hello world!");

Зачем Creatextxtnode вместо Creatextext, как в Createelement?

Узел

Каждый объект, расположенный в документе, является каким -то узлом. В документе HTML объектом может быть элементом узлом, а также текстовым узлом или узлом атрибута.

Давайте теперь добавим TextNode, Heading_Text, который мы создали в наш заголовок, H1 с использованием метода appendChild ()

heading.appendChild(heading_text) // 
Hello world!

Вспомните структуру HTML

Элемент определяет тело документа и является контейнером для всех видимых содержимого, таких как заголовки, Чтобы сделать наш заголовок видимым, нам нужно добавить его к <тело > элемент

document.body.appendChild(heading)

/*
  
Hello world!
  
*/

упражнение

Используя CreateElement (), CreateTexTnode () и AppendChild () сделайте следующие коды фрагмента HTML ниже и добавьте его к элементу кузова. Попробуйте сами, прежде чем просмотреть мое решение

 

  
Now I can create HTML element right inside JavaScript
 

решение

const div = document.createElement('div')
const paragraph = document.createElement('p')
const paragraphText = document.createTextNode(
  'Now I can create HTML element right inside javaScript'
)
paragraph.appendChild(paragraph)
document.body.appendChild(paragraph)

Element.append () похож на Node.appendchild () Но с дополнительной силой. Позволь мне показать тебе! Давайте переделать наше предыдущее решение с Element.append ()

const div = document.createElement('div')
const paragraph = document.createElement('p')
paragraph.append('Now I can create HTML element right inside JavaScript')
document.body.append(paragraph)

На этот раз с меньшим количеством кодов! Element.append () Избавляет нас от создания текстового узла и добавления его в абзац, как в первом решении.

Ох! благодарю вас Element.append () , теперь я никогда не буду использовать Node.appendchild ()

Умный ученик, вы пришли к выводу так скоро!

Element.append () не имеет возврата, тогда как Node.appendchild () Возвращает добавленный объект узла.

Может на этот раз Node.appendchild () выиграл в случае, когда вы хотите, чтобы ваш добавленный объект узла.

Другие битвы, Element.append () против Node.appendchild ()

Element.append () Позволяет также добавлять объекты Domstring, тогда как Node.appendchild () только принимает объекты узла.

Element.append () может добавить несколько узлов и строк, тогда как Node.appendchild () может добавить только один узел.

упражнение

Создайте следующую структуру элементов внутри JavaScript из того, что вы узнали до сих пор

 
I am learning DOM
 

  This is so cool
  
with my new power i can now create html structure inside javascript, ohh how cool is that
 
 

  
this is heading three inside second div
  
intresting, this is second paragraph in second div
 

Решение

const heading1 = document.createElement('h1') //

heading1.append('I am learning DOM') //
 I am learning DOM 

const div1 = document.createElement('div') //

const p1 = document.createElement('p')
p1.append(
  'with my new power i can now create html structure inside javascript, ohh how cool is that'
)
div1.append('This is so cool', p1)

const div2 = document.createElement('div')

const heading3 = document.createElement('h3') //


heading3.append('this is heading three inside second div')
//
this is heading three inside second div

const p2 = document.createElement('p')
p2.append('intresting, this is second paragraph in second div')

div2.append(heading3, p2)

document.body.append(heading1, div1, div2)

Ооо, верно, пока все, что мы делали, – это создать HTML -элементы из JavaScript и вставить их в нашем элемент для видимости. Что если мы хотим получить доступ к конкретному элементу из html, index.html -файла и манипулировать им в JavaScript?

Выбор && манипулирование элементами DOM

Ну, мы можем использовать селекторы, как это делается в листе стиля.

Вот и все для этой части, я не могу дождаться, чтобы увидеть вас в следующей части, Выбор && манипулирование элементами DOM

Я буду любить нас, чтобы подключиться к Twitter и LinkedIn

Оригинал: “https://dev.to/fabaladibbasey/learn-to-manipulate-html-dom-in-javascript-by-building-to-do-list-app-3017”