【Серии SSD】DOM0, DOM1, DOM2, DOM3, DOM4, сколько вы знаете

внешний интерфейс JavaScript
【Серии SSD】DOM0, DOM1, DOM2, DOM3, DOM4, сколько вы знаете

Это 14-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления.

предисловие

о примерно【Серия твердотельных накопителей】:
Некоторый интересный контент на переднем плане, нацеленный на 500-1500 слов за 3-10 минут, чтобы что-то получить, не уставая.

DOM является обязательным навыком для фронтенд-инженеров.

DOM Living StandardВот последние стандарты DOM, возможно, вы захотите их собрать.

что такое ДОМ

DOM (объектная модель документа) — это API (интерфейс прикладного программирования) для документов HTML и XML. DOM представляет собой иерархическое дерево узлов, которое позволяет разработчикам добавлять, удалять и изменять части страницы. DOM вырос из DHTML (Dynamic HTML), который был создан Netscape и Microsoft, но теперь стал действительно кросс-платформенным, независимым от языка способом представления и управления разметкой страницы.

DOM0

JavaScriptВ более ранних версиях содержимое API содержимого (например, изображения и формы) предоставляется в файле Early.JavaScriptОпределено в определении'images','forms'и т. д., поэтому мы можем получить доступ к первому изображению или форме с именем «пользователь» следующим образом:

document.images[0]
document.forms['user']

Это фактически предварительная стадия РОМ, не сформировавшая стандартный экспериментальный характер и в настоящее время принято именуемаяDOM0

И что мы знаемonclickсобытие, а такжеDOM0события уровня.

DOM0Преимущества события уровня:

  1. эффективный

  2. Может быть клонирован Node.clone

  3. Удалить события очень просто

    container.onclick=nullТолько что

  4. Немного тоже недостаток, уникальность

Несколько копий будут перезаписаны

Конечно другоеonxxxСобытия тоже, и мы знаемaddEventListenerпринадлежитDOM2событие уровня.

<div id="container" onclick="log1();log2()">点我</div>
<script>	
	function log1() {
		console.log('log1......');
	}
	function log2() {
		console.log('log2......');
	}
	
	// 移除事件
	container.onclick = null
	
</script>

DOM1

хорошо известныйNode,document, document.createElementОба определены на уровне DOM1.

Подробнее о, см.Document Object Model (DOM) Level 1 Specification.

В октябре 1998 года спецификация уровня DOM1 стала рекомендованным стандартом W3C, предоставляя интерфейс для базовой структуры документа и запросов, уделяя особое внимание документам HTML и документам XML.

существуетDOM1, DOM состоит из двух модулей:DOM Core(ядро DOM) иDOM HTML. в,DOM CoreОпределяет стандарт структуры документа на основе XML, который упрощает доступ и работу с любой частью документа.DOM HTMLОн расширяется на основе ядра DOM, добавляя объекты и методы для HTML, такие как: JavaScript вDocumentобъект

Каждый узел имеет свойство nodeType, которое представляет тип узла.

12 числовых констант типа Node представляют:

Константа NodeType Постоянное значение NodeType иллюстрировать
Node.ELEMENT_NODE 1 Наши постоянные div, san, input и т.д.
Node.ATTRIBUTE_NODE 2 Атрибуты.
Node.TEXT_NODE 3 Содержит обычный текст, интерпретируемый буквально, и, возможно, экранированные символы HTML.
Node.CDATA_SECTION_NODE 4 Блок CDATA
Node.ENTITY_REFERENCE_NODE 5 существуетDOM4удалено из спецификации
Node.ENTITY_NODE 6 существуетDOM4удалено из спецификации
Node.PROCESSING_INSTRUCTION_NODE 7 для XML-документовProcessingInstruction (en-US),Например<?xml-stylesheet ... ?>утверждение
Node.COMMENT_NODE 8 Примечания
Node.DOCUMENT_NODE 9 Представляет всю HTML-страницу
Node.DOCUMENT_TYPE_NODE 10 Информация о типе документа (doctype).
Node.DOCUMENT_FRAGMENT_NODE 11 Фрагмент документа. Общая оптимизация производительности.
Node.NOTATION_NODE 12 существуетDOM4удалено из спецификации

DOM2

мы знаем ·addEventListner, document.body.style,getElementByIdЭто все вещи уровня DOM2.

  • Ядро DOMLevel2

    Подробнее см.DOM-Level-2-Core Overview , DOM-Level-2-Coreа такжеDOM-Level-2-Core Changes

    Построен на основе ядра уровня 1, добавляя к узлам больше методов и свойств.

    НапримерimportNode, createElementNS, createAttributeNS, getElementsByTagNameNS and getElementByIdтак далее

  • Представления уровня DOM 2

    Подробнее см.DOM-Level-2-Views Overview

    Для документа определяются различные представления на основе информации о стиле.

    То, что мы используем,document.defaultView, который возвращает, где находится документWindow.

  • События DOM Level2

    Подробнее см.DOM-Level-2-Events Overview

    Объясняет, как использовать события для взаимодействия с документами DOM.

    Мы более знакомы сaddEventListner, на основеEventTargetВся система событий определяется DOM2.

  • Стиль DOM уровня 2

    Подробнее см.DOM-Level-2-Style Overview

    Определяет, как программно получить доступ к информации о стиле CSS и изменить ее.

такие как мы частоCSSStyleDeclaration а такжеCSSStyleSheetэти важные объекты,Не говорите, что не использовали? document.body.styleкоторый возвращаетCSSStyleDeclaration.

  • DOM Level2Traversal и диапазон

    Подробнее см.DOM-Level-2-Traversal-Range Overview

    Представлен новый интерфейс для просмотра документа DOM и выбора определенных его частей.

    Например:createTreeWalkerа такжеcreateNodeIteratorЭти два метода обхода узлов могут быть вам незнакомы:

const nodeIterator = document.createNodeIterator(
    document.body,
    NodeFilter.SHOW_ELEMENT,
    {
      acceptNode(node) {
       return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
     }
   }
);
const pars = [];
let currentNode;

while (currentNode = nodeIterator.nextNode()) {
  pars.push(currentNode);
}

  • DOM Уровень 2 HTML (DOMLevel2HTML)

    Подробнее см.DOM-Level-2-HTML Overview

    Он расширяет базовый API DOM уровня 2 [DOM Level 2 Core] для описания объектов и методов, характерных для документов HTML [HTML 4.01] и документов XHTML [XHTML 1.0].

    Как правило, функциональные возможности, необходимые для управления иерархическими структурами документов, элементами и атрибутами, находятся в основном разделе; функциональные возможности, зависящие от конкретных элементов, определенных в HTML, находятся в этом разделе.

HTMLOptionsCollectionЭто новое дополнение, не говорите, что не знаете, это<option>Коллекция узлов. интерфейса DOMImplementationhasFeatureНо помните, да.

DOM3

Подробнее см.DOM-Level-3-Core Overview,DOM-Level-3-Coreа такжеDOM-Level-3-Core Changes.

Он завершает сопоставление между документами DOM и XML Infoset, включает поддержку XML Base [XML Base], добавляет дополнительную информацию о пользователе в узлы DOM, предоставляет механизмы для анализа префиксов пространства имен или управления атрибутами «ID» и многое другое.

  • DOM加载和保存模块(Загрузка и сохранение DOM): введены методы загрузки и сохранения документов унифицированным способом.
  • DOM验证模块(Проверка DOM): определяет метод проверки документов.
  • DOM核心的扩展(Стиль DOM): поддерживает спецификацию XML 1.0, включая XML Infoset, XPath и XML Base.

DOM4

19 ноября 2015 г. был выпущен DOM4.Подробности см.W3C DOM4.

DOM4 добавляет наблюдателей мутаций в качестве замены исходным событиям мутаций.

резюме

Позвольте мне сначала задать вопрос, что мы часто говоримHTML5Он вышел в 2008 году, что он должен вам соответствовать с DOM?

  1. onclickСерия — это событие уровня DOM0, функция может быть только одна, и ее можно копировать при определенных условиях.
  2. addEventListenerСерии — это события уровня DOM2.
  3. XPathВещи, которые относятся к уровню DOM3, которые обычно не распространены, также могут использоваться для обхода узлов.
  4. DOM4 добавлена ​​возможность наблюдения за изменениями узла.

Подводя итог, можно сказать, что DOM1 и DOM2 — это ядро, а остальное мы не используем.

напиши в конце

Не забывайте первоначальный замысел, [серия SSD], 3-5 минут, 500-1000 слов, есть что набрать, но не устать, если вы считаете, что это хорошо, ваши лайки и комментарии - самая большая мотивация для мне двигаться вперед.

Пожалуйста, посетите группу технического обменаиди сюда. Или добавьте мое облако похорон WeChat и учитесь вместе.

HTML Living Standard
DOM Living Standard
Document Object Model (DOM) Level 1 Specification
DOM-Level-2-Core
DOM-Level-3-Core
DOM Living Standard
Рождение и развитие JavaScript и DOM
Различия между событиями DOM0, DOM1, DOM2 и DOM3
Расширенное программирование на JavaScript (третье издание)
Расширенное программирование с помощью JavaScript (4-е издание)
ДОМ: ДОМ0 ДОМ1 ДОМ2 ДОМ3
# Генерация и разработка JavaScript и DOM

Категории