компютри

Работа с DOM

Октомври 2020

Работа с DOM


Моделът на документния обект, известен иначе като DOM, е много полезен инструмент за уеб разработчиците - той им позволява да влияят директно върху определени части от HTML документа с програмиране като Javascript. Ето как можете да използвате DOM за добавяне на някои динамични елементи към страниците си.

Командите DOM обикновено съдържат метод, който казва на програмата какво да прави, и свойство, което идентифицира целта на метода. Нека да разгледаме пример за много основна HTML страница:



Примерна HTML страница


Това е пример за основна HTML страница.





Да предположим, че сте искали да използвате Javascript, за да запазите текста на един конкретен параграф в променлива. Използвайки DOM, можете да го направите с команда като тази:

var x = document.getElementById ("проба"). childNodes [0] .nodeValue;

Как работи тази линия? Нека започнем с метода - в този случай getElementById. Методът getElementById прави точно това, което бихте си помислили - грабва определен HTML елемент въз основа на неговия идентификатор. В този случай getElementById ("sample") казва на програмата да търси HTML елемент с идентификатор на "sample". childNodes [0] му казва да се стеснява допълнително до първия възел на „проба“, което означава текста вътре в този елемент. И nodeValue му казва, за да получи стойността на този детски възел. След изпълнение на този ред код, променливата 'x' сега съдържа текстовия низ 'Това е пример за основна HTML страница.'

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

document.getElementById ("проба"). childNodes [0] .nodeValue = "Здравей свят!";

Отново методът getElementById казва на програмата ви какво правите, а свойството childNodes локализира конкретната част от HTML, която искате да повлияете.

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

Ето как може да изглежда кодът:



Примерна HTML страница

функция coolButton ()
{
document.getElementById ("проба"). childNodes [0] .nodeValue = "Здравей свят!";
}



Това е пример за основна HTML страница.






Програмата използва обработващия събитие Javascript onClick (който в основата казва "Направете следното, когато някой кликне върху този обект ..."), за да стартира нашата DOM команда и да промени текста.

JavaScript v.2.0. Работа с DOM, создание элементов, работа с CSS (Октомври 2020)



Тагове Статия: Работа с DOM, HTML, модел на обект на документ, работа с DOM, работа с dom, javascript dom, javascript DOM, използване на dom, използване на DOM