Персональная сводка модулей BOM и DOM

HTML

предисловие

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

Эта статья подходит для студентов с опытом работы от 0 до 3, чтобы обобщить знания.

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

Первоначальная цель этой серии - улучшить себя и в то же время поделиться ею, надеюсь, она поможет и вам.

В истории фронтенд-разработки наш язык логики когда-то назывался «js» (Javascript). Позже, с развитием интерфейса и появлением одностраничной архитектуры, логика интерфейса постепенно стала называться «es» (ECMAScript).

Итак, какова связь между js и es (или es6)? Ответ: js = es + bom + dom.

Наши текстовые узлы и тому подобное, включая nodeType, nodeList, childNodes, относятся к категории dom. Вы можете подумать, что nodeType, nodeList, childNodes и другие точки знаний не так важны. В повседневной работе практически не используется. Автор изучает исходный код vue и сталкивается с некоторыми проблемами при конвертации виртуального dom в html, все они решаются через основные пункты этой статьи, и их еще предстоит глубоко проанализировать.

В этой статье дается подробный обзор части js, bom и dom.

концепция

Давайте сначала посмотрим на их концепции:

DOM: объектная модель документа (сокращенно DOM), описывающая методы и интерфейсы для обработки веб-контента. Наиболее фундаментальным объектом является документ (window.document).

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

Буквальное значение относительно легко понять. Если вы все же неоднозначно относитесь к понятию, ну в этом и смысл писать резюме, и обобщать его на удобном вам для понимания языке.Может мое понимание поможет вам углубить ваши знания.

DOM — это наша ежедневная операция, доступ, модификация и т. д. всех текстовых узлов, элементов, атрибутов и т. д. в Html, все в категории DOM. Среди них HTML DOM, который мы используем каждый день, включает стандартную объектную модель HTML, стандарты W3C и другие спецификации.

Спецификация связана со свойствами браузера, такими как окно браузера, переход на страницу браузера и т. д.

Увидев это, друзья, не разбирающиеся в отрасли, могут подумать, что это очень просто. Не очень, очень хорошо осведомлен. Давайте продолжим чтение.

Точка знаний

узел

Сначала поговорим об узлах.

Все содержимое HTML-документа является узлом, например, узел между телом, узел между div и /div, и даже комментарий является узлом комментария. Как правило, в самом внешнем слое, поэтому html также называют корневым узлом.

Тогда можно увидеть, что на обычной странице есть много узлов, и они также имеют интерактивные отношения, такие как дочерние родительские узлы, одноуровневые узлы, затем WC3 определяет, как получить к ним доступ и изменить их. Общие методы перечислены ниже:

  • getElementById() возвращает элемент с указанным идентификатором.

  • getElementsByTagName() возвращает список узлов (набор/массив узлов), содержащих все элементы с указанным именем тега.

  • getElementsByClassName() возвращает список узлов, содержащих все элементы с указанным именем класса.

  • appendChild() Добавляет новый дочерний узел к указанному узлу.

  • removeChild() удаляет дочерние узлы.

  • replaceChild() заменяет дочерние узлы.

  • insertBefore() Вставляет новый дочерний узел перед указанным дочерним узлом.

  • createAttribute() Создает узел атрибута.

  • createElement() создает узел элемента.

  • createTextNode() создает текстовый узел.

  • getAttribute() возвращает указанное значение атрибута.

  • setAttribute() Устанавливает или изменяет указанный атрибут на указанное значение.

  • innerHTML - текстовое значение узла (элемента)

  • parentNode - родительский узел узла (элемента)

  • childNodes - дочерние узлы узла (элемента)

  • атрибуты - узел атрибута узла (элемента)

Это самый простой способ доступа или изменения.

Так что же содержит сам узел?

Здесь три содержания. тип узла, имя узла, значение узла.

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

тип элемента NodeType
элемент 1
Атрибуты 2
текст 3
Примечания 8
Документация 9

Нужно популяризировать, здесь каждый узел имеет атрибут childNodes, который представляет собой объект NodeList (массив классов), который является результатом динамического выполнения запроса на основе структуры DOM, поэтому изменение структуры DOM может автоматически отражаться в Объект NodeList.

Точно так же каждый узел также имеет атрибут дочерних элементов.Разница между ним и дочерними узлами заключается в том, что дочерние узлы хранят объекты NodeList, а дочерние узлы возвращают объекты HTMLCollection. NodeList хранит не только узлы элементов, но и текстовые узлы, узлы комментариев и т. д., а HTMLCollection хранит только узлы элементов.

Разбираем по случаям:

<div id="test">
    hello <span>word</span>
</div>

<script>
    let btn = document.getElementById("test");
    console.log(btn.childNodes, btn.children)
    //NodeList(3) [text, span, text]
    //HTMLCollection(1) [span]
</script>

Еще один момент, который необходимо популяризировать, заключается в том, что будь то дочерние элементы или дочерние узлы, это не массив в реальном смысле (о массиве автор уже подробно рассказывал в сводном массиве ES6, и в этой статье он не будет описываться в Detail), это массив классов.

Если нам нужно преобразовать его в массив, мы можем только вручную преобразовать полученный NodeList или HTMLCollection в массив.

Ни наш NodeList, ни HTMLCollection не являются массивами.Если нам нужно преобразовать в массив, мы можем использовать оператор распространения для работы:

const array = [...NodeList]
const array2 = [...HTMLCollection]

Представленный здесь, можете ли вы представить, как работает виртуальный дом Vue? Проще говоря, он использует объект object для имитации NodeList.

Атрибуты

имя свойства nodeName

Имена атрибутов существуют не только с узлами атрибутов, любой узел имеет имена атрибутов. Атрибут nodeName указывает имя узла. Имена их свойств следующие:

  • nodeName узла элемента совпадает с именем метки
  • nodeName узла атрибута совпадает с именем атрибута.
  • nodeName текстового узла всегда #text
  • nodeName узла документа всегда #document

значение свойства

Атрибут nodeValue указывает значение узла, то есть каждое имя атрибута имеет соответствующее значение атрибута.

  • nodeValue узла элемента undefined или null
  • nodeValue текстового узла — это сам текст
  • nodeValue узла свойства — это значение свойства

узел свойства

Давайте еще раз взглянем на узел свойств. Что такое атрибут? Встроенные объекты в наших элементах — это узлы свойств. Например, стиль, класс и идентификатор называются узлами атрибутов элементов.

  • Element.getAttributeNames();//Получить имена атрибутов
  • Element.getAttribute("class");//Получить значение атрибута класса
  • Element.attributes.item(0);//Получить первую пару ключ-значение атрибута элемента
  • Element.hasAttribute("class");//Определяем, есть ли атрибут класса
  • Element.setAttribute("class", "active");//Установить атрибут класса

Например, если нам нужно сбросить значение класса элемента, мы можем переназначить класс через setAttribute. Конечно, есть и встроенный объект класса, которым можно манипулировать: Element.classList.add("active", "show")

Представленный здесь, можете ли вы представить, как реализованы v-if или v-on для vue? Проще говоря, он обрабатывает его как атрибут элемента, получает соответствующий идентификатор, а затем разбирает его.

мероприятие

Давайте снова популяризируем dom-события: щелчок, мышь и другие события, которые мы используем каждый день, — это dom-события. onclick, onchange, onmousedown, onmouseup, onfocus и т. д., он является событием dom.

Здесь нам нужно популяризировать некоторые холодные знания или подробности о событиях dom:

  1. Если js настраивает событие onclick, оно напрямую перезаписывает событие onclick исходной метки. Как показано в каштане ниже, тест не пройден.

     <div id="btn" onclick="test(this)"> 按钮 </div>

 let btn = document.getElementById("btn");
 btn.onclick = function (e) {
 	 alert("2");
 }
 	
 function test(){
 	alert("1");
 }

2. Триггер onclick исходит от самого прослушивателя, и событие прослушивателя addEventListener также должно обнаруживать перекомпоновку события, поэтому приоритет всегда следующий: onclick>addEventListener, как показано в следующем каштане:

<div id="btn" onclick="test(this)"> 按钮 </div>
	<script>
		let btn = document.getElementById("btn");
		btn.onclick = function (e) {
			alert("1");
		}

		btn.addEventListener("click", function (e) {
			alert("2");
		})
		
	</script>

Сделайте 1, а затем сделайте 2.

3. Среди полученных объектов currentTarget представляет текущий объект, а target представляет объект события. Следующие каштаны:

кнопка 0
кнопка 1
let btn_box = document.getElementById("btn_box");

btn_box.addEventListener("click", function (e) {
	consloe.log( e.currentTarget);
	consloe.log( e.target);
})

Нажмите кнопку 0, объект currentTarget ссылается на btn_click_0, а целевой объект — btn_box.

пользовательское событие

В дополнение к официальному клику, фокусу и другим событиям, которые можно отслеживать, мы также можем настраивать события для мониторинга. Возьмите каштан:

// createEvent创建事件
let myEvent = document.createEvent('Event');
// 定义事件名为'build'.
myEvent.initEvent('', true, true);
//eventType:事件名称
//canBubble:是否支持冒泡
//cancelable：是否可以用 preventDefault() 方法取消事件。
new3Event.name = "document.createEvent创建的自定义事件"
// 如果需要监听事件
document.addEventListener('myEventName', function (e) {
    // e.target matches elem
    alert(e.name)
}, false);

// 触发对象可以是任何元素或其他事件目标
document.dispatchEvent(myEvent);

Это самый простой способ создать «настраиваемое событие», document.createEvent.

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

Прочитав демонстрацию выше, мы, кажется, знаем общее использование. Но в чем его преимущества?

Плюсы и минусы пользовательских событий

Преимущества и недостатки в некоторой степени аналогичны традиционным событиям прослушивателя. Преимущество в том, что модули имеют низкую связанность и не влияют друг на друга.

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

BOM

Далее поговорим об очках знаний бома.

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

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

Он может состоять из следующих 6 частей:

Location

Ниже приведен атрибут Location

Атрибуты описывать каштан
hash Получите якорь, который представляет собой просто # за URL-адресом #detail?a=1
host порт URL + порт www.baidu.com:8080
hostname путь хоста www.baidu.com
href полный URL www.baidu.com?a=1
pathname Возвращает часть пути текущего URL /index.html
port порт 8080
protocol протокол http или https
search протокол Получить параметры, проще говоря, это URL?

Ниже приведен метод определения местоположения

метод описывать
assign загрузить новый документ
reload Обновите страницу
replace Заменить текущий документ новым документом

Navigator

Атрибуты иллюстрировать
appCodeName Возвращает кодовое имя браузера
appName Возвращает имя браузера
appVersion Возвращает информацию о платформе и версии браузера.
cookieEnabled Возвращает логическое значение, указывающее, включены ли файлы cookie в браузере.
platform Возвращает платформу операционной системы, на которой работает браузер
userAgent Возвращает значение заголовка пользовательского агента сервера, отправленного клиентом.

Screen

Атрибуты иллюстрировать
availHeight Возвращает высоту экрана (исключая панель задач Windows)
availWidth Возвращает ширину экрана (исключая панель задач Windows)
colorDepth Возвращает разрядность палитры на целевом устройстве или в буфере
height Возвращает общую высоту экрана
pixelDepth Возвращает цветовое разрешение экрана (бит на пиксель)
width Возвращает общую ширину экрана

History

Атрибуты иллюстрировать
back вернуться на последнюю страницу
forward Назад к следующей странице
go Загрузить определенную страницу в списке истории

Эпилог

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

Категории