В начале статьи я хочу в общих чертах упомянуть, что такое DOM и что такое BOM , потому что эта статья в конечном итоге ориентирована на друзей, которые имеют определенный фундамент JavaScript, но не понимают или даже не знают о DOM и BOM. .
Однако прежде чем мы поговорим о том, что такое DOM и что такое BOM , позвольте мне показать вам всю структуру Javascript :
На рисунке выше мы видим четыре элемента: JavaScript, ECMAScript, DOM и BOM . Какая же связь между ними? Используйте уравнение, чтобы обобщить взаимосвязь между ними:
JavaScript = ECMAscript + BOM + DOM.
Давайте рассмотрим их один за другим :
ECMAscript:
ECMAScript — это язык, переданный ECMA International (ранее Европейской ассоциацией производителей компьютеров) через ECMA-262. стандартизированный язык программирования сценариев . Это стандарт JavaScript (сокращенно JS), и браузеры реализуют этот стандарт .
ECMAscript больше похож на нормативный акт, определяющий, как каждый браузер выполняет синтаксис JavaScript , поскольку мы знаем, что JavaScript — это язык сценариев, который запускается в браузере! Регламент есть, но у нас пока нет возможности взаимодействовать с каждым элементом на странице . В это время родился следующий DOM!
DOM:
DOM ( объектная модель документа ) — это независимый от языка интерфейс прикладного программирования для работы с документами xml и html .
Для JavaScript: чтобы JavaScript мог работать с Html , у JavaScript есть собственный программный интерфейс DOM .
В одном предложении: DOM предоставляет JavaScript «метод» для доступа к элементам HTML и управления ими (причина, по которой мы не используем слово «интерфейс», заключается в том, что мы боимся, что некоторые друзья испугаются, увидев интерфейс, но на самом деле наиболее точное описание дано на JavaScript) интерфейс предоставляется )
Спецификация:
Спецификация — это объектная модель браузера, объектная модель браузера . BOM — это интерфейс, который управляет поведением браузера .
Для JavaScript: Чтобы позволить JavaScript управлять поведением браузера , JavaScript имеет собственный интерфейс BOM .
Одним предложением: BOM предоставляет JavaScript «метод» для управления поведением браузера.
Наконец, среди трех вышеперечисленных компонентов JavaScript ECMscript является спецификацией , а остальные два предоставляют «методы», соответствующие HTML-элементам и браузерам соответственно , поэтому ниже мы сосредоточимся на последних двух: DOM и BOM, даем систематическое объяснение . Поскольку это для новичков, мои следующие объяснения будут максимально простыми и понятными. Если у вас нет хорошей основы, вы можете смело ее есть !
Во-первых, давайте объясним связанные с ним знания о DOM . Я разделил их на две части :
Итак, что такое дерево DOM?
Некоторым новичкам, изучившим DOM, это слово может быть немного незнакомо, но на самом деле дерево DOM не является чем-то особенным из области фантастики. Напротив, для сотрудников фронтенда дерево DOM — это HTML страниц, которые вы обрабатываете. каждый день Дерево состоит из элементов:
В дереве спецификации каждый узел может иметь два идентификатора: он может быть дочерним узлом родительского узла или родительским узлом других дочерних узлов. Давайте вместе рассмотрим следующий код :
<!DOCTYPE html>.
<html lang="ru">
<голова>
<мета-кодировка="UTF-8">
<title>DOM_demo</title>
</голова>
<тело>
<р>
<a href="https://blog.csdn.net/qq_52736131">Раки танцуют танго</a>
</p>
</тело>
</html> Для приведенного выше кода дерево DOM должно быть таким:
В этот раз кто-то хочет спросить, думаете ли вы, что DOM-дерево так долго имеет какое-то отношение к работе с html-элементами ?
Ответ очень актуален, и только понимая древовидную структуру DOM документа, мы можем точно и эффективно управлять элементами DOM , иначе будут появляться различные неожиданные ошибки. Прежде чем мы будем работать с HTML-элементами страницы, мы должны иметь четкое представление DOM всей страницы . Даже если мы на самом деле не рисуем, мы должны иметь в уме четкую структуру контекста.
Что касается некоторых общих методов работы с элементами html в DOM в JavaScript , я разделил их на несколько подразделов, чтобы представить их вам:
// 1. Pass Get значение атрибута id элемента и вернуть объект элемента var element = document.getElementById(id_content) //2. Получаем элемент по значению атрибута name и возвращаем массив объектов элемента var element_list = document.getElementsByName(name_content) //3. Получаем элемент через значение атрибута class элемента и возвращаем массив объектов элемента var element_list = document.getElementsByClassName(class_content) //4. Получаем элемент по имени тега и возвращаем массив объектов элемента var element_list = document.getElementsByTagName(tagName)
// 1. Получение значения атрибута элемента. Естественно, передаваемые параметры представляют собой имена атрибутов, такие как class, id, href. var attr = element.getAttribute(имя_атрибута) //2. Устанавливаем значение атрибута элемента. Передаваемые параметры, естественно, представляют собой имя атрибута элемента и соответствующее значение атрибута, которое необходимо установить. element.setAttribute(attribute_name,attribute_value)
//1. Создайте элемент html, передаваемый параметр — это тип элемента, например p, h1-5, a, в качестве примера ниже используется p var element = document.createElement( "п") //2. Создайте текстовый узел и передайте соответствующее текстовое содержимое (обратите внимание, что это текстовый узел, а не элемент html). вар text_node = document.createTextNode(текст) //3. Создайте узел атрибута, и передаваемый параметр будет соответствующим именем атрибута var attr_node = document.createAttribute(attribute_name) element.setAttributeNode(attr_node)
Обратите особое внимание на третий метод. Этот метод создания узла атрибута должен быть сопоставлен с конкретным элементом , то есть сначала необходимо получить конкретный элемент элемента, создать узел атрибута и, наконец, добавить его. узел атрибута этому элементу (setAttributeNode) .
//1. Добавляем узел в конец элемента. Передаваемый параметр — это тип узла element.appendChild(Node). //2. Вставьте узел перед существующим узлом внутри элемента и по-прежнему передайте параметр типа узла element.insertBefore(new_Node, существующий_Node).
Обратите внимание, что перед добавлением узла необходимо сначала создать узел. В то же время выберите элемент родительского узла . Во втором методе вам даже придется найти дочерние узлы за позицией вставки .
//Удалить узел внутри элемента. Передаваемый параметр — это параметр типа узла element.removeChild(Node).
Обратите внимание, что при удалении необходимо найти соответствующий родительский элемент узла, чтобы удалить его плавно .
Наконец, некоторые общие атрибуты DOM :
//1 Получаем родительский узел текущего элемента var element_father = element.parentNode. //2. Получаем дочерний узел типа элемента html текущего элемента var element_son = element.children. //3. Получаем все типы дочерних узлов текущего элемента, включая элементы HTML, текст и атрибуты var element_son = element.childNodes //4. Получаем первый дочерний узел текущего элемента var element_first = element.firstChild //5. Получаем предыдущий родственный элемент текущего элемента var element_pre = element.previousSibling //6. Получаем следующий родственный элемент текущего элемента var element_next = element.nextSibling //7. Получаем весь текст текущего элемента, включая исходный код HTML и текст var element_innerHTML = element.innerHTML //8. Получаем весь текст текущего элемента, исключая исходный код html var element_innerTEXT = element.innerText
Среди них седьмой означает преобразование html-кода и текста в элементе в text и исходный html-код. выполняется , преобразование его в текст эквивалентно превращению его в обычную строку!
Далее мы снова поговорим о спецификации. Из-за ограниченности места спецификация не будет подробно объясняться (практичность действительно не так велика, как DOM). Давайте сначала рассмотрим введение в спецификацию :
BOM предоставляет несколько «методов» для управления браузером в JavaScript.
Во-первых, давайте воспользуемся изображением, чтобы разобраться в структуре всей спецификации. Подобно DOM, BOM также имеет древовидную структуру:
. На рисунке выше мы видим:
окно является вершиной всей пищевой цепочки дерева спецификации , поэтому каждое вновь открываемое окно считается оконным объектом.
Объект окна имеет следующие общие свойства и методы :
| Свойство/Метод | Значение |
| opener | Родительское окно текущей |
| длины | окнаКоличество кадров в |
| документе | окнаОбъект документа, отображаемый в данный момент в окне |
| alert(string) | Создает диалоговое окно с предупреждением и отображает сообщение |
| close() | Закрыть окно, |
| подтверждение() | Создать диалоговое окно, требующее подтверждения пользователя |
| open(url, name, [options]) | Открыть новое окно и вернуть приглашение объекта нового окна |
| (text, defaultInput) | Создать диалоговое окно который требует от пользователя ввода информации. |
| setInterval(выражение, миллисекунды) | вычисляет выражение после указанного интервала времени |
| setInterval(function, millis enconds, [arguments]) | вызывает функцию setTimeout(expression, миллисекунды) после указанного интервала времени |
| setTimeout(выражение, миллисекунды | |
| ) | после истечения таймера | вычисляет функцию после истечения таймера. |
Среди них вы можете видеть , что выше есть функция alert() , потому что когда мы изучаем JavaScript, большая часть из них. мы используем всплывающее окно функции alert() в качестве потока ввода и вывода. Это моя первая демонстрация , поэтому, когда вы увидите это, вы можете спросить:
когда я использовал функцию alert(), казалось, что окно не упоминалось. Итак, является ли здесь alert() тем же alert(), который я узнал раньше ? Ответ таков:
эти две функции alert() действительно являются одной и той же функцией . Причина, по которой окно можно опустить, заключается в том, что все свойства и методы окна могут быть выражены двумя способами :
(1) метод window.property/window ().
(2) Прямой вызов атрибута/метода () —
это не просто alert(), все вышеуказанные атрибуты и функции окна действительны, заинтересованные друзья могут попробовать это самостоятельно.
Что такое объект местоположения ?
Объект местоположения — это атрибут объекта окна, который предоставляет информацию о документе, загруженном в текущее окно, а также предоставляет некоторые функции навигации.
Объект location имеет следующие общие атрибуты и методы:
| Содержимое | атрибута/метода | |
| имя | хоста | : номер порта|
| хоста | имя хоста | |
| href | весь URL- | адрес|
| имя пути | имя порта | |
| номер | порта | |
| протокол | часть | протокола|
| строка | поискового | запроса|
| reload() | перезагружает текущий URL-адрес | |
| с помощью | функции repalce() | Новый URL-адрес заменяет текущую страницу. |
Фактически, если мы внимательно посмотрим на структурную диаграмму выше, мы обнаружим, что
объект местоположения является не только атрибутом объекта окна, но также атрибутом объекта документа.
Это означает:
window.location = location = document.location.
Что такое объект истории ?
Объект истории является атрибутом объекта окна. Он сохраняет запись доступа пользователя в Интернет. Временная метка этой записи рассчитывается с момента открытия окна.
Объект истории имеет следующие общие атрибуты и методы:
| описания | атрибута/метода. |
| Количество | записей в объекте истории. Функция |
| back() | переходит к предыдущему URL-адресу записи истории браузера, аналогично возврату |
| вперед () | переходит к следующему URL-адресу. записи истории браузера, аналогично идти |
| вперед (число). | Браузер перемещается вперед или назад по объекту истории. |
Наконец, давайте представим объект «Навигатор» .
Объект «Навигатор» — это атрибут окна в спецификации, который идентифицирует клиентский браузер.
Некоторые общие атрибуты, связанные с навигатором:
| описание | атрибута |
| appName | полное имя браузера и информация о версии |
| платформы | системная платформа, на которой расположен браузер |
| плагины | массив информации о плагинах, установленных в браузере |
| userAgent | строка пользовательского агента браузера |
| userLanguage | язык операционной системы по умолчанию |