Краткое изложение знаний по JavaScript: DOM

1. Введение в DOM

1.1. Что такое DOM

Полная реализация JavaScript состоит из следующих трех различных частей:

• Ядро (ECMAScript): основная часть языка, которая описывает синтаксис и основные объекты языка.

• Объектная модель документа (DOM): стандарт работы с документами веб-страницы, описывающий методы и интерфейсы для обработки содержимого веб-страницы.

• Объектная модель браузера (BOM): основа для операций с окнами клиента и браузера, описывающая методы и интерфейсы взаимодействия с браузером.

Объектная модель документа ( Document Object Model，简称DOM ) — это стандартный编程接口, рекомендованный организацией W3C для обработки расширяемого языка разметки (HTML или XML).
W3C определил ряд интерфейсов DOM, с помощью которых можно изменять содержимое, структуру и стиль веб-страниц.

Официальный язык: Объектная модель документа (DOM) — это стандартный программный интерфейс, рекомендованный организацией W3C для обработки расширяемых языков разметки. Это независимый от платформы и языка интерфейс прикладного программирования (API), который может динамически получать доступ к программам и сценариям и обновлять их содержимое, структуру и стиль www-документов (документы HTML и XML определяются через разделы описания). Документ можно дополнительно обработать и результаты обработки добавить на текущую страницу. DOM — это древовидный документ API, который требует, чтобы весь документ был представлен в памяти во время обработки. Другой простой API — SAX на основе событий, который можно использовать для обработки очень больших XML-документов. Поскольку они большие, они не подходят для обработки всего в памяти.

1.2 DOM-дерево

• Документ: страница — это документ. Документ используется в DOM для представления
• элементов: все теги на странице являются элементами, а элемент используется в DOM для представления
• узлов: все содержимое веб-страницы — это узлы (метки, атрибуты, текст, комментарии и т. д.). Используйте узел в DOM для представления

DOM 把以上内容都看做是对象

2. Получение элементов

2.1. Как получить элементы страницы

. DOM в основном используется для работы с элементами в нашей реальной разработке.
Как получить элементы на странице Вы можете получить элементы на странице следующими способами:

• Получить на основе идентификатора
• Получить на основе имени тега
• Получить специальные элементы
• с помощью новых методов в HTML5?
• 
  

2.2 Получение на основе идентификатора

Используйте метод getElementById() для получения объекта элемента с идентификатором.

document.getElementById('id');

Используйте console.dir() для печати полученного объекта элемента и лучшего просмотра свойств и методов объекта.

2.3 Получение на основе имени тега

Используйте метод getElementsByTagName() для возврата коллекции объектов с указанным именем тега.

document.getElementsByTagName('tag name');

Примечание.

1. Поскольку мы получаем коллекцию объектов, нам нужно пройти ее, если мы хотим работать с элементами внутри.
2. Получение объекта элемента является динамическим.

2.4 Получите document.getElementsByClassName('class name') с помощью нового метода HTML5

; // Возвращаем коллекцию объектов элемента в соответствии с именем класса document.querySelector('selector'); // Возврат в соответствии с указанный селектор Первый объект элемента document.querySelectorAll('selector'); // Возврат в соответствии с указанным селектором.

注意：
Селекторы в querySelector и querySelectorAll должны быть отмечены, например: document.querySelector('#nav');

2.5 Получение специальных элементов (body, html)

1. Получение элемента body

doucumnet.body // Возврат объекта элемента body

2. Получение элемента html

document.documentElement // Возвращение объекта элемента html

3. Основы событий

3.1 Обзор событий

Поддержка JavaScript нас для создания динамических страниц, а события — это поведение, которое может быть обнаружено с помощью JavaScript.
简单理解： 触发--- 响应机制。
Каждый элемент веб-страницы может генерировать определенные события, которые могут запускать JavaScript. Например, мы можем генерировать событие, когда пользователь нажимает кнопку, а затем выполняет определенные операции.

3.2 Три элемента событий:

1. источник события (кто)
2. тип события (какое событие)
3. обработчик события (что делать)

случай:

var btn = document.getElementById('btn');
btn.onclick = функция() {
 alert('Как дела'); 
}

3.3 Шаги для выполнения событий:

1. Получить источник события,
2. зарегистрировать событие (привязать событие)
3. , добавить обработчик события (в форме назначения функции)

3.3 Общие события мыши

注：以下图片的事件只是常见的并不代表所有

3.4 Проанализируйте три элемента

событий:
1. Источник события (над чем вы хотите воздействовать)

2. Событие (что вы хотите сделать для достижения желаемого эффекта взаимодействия)

3. Функция обработки (как вы хотите, чтобы цель выглядела после того, как событие произойдет)

4 Элемент операции Операции

JavaScript DOM могут изменять содержимое, структуру и стиль веб-страниц. Мы можем использовать элементы операции DOM для изменения содержимого, атрибутов и т. д. внутри элементов. Обратите внимание, что ниже приведены все атрибуты.

4.1. Измените содержимое элемента

element.innerText

с начальной позиции на конечную позицию, но при этом будет удален тег html. В то же время пробелы и разрывы строк также удалят

все содержимое из начальной позиции. позиции до конечной позиции

element.innerHTML

4.2 Общие операции с атрибутами элемента

InsideText и InnerHTML для изменения содержимого элемента.
источник, ссылка
id, alt, title

4.3 Операции с атрибутами элементов формы.

Вы можете использовать DOM для управления атрибутами следующих элементов формы:

тип, значение, отмечено, выбрано, отключено.

4.4 Операции с атрибутами стиля.

Мы можем изменить размер, цвет, положение и другие стили. элементов через JS.

1. element.style Операция встроенного стиля
2. element.className Операция стиля имени класса

注意：
1.JS 里面的样式采取驼峰命名法比如fontSize、 backgroundColor
2.JS 修改style 样式操作，产生的是行内样式，CSS 权重比较高

операционные элементы являются основным содержимым DOM.

4.5 Исключительное мышление

Если есть одна и та же группа элементов, и мы хотим, чтобы определенный элемент реализовал определенный стиль, нам нужно использовать алгоритм исключения цикла:

1. очистить стили всех элементов (убить других людей)
2. и установить стиль для текущего элемента ( оставив себя в покое).
3. Обратите внимание, что порядок нельзя изменить: сначала убейте других людей, а затем установите себя.

4.6 Работа с пользовательскими атрибутами

1. Получите значение атрибута

• element.property Получите значение атрибута.
• element.getAttribute('attribute');

Разница:

• element.attribute получает значение встроенного атрибута (атрибут, который поставляется с самим элементом)
• element.getAttribute('attribute'); в основном получает настроенные атрибуты (стандартные), настроенные пользователем. наши программисты Свойство

2. Установите значение свойства

• element.property = 'value' Установите значение встроенного свойства.
• element.setAttribute('Attribute', 'Value');

Разница:

• element.Attribute устанавливает значение встроенного атрибута
• element.setAttribute('Attribute'); В основном устанавливает пользовательские атрибуты (стандартные)

3. Удаление атрибутов

• element.removeAttribute(' Properties). ');

4.7 Пользовательские свойства H5

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

Пользовательские атрибуты получаются с помощью getAttribute('attribute').
Однако некоторые пользовательские атрибуты могут легко вызвать неоднозначность, и трудно определить, являются ли они встроенными атрибутами или пользовательскими атрибутами элемента.

H5 добавил к нам новые пользовательские атрибуты:

1. Установка пользовательских атрибутов H5

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

Или используйте JS для установки

element.setAttribute('data-index', 2)

2. Получите пользовательские атрибуты H5 <br/> Совместимость Get element.getAttribute('data-index');
В H5 добавлен element.dataset.index или element.dataset['index'], который поддерживается только в IE 11.

5. В операциях узла

обычно используются два метода для получения элементов:
1. Используйте методы, предоставляемые DOM, для получения элементов

• document.getElementById()
• document.getElementsByTagName()
• document.querySelector и т. д.  Логика не является сложной и громоздкой.

• Используйте

иерархические отношения узлов для получения элементов.

• Отношение узла -child-sibling для получения элементов.
• Логика надежна, но немного менее совместима.

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

5.2 Обзор узла

Все содержимое веб-страницы представляет собой файл. узел (метка, атрибут, текст, комментарий и т. д.). В DOM узел Используйте узел для представления.
Доступ ко всем узлам в дереве HTML DOM можно получить через JavaScript, а все элементы HTML (узлы) можно изменять, создавать или удалять.

Обычно узлы имеют как минимум три основных атрибута: nodeType (тип узла), nodeName (имя узла) и nodeValue (значение узла).

• Тип узла элемента равен 1,
• узел узла атрибута равен 2,
• а текстовый узел nodeType равен 3 (текстовые узлы включают текст, пробелы, разрывы строк и т. д.).

我们在实际开发中，节点操作主要操作的是元素节点

5.3 Узел. уровень

использует дерево DOM для разделения узлов. Для различных иерархических отношений наиболее распространенным является父子兄层级关系

1. Родительский узел

node.parentNode

Свойство

• родительский узел может возвращать родительский узел определенного узла.
• Если указанный узел не имеет родительского узла, будет возвращено значение null

. childNodes (стандартный)

returnNode.childNodes включает коллекцию дочерних узлов указанного узла, которая представляет собой немедленно обновляемую коллекцию.
Примечание. Возвращаемое значение содержит все дочерние узлы, включая узлы элементов, текстовые узлы и т. д.
Если вы хотите поместить внутрь только узлы элементов, вам нужно обработать их особым образом. Поэтому мы обычно не поддерживаем использование childNodes

var ul = document. querySelector('ul');for(var i = 0; i < ul.childNodes.length;i++) {if (ul.childNodes[i]. тип узла == 1 ) {
 // ul.childNodes[i] — это узел элемента console.log(ul.childNodes[i]);}}

2. parentNode.children (нестандартный)

parentNode.children — это свойство, доступное только для чтения, которое возвращает все дочерние узлы элемента. Он возвращает только узлы дочерних элементов, а другие узлы не возвращаются (это то, на чем мы фокусируемся).
Хотя дочерние узлы являются нестандартными, они поддерживаются различными браузерами, поэтому мы можем безопасно использовать

3. родительскийNode.firstChild

firstChild для возврата первого дочернего узла или значения null, если он не найден. Аналогично, все узлы включены.

4. parentNode.lastChildlastChild

возвращает последний дочерний узел или ноль, если он не найден. Аналогично, он также содержит все

5. узлы

.

6. ParentNode.lastElementChild

LastElementChild возвращает последний узел дочернего элемента или значение NULL, если оно не найдено.
注意：这两个方法有兼容性问题，IE9 以上才支持

В реальной разработке firstChild и LastChild содержат другие узлы, с которыми неудобно работать, а у firstElementChild и LastElementChild есть проблемы с совместимостью. узел элемента или как насчет последнего узла дочернего элемента?
Решение.

1. Если вам нужен первый узел дочернего элемента, вы можете использовать родительский узел.chilren[0].
2. Если вам нужен последний узел дочернего элемента, вы можете использовать

родительский узел.chilren[parentNode.chilren.length - 1]

Объектная модель

сводного

Объектная модель (сокращенно DOM) — это стандартный программный интерфейс, рекомендованный организацией W3C для обработки расширяемого языка разметки (HTML или XML).

W3C определил ряд интерфейсов DOM, с помощью которых можно изменять содержимое, структуру и стиль веб-страниц.

Что касается JavaScript, то для того, чтобы JavaScript мог работать с HTML, JavaScript имеет собственный набор программных интерфейсов DOM.

В HTML DOM формирует HTML-дерево DOM.

Элемент DOM, содержащий документы, элементы и узлы, является объектом, поэтому его называют объектной моделью документа

. Что касается операций DOM, мы в основном фокусируемся на работе с элементами. В основном включают создание, добавление, удаление, изменение, запрос, операцию с атрибутами и операцию с событием.