Начална » кодиране на стоките » 15 JavaScript Методи за DOM манипулация за уеб разработчици

    15 JavaScript Методи за DOM манипулация за уеб разработчици

    Като уеб разработчик често трябва да манипулирате DOM, обектния модел, който се използва от браузърите посочете логическата структура на уеб страници и въз основа на тази структура представя HTML елементи на екрана.

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

    IMAGE: Google Developers

    В тази публикация ще намерите списък с 15 основни метода на JavaScript че подпомага манипулирането на DOM. Вероятно често ще използвате тези методи в кода си и ще се сблъскате с тях в нашите уроци за JavaScript.

    1. querySelector ()

    Най- querySelector () метод връща първия елемент, който съответства на един или повече CSS селектори. Ако не се открие съвпадение, то се връща нула.

    Преди querySelector () бе въведена, разработчиците широко използват getElementById () метод, който извлича елемент с определен документ за самоличност стойност.

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

    Синтаксис
    var ele = document.querySelector (селектор);
    • еле - Първи елемент за съвпадение или нула (ако нито един елемент не съвпада със селекторите)
    • селектор - един или повече CSS селектори, като например "#FooId", ".FooClassName", ".Class1.class2", или ".class1, .class2"
    Пример за код

    В този пример първата

    се избира с querySelector () метод и цветът му се променя на червено.

     
    алинея първа
     
    параграф 2
     
    div един
     
    параграф 3
     
    div две
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'червен';
    Интерактивна демонстрация

    Тествайте querySelector () метод в следващата интерактивна демонстрация. Просто напишете селектора, съответстващ на тези, които можете да намерите в сините кутии (напр. #три), и натиснете бутона Избор. Обърнете внимание, че ако въведете .блок, само първата му инстанция ще бъде избран.

    2. querySelectorAll ()

    за разлика от querySelector () който връща само първата инстанция на всички съвпадащи елементи, querySelectorAll () връща всички елементи, които съответстват на посочения CSS селектор.

    Съответните елементи се връщат като NodeList обект, който ще бъде празен обект, ако не бъдат намерени съответстващи елементи.

    Синтаксис
    var eles = document.querySelectorAll (селектор);
    • Eles - А NodeList обект с всички съвпадащи елементи като стойности на свойства. Обектът е празен, ако не са намерени съвпадения.
    • селектор - един или повече CSS селектори, като например "#FooId", ".FooClassName", ".Class1.class2", или ".class1, .class2"
    Пример за код

    Примерът по-долу използва същия HTML като предишния. В този пример обаче всички абзаци се избират с querySelectorAll (), и са оцветени в синьо.

     
    алинея първа
     
    параграф 2
     
    div един
     
    параграф 3
     
    div две
     
     var odstav = document.querySelectorAll ('p'); за (var p на абзаците) p.style.color = 'blue';

    3. addEventListener ()

    Събития направете справка с това, което се случва с HTML елемент, като кликване, фокусиране или зареждане, към което можем да реагираме с JavaScript. Можем да присвоим JS функции на слушам за тези събития с елементи и направете нещо, когато събитието се е случило.

    Има три начина, по които можете да зададете функция на определено събитие.

    ако Foo () е потребителска функция, можете да я регистрирате като слушател на събития при натискане (извикайте го, когато щракнете върху елемента на бутона) по три начина:

    1.  
    2.  var btn = document.querySelector ("бутон"); btn.onclick = Фу;
    3.  var btn = document.querySelector ("бутон"); btn.addEventListener ('click', foo);

    Методът addEventListener () (третото решение) някои професионалисти; това е най-новият стандарт, позволяващ възлагането на повече от една функция като слушатели на събития на едно събитие - и се предлага с полезен набор от опции.

    Синтаксис
    ele.addEventListener (evt, слушател, [опции]);
    • еле - HTML елементът, който слушателят на събития ще слуша.
    • EVT - Целевото събитие.
    • слушател - Обикновено функцията на JavaScript.
    • настроики - (по избор) Обект с набор от булеви свойства (изброени по-долу).
    Настроики Какво се случва, когато е настроено на вярно?
    улавяне

    Спира пускането на събития, т.е. предотвратява извикването на всички слушатели на събития за същия тип събитие в предците на елемента.

    За да използвате тази функция, можете да използвате 2 синтаксиса:

    1. ele.addEventListener (evt, слушател, вярно)
    2. ele.addEventListener (evt, слушател, capture: true);
    веднъж

    Слушателят се нарича само първия път, когато се случи събитието, след което той автоматично се отделя от събитието и вече няма да бъде задействан от него..
    пасивен

    Действието по подразбиране на събитието не може да бъде спряно с метода preventDefault ().
    Пример за код

    В този пример добавяме извикващ слушател на събитие за кликване Foo, към 

     var btn = document.querySelector ("бутон"); btn.addEventListener (с щракване, Foo); функция foo () alert ('hello');
    Интерактивна демонстрация

    Присвояване на Foo () персонализирана функция като слушател на събитие към някое от следните три събития: вход, кликване или Задържането на курсора & Задействайте избраното събитие в долното поле за въвеждане, като задържите, щракнете или въведете в него.

    4. removeEventListener ()

    Най- removeEventListener () метод отделя слушател на събитие предварително добавени с addEventListener () метод от събитието, за което слуша.

    Синтаксис
    ele.removeEventListener (evt, слушател, [опции]);

    Използва същия синтаксис като гореспоменатия addEventListener () метод (с изключение на веднъж опция, която е изключена). Опциите се използват, за да бъдат много специфични за идентифициране на слушателя, който да бъде отделен.

    Пример за код

    Следвайки примерния код, който използвахме в addEventListener (), Тук премахваме извикващия слушател на събития при кликване Foo от