Съдържание
В първата част на този урок видяхме как е структуриран DOM и как работи, в това ще продължим да работим с него, за да разширим неговите функционалности и да можем да манипулираме всички елементи на нашия HTML документ.Работа с DOM
За достъп до обекта документ използваме глобална променлива на документа; Тази променлива е един от ключовите обекти, които браузърът създава за нас, тъй като чрез този обект на документ можем да получим достъп до информацията за документа като цяло и тя ни дава индивидуален достъп до всеки обект на документ.
Както винаги, нека видим пример, с който можем да съгласуваме познатата ни теория с начина, по който тя се прилага в действителност.
ПримерИма много различни видове плодове - има само над 500 сорта банани. Докато добавим безбройните видове ябълки, портокали и други добре познати плодове, ние сме изправени пред хиляди възможности за избор.
Един от най -интересните аспекти на плодовете е сортът, наличен във всяка страна. Живея близо до Лондон, в район, известен със своите ябълки.
Кодът, с който използваме СЛЪНЦЕ Той е доста кратък и прост, но въпреки това улавя различните приложения, които можем да му дадем, ще обясним кода част по част, за да видим как сме използвали обектите.
Едно от най -основните действия, които можем да използваме, е да получим информацията от HTML документа, с който работим, така че първият ред, който сме поставили в нашия код, прави точно това и можем да го видим:
document.writeln ("
URL: "+ document.URL);
В този случай четем стойността на имота document.URL, който връща URL адреса на текущия документ, тоест URL адреса, който браузърът използва за зареждане на документа, в който имаме кода.
Виждаме също как използваме метода writeln:
document.writeln ("
URL: "+ document.URL);
Този метод просто добавя съдържание в края на нашия HTML документ, в този конкретен случай започваме с добавяне на маркер
и след това свойството URL, с това вече сме променили структурата и съдържанието на DOM.
Следващото нещо, което направихме, беше да изберем всички елементи, които имат p етикет в документа, за това използваме следния ред:
var elems = document.getElementsByTagName ("p");
Как виждаме метода getElementsByTagName Той е този, който служи на нашата цел, като в същото време всичко, което този метод събира, ние приписваме на променливата elems.
В следващия ред правим итерация над променливата elems, получавайки зададените обекти, за всеки, който ще повторим, ще добавим ред текст с неговия идентификатор и по -късно ще променим неговите атрибути, за да променим външния му вид .
for (var i = 0; i <elems.length; i ++) {document.writeln ("ID на елемента:" +elems [i] .id); elems [i] .style.border = "средно двойно черно"; elems [i] .style.padding = "4px"; }
Както можем да видим, ние добавяме рамка към всеки елемент, който сме съхранили в нашите променливи elems и допълнително добавяме подложка.
След всичко това, нека най -накрая да видим как изглежда всичко това в браузъра:
Увеличете
Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка 
