Обикновено разработчиците използват jQuery, когато трябва да направят нещо с DOM. Въпреки това, почти всяка DOM манипулация може да бъде извършена чист JavaScriptизползвайки своя DOM API.

Нека разгледаме този API по-подробно:

Накрая ще напишете своя собствена проста DOM библиотека, която може да се използва във всеки проект.

DOM заявки

DOM заявките се правят с помощта на метода .querySelector(), който приема произволен CSS селектор като аргумент.

Const myElement = document.querySelector("#foo > div.bar")

Той ще върне първия съответстващ елемент. Можете да направите обратното - да проверите дали даден елемент съответства на селектор:

MyElement.matches("div.bar") === вярно

Ако искате да получите всички елементи, които съответстват на селектор, използвайте следната конструкция:

Const myElements = document.querySelectorAll(".bar")

Ако знаете към кой родителски елемент да се обърнете, можете просто да търсите сред неговите деца, вместо да търсите в целия код:

Const myChildElemet = myElement.querySelector("input") // Вместо: // document.querySelector("#foo > div.bar input")

Възниква въпросът: защо тогава да използваме други, по-малко удобни методи като.getElementsByTagName()? Има малък проблем - резултатът от output.querySelector() не се актуализира и когато добавим нов елемент(вижте), няма да се промени.

const elements1 = document.querySelectorAll("div") const elements2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) elements1.length === elements2.length // невярно

Също така querySelectorAll() събира всичко в един списък, което го прави не много ефективен.

Как се работи със списъци?

Освен това .querySelectorAll() има две малки странности. Не можете просто да извиквате методи за резултати и да очаквате те да бъдат приложени към всеки от тях (както може би сте свикнали да правите с jQuery). Във всеки случай ще трябва да повторите всички елементи в цикъла. Второ, върнатият обект е списък от елементи, а не масив. Следователно методите на масива няма да работят. Разбира се, има методи за списъци, нещо като .forEach() , но, уви, те не са подходящи за всички случаи. Така че е по-добре да преобразувате списъка в масив:

// Използване на Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) // Или прототип на масив (преди ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // По-лесно: .forEach.call (myElements, doSomethingWithEachElement)

Всеки елемент има някои свойства, които се отнасят до "семейство".

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement.previousElementSibling myElement.nextElementSibling

Тъй като интерфейсът Element е наследен от интерфейса Node, следните свойства също присъстват:

MyElement.childNodes myElement.firstChild myElement.lastChild myElement.previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement

Първите свойства се отнасят за елемента, докато вторите (с изключение на .parentElement) могат да бъдат списъци с елементи от всякакъв тип. Съответно можете да проверите типа на елемента:

MyElement.firstChild.nodeType === 3 // този елемент ще бъде текстов възел

Добавяне на класове и атрибути

Добавянето на нов клас е много лесно:

myElement.classList.add("foo") myElement.classList.remove("bar") myElement.classList.toggle("baz")

Добавянето на свойство към елемент е точно същото като добавянето на свойство към всеки обект:

// Получаване на стойността на атрибута const value = myElement.value // Задаване на атрибута като свойство на елемента myElement.value = "(!LANG:foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Можете да използвате методите .getAttibute(), .setAttribute() и .removeAttribute(). Те незабавно ще променят HTML атрибутите на елемента (за разлика от свойствата на DOM), което ще задейства повторно изобразяване на браузъра (можете да видите всички промени, като инспектирате елемента с помощта на инструментите за разработчици в браузъра). Такива преначертавания не само изискват повече ресурси от настройването на DOM свойства, но могат също да доведат до неочаквани грешки.

Те обикновено се използват върху елементи, които нямат съответните свойства на DOM, като например colspan. Или ако използването им е наистина необходимо, например за HTML свойства при наследяване (вижте).

Добавяне на CSS стилове

Те се добавят по същия начин като другите свойства:

MyElement.style.marginLeft = "2em"

някои определени свойстваможе да се зададе с помощта на .style, но ако искате да получите стойностите след някои изчисления, по-добре е да използвате window.getComputedStyle(). Този метод взема елемента и връща CSSStyleDeclaration, съдържащ стиловете както на самия елемент, така и на неговия родител:

Window.getComputedStyle(myElement).getPropertyValue("margin-left")

Промяна на DOM

Можете да местите елементи:

// Добавяне на element1 като последно дете на element2 element1.appendChild(element2) // Вмъкване на element2 като дете на element1 преди element3 element1.insertBefore(element2, element3)

Ако не искате да преместите, но трябва да поставите копие, използвайте:

// Създаване на клонинг const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

Методът .cloneNode() приема булева стойност като аргумент и ако е true, той също клонира и дъщерни елементи.

Разбира се, можете да създавате нови елементи:

const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("някакъв текст")

И след това ги поставете, както е показано по-горе. Не можете да изтриете елемент директно, но можете да го направите чрез родителския елемент:

MyParentElement.removeChild(myElement)

Можете също да се обърнете косвено към:

MyElement.parentNode.removeChild(myElement)

Методи върху елементите

Всеки елемент има свойства като .innerHTML и .textContent , те съдържат HTML кода и съответно самия текст. Следният пример променя съдържанието на елемент:

// Промяна на HTML myElement.innerHTML = `

Всъщност промяната на HTML е лоша идея, защото губи всички промени, които са направени по-рано, а също така претоварва манипулаторите на събития. По-добре е да използвате този метод само като напълно изхвърлите целия HTML и го замените с копие от сървъра. Като този:

const link = document.createElement("a") const text = document.createTextNode("продължи да четеш...") const hr = document.createElement("hr") link.href = "foo.html" link.appendChild( текст) myElement.appendChild(връзка) myElement.appendChild(hr)

Това обаче ще доведе до две преначертавания на браузъра, докато .innerHTML ще доведе само до едно. Можете да заобиколите това, ако първо добавите всичко към DocumentFragment и след това добавите фрагмента, от който се нуждаете:

Константен фрагмент = document.createDocumentFragment() fragment.appendChild(текст) fragment.appendChild(hr) myElement.appendChild(фрагмент)

Обработчици на събития

Един от най-простите манипулатори:

MyElement.onclick = функция onclick (събитие) ( console.log(event.type + " уволнен") )

Но като общо правило трябва да се избягва. Тук .onclick е свойство на елемента и на теория можете да го промените, но няма да можете да добавяте други манипулатори, използвайки още една функция, която препраща към старата.

По-добре е да използвате .addEventListener() за добавяне на манипулатори. Необходими са три аргумента: тип събитие, функция, която ще се извиква всеки път, когато се задейства, и конфигурационен обект (ще стигнем до това по-късно).

MyElement.addEventListener("клик", функция (събитие) ( console.log(event.type + " уволнен")) myElement.addEventListener("клик", функция (събитие) ( console.log(event.type + " пак ме уволниха"))

Свойството event.target се отнася до елемента, към който е прикачено събитието.

И така можете да получите достъп до всички свойства:

// Свойството `forms` е масив, съдържащ връзки към всички форми const myForm = document.forms const myInputElements = myForm.querySelectorAll("input") Array.from(myInputElements).forEach(el => ( el.addEventListener(" промяна ", функция (събитие) ( console.log(event.target.value) )) ))

Предотвратяване на действия по подразбиране

За целта се използва методът .preventDefault(), който блокира стандартните действия. Например, той ще блокира подаването на формуляр, ако оторизацията от страна на клиента не е била успешна:

MyForm.addEventListener("submit", function (event) ( const name = this.querySelector("#name") if (name.value === "(!LANG:Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Методът .stopPropagation() ще ви помогне, ако имате конкретен манипулатор на събитие, прикачен към дъщерното, и втори манипулатор за същото събитие, прикачен към родителя.

Както бе споменато по-рано, методът .addEventListener() приема незадължителен трети аргумент като конфигурационен обект. Този обект трябва да съдържа някое от следните булеви свойства (всички зададени на false по подразбиране):

• улавяне: събитието ще бъде прикачено към този елемент преди всеки друг елемент по-долу в DOM;
• веднъж: Едно събитие може да бъде фиксирано само веднъж.
• пасивен: event.preventDefault() ще бъде игнориран (изключение по време на грешка).

Най-често срещаното свойство е .capture и е толкова често, че има съкращения за него: вместо да го предавате в конфигурационен обект, просто посочете стойността му тук:

MyElement.addEventListener(тип, слушател, вярно)

Манипулаторите се премахват с помощта на метода .removeEventListener(), който приема два аргумента: типа на събитието и препратка към манипулатора за премахване. Например, свойството once може да бъде имплементирано по следния начин:

MyElement.addEventListener("промяна", функция слушател (събитие) ( console.log(event.type + " се задейства на " + това) this.removeEventListener("промяна", слушател) ))

Наследство

Да приемем, че имате елемент и искате да добавите манипулатор на събития за всички негови дъщерни елементи. След това ще трябва да преминете през тях, като използвате метода myForm.querySelectorAll("input"), както е показано по-горе. Можете обаче просто да добавите елементи към формуляра и да проверите тяхното съдържание с event.target.

MyForm.addEventListener("промяна", функция (събитие) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

И още един плюс на този метод е, че манипулаторът ще бъде прикрепен автоматично към нови дъщерни елементи.

Анимация

Най-лесният начин за добавяне на анимация е да използвате CSS със свойството за преход. Но за повече гъвкавост (например за игра), JavaScript е по-подходящ.

Извикването на метода window.setTimeout() до края на анимацията не е добра идея, тъй като приложението ви може да замръзне, особено на мобилни устройства. По-добре е да използвате window.requestAnimationFrame(), за да запазите всички промени до следващото преначертаване. Той приема функция като аргумент, който от своя страна получава клеймо за време:

const start = window.performance.now() const duration = 2000 window.requestAnimationFrame(function fadeIn (now)) ( const progress = now - start myElement.style.opacity = progress / duration if (progress< duration) { window.requestAnimationFrame(fadeIn) } }

По този начин се постига много гладка анимация. В статията си Марк Браун разглежда тази тема.

Пишем собствена библиотека

Фактът, че в DOM трябва да обикаляте елементи през цялото време, за да направите нещо с тях, може да изглежда доста досаден в сравнение със синтаксиса $(".foo").css((color: "red")) на jQuery. Но защо не напишете някои от вашите собствени методи, за да улесните тази задача?

Const $ = функция $(селектор, контекст = документ) ( const елементи = Array.from(context.querySelectorAll(селектор)) return ( елементи, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) върне това), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) върне това), on (събитие, манипулатор, опции) ( this.elements .forEach(element => ( element.addEventListener(event, handler, options) )) return this ) ) )

Пред

Както можете да видите, резултатите са същите, въпреки че използваните техники са различни. В първия случай използвам собствеността на децата. Това е свойство само за четене и връща колекция HTML елементи, разположен вътре в искания елемент; за да преброя броя им, използвам свойството дължина на тази колекция.

Във втория пример използвам метода childElementCount, който намирам за по-изчистен и потенциално по-поддържан начин (повече за това по-късно, не мисля, че ще имате проблеми с разбирането какво прави).

Мога да опитам да използвам childNodes.length (вместо children.length), но вижте резултата:

Var myList = document.getElementById("myList"); console.log(myList.childNodes.length); // 13

Връща 13, защото childNodes е колекция от всички възли, включително интервали - имайте това предвид, ако ви интересува разликата между дъщерни възли и възли на дъщерен елемент.

Проверка за съществуване на дъщерни възли

За да проверя дали даден елемент има дъщерни възли, мога да използвам метода hasChildNodes(). Методът се връща булевопоказващи тяхното присъствие или отсъствие:

Var myList = document.getElementById("myList"); console.log(myList.hasChildNodes()); // вярно

Знам, че списъкът ми има дъщерни възли, но мога да променя HTML, така че да няма такива; сега маркирането изглежда така:

И ето резултатът от повторното изпълнение на hasChildNodes():

Console.log(myList.hasChildNodes()); // вярно

Методът все още връща true. Въпреки че списъкът не съдържа никакви елементи, той съдържа интервал, който е валиден тип възел. Този методразглежда всички възли, а не само възли на елементи. За да може hasChildNodes() да върне false, трябва отново да променим маркирането:

И сега очакваният резултат се показва в конзолата:

Console.log(myList.hasChildNodes()); // невярно

Разбира се, ако знам, че може да срещна интервал, първо проверявам за съществуването на дъщерни възли, след което използвам свойството nodeType, за да определя дали сред тях има възли на елементи.

Добавяне и премахване на дъщерни елементи

Има техники, които могат да се използват за добавяне и премахване на елементи от DOM. Най-известният от тях се основава на комбинация от методите createElement() и appendChild().

VarmyEl = document.createElement("div"); document.body.appendChild(myEl);

В случая творя