дом обекти Работа с DOM модела

чрез innerHTML:

Основният инструмент за работещи и динамични промени в страницата е DOM ( Обект на документа Model) - обектен модел, използван за XML/HTML документи. Според модела DOM документът е йерархия. Всеки HTML таг образува отделен елемент на възел, всяка част от текста образува текстов елемент и т.н. Просто казано, DOM е представяне на документ като дърво от тагове. Това дърво се формира от вложена структура от тагове плюс текстови фрагменти на страницата, всеки от които образува отделен възел. Най-простият DOM Нека първо изградим, DOM дървоза следващия документ. Заглавие: Страхотен документ Най-външният етикет е , така че дървото започва да расте оттам. Вътре има два възела: и - те стават дъщерни възли на . Форма за етикети елементни възли(възел на елемента). Представен текст текстови възли(текстов възел). И двата са еднакви възли в DOM дървото. По-сложен пример Нека сега разгледаме една по-важна страница: За лоса Истината за лоса. Лосът е хитро животно .. И коварен Основният елемент на йерархията е html. Има двама потомци. Първото е главата, второто е тялото. И така нататък, всеки вложен етикет е дете на етикета по-горе: На тази фигура синьото показва възлови елементи, черното показва текстови елементи. Дървото се формира от сини възлови елементи - HTML тагове. Ето как изглежда едно дърво, ако го изобразите директно на HTML страница: Между другото, дървото на тази фигура не взема предвид текст, състоящ се само от празни знаци. Например, такъв текстов възел трябва да идва веднага след . Извиква се DOM, който не съдържа такива "празни" възли "нормализиран". Нека да разгледаме един малко по-сложен документ. Данни на документа Внимателно Информация Произведено в Русия Горният таг е html, има деца head и body и т.н. Това води до дърво на тагове: Атрибути В този пример възлите имат следните атрибути: style, class, id. Най-общо казано, атрибутите също се считат за възли в DOM, чийто родител е DOM елементът, на който са посочени. Въпреки това, в уеб програмирането те обикновено не се ровят в тази джунгла и считат атрибутите просто за свойства на DOM възел, който, както ще видим по-късно, може да бъде зададен и променен по искане на програмиста. Всъщност това е тайна, но DOCTYPE също е DOM възел и се намира в DOM дървото вляво от HTML (този факт е скрит в картината). P.S. Това е шега за тайната, разбира се, но не всеки наистина знае за нея. Трудно е да се мисли къде може да бъде полезно подобно знание... Нормализация в различни браузъри При разбор на HTML Internet Explorerведнага създава нормализиран DOM, в който възлите не се създават от празен текст. Firefox има различно мнение, той създава DOM елемент от всеки текстов фрагмент. Следователно във Firefox дървото на този документ изглежда така: На фигурата, за краткост, текстовите възли са просто обозначени с хеш. тялото има 7 деца вместо 3. Opera също има с какво да се похвали. Тя може да добави допълнителен празен елемент „само от себе си“. За да видите това, отворете документа. Той връща броя дъщерни възли на document.body, включително текстови възли. Получавам 3 за IE, 7 за Firefox и 8 (!?) за Opera. На практика тази несъвместимост не създава големи проблеми, но трябва да сте наясно с нея. Например, разликата може да се прояви в случай на изброяване на възли на дърво. Възможностите, които DOM дава Защо, освен красиви рисунки, имате нужда от йерархичен DOM? Много просто: Всеки DOM елемент е обект и предоставя свойства за манипулиране на съдържанието му, за достъп до родители и деца. Обектът документ се използва за манипулиране на DOM. С помощта на document можете да получите желания дървовиден елемент и да промените съдържанието му. Например, този код взема първия елемент с етикета ol, премахва последователно два елемента от списъка и след това ги добавя в обратен ред: Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter) За пример как работи такъв скрипт, щракнете върху текста на страницата на moose В стари уроци и скриптове можете да видите промяна на HTML кода на страница директно чрез извикване на document.write. В съвременните скриптове този метод почти никога не се използва; случаите на правилното му използване могат да се преброят на пръстите на едната ръка. Избягвайте document.write.. Освен когато наистина знаете какво правите (защо тогава четете урок - вече сте гуру) Нека разгледаме по-отблизо методите за достъп и свойствата на DOM елементите. Достъп до елементи Всички достъпи и модификации на DOM произхождат от обекта документ. Да започнем от върха на дървото. document.documentElement Най-горният етикет. В случай на правилна HTML страница, това ще бъде . документ.тяло Етикет, ако присъства в документа (трябва да бъде). Ще се покаже следният пример, когато щракнете върху бутон текстово представянеобектите document.documentElement и document.body. Самият низ зависи от браузъра, въпреки че обектите са еднакви навсякъде. функция go() (alert(document.documentElement) alert(document.body)) Видове DOM елементи Всеки елемент в DOM има тип. Номерът му се съхранява в атрибута elem.nodeType Общо има 12 вида елементи в DOM. Обикновено се използва само един: Node.ELEMENT_NODE, чийто номер е 1. Елементите от този тип съответстват на HTML тагове. Понякога е полезен и типът Node.TEXT_NODE, който е равен на 3. Това са текстови елементи. Други видове в програмиране на javascriptне се използват. Следният пример, когато се щракне върху бутон, ще отпечата типовете document.documentElement и след това типа на последния дъщерен елемент на възела document.body. Това е текстов възел. функция go() ( alert(document.documentElement.nodeType) alert(document.body.lastChild.nodeType)) Текст Пример Например, така би изглеждал документът от примера по-горе в браузър, ако всеки видим елемент беше заобиколен от рамка с номер nodeType в горния десен ъгъл. ... Данни Внимателно Информация Произведено в Русия Тук се показват само елементите в тялото, тъй като те са единствените, които се показват на страницата. За елементи от тип 1 (тагове) съответният таг е посочен в скоби, за текстови елементи(тип 3) - просто число. Дъщерни елементи Всички дъщерни елементи, включително текстовите, са в масива childNodes. Следващият пример преминава през всички деца на document.body. For(var i=0; i BODY стил Това свойство контролира стила. Това е подобно на задаването на стил в CSS. Например можете да зададете element.style.width: Изходен код за този бутон: Яжте общо правилозамени - ако CSS атрибутът има тирета, тогава за да зададете стила, трябва да ги замените с главни букви. Например, за да зададете свойството z-index на 1000, трябва да зададете: Element.style.zIndex = 1000 innerHTML Едно време това свойство се поддържаше само в IE. Сега всички съвременни браузъри го поддържат. Той съдържа целия HTML код вътре в възела и може да бъде променян. Свойството innerHTML се използва главно за динамична промянасъдържание на страницата, например: Document.getElementById("footer").innerHTML = "Чао!" Може би innerHTML е едно от най-често използваните свойства на DOM елемент. className Това свойство определя класа на елемента. Той е напълно подобен на html атрибута "class". Elem.className = "нов клас" onclick, onkeypress, onfocus... И други свойства, започващи с “on...” съхраняват манипулаторни функции за съответните събития. Например, можете да зададете манипулатор на събитие onclick. За повече информация относно тези свойства и манипулатори на събития вижте Темата наистина е сложна. Но, както се казва, дяволът не е толкова страшен, колкото го описват. Това е мястото, където получавам най-твърдия орех: тази супер задача да го „нарисувам“ възможно най-смилаемо, но не напълно примитивно. Досега всички материали, които прочетох, са или неясни, или примитивни. Какво е DOM Съкращението DOM означава Обектен модел на документ(обектен модел на документ). DOM е програмен интерфейс за достъп до съдържанието на HTML, XHTML и XML документи, тоест представяне на HTML, XHTML и XML тагове и атрибути, както и CSS стилове като програмни обекти. Както JavaScript, така и други езици за уеб програмиране работят с този модел. Малко история Има 4 DOM нива (0, 1, 2 и 3). Ниво 0 (1996) включва DOM модели, които съществуват преди ниво 1. Това са главно колекции: document.images, document.forms, document.layers и document.all. Тези модели не са официално DOM спецификации, публикувани от W3C. По-скоро те представляват информация за това, което е съществувало преди началото на процеса на стандартизация. Ниво 1 (1997) също включва основно функционалностотносно обработката на XML документи: множество начини за работа с отделни възли, работа с инструкции за обработка на XML и др. Освен това DOM ниво 1 съдържа редица специални интерфейси, които могат да обработват отделни HTML елементи. Например можете да работите с HTML таблици, формуляри, списъци за избор и др. DOM Level 2 (2002) добави няколко нови функции. Докато DOM ниво 1 нямаше поддръжка за пространства от имена, интерфейсите на DOM ниво 2 съдържат методи за управление на пространства от имена, свързани с изискванията за съставяне и обработка на XML документи. Освен това DOM ниво 2 поддържа събития. Ниво 2 е текущото ниво на спецификацията на DOM, но W3C препоръчва някои раздели от спецификацията на ниво 3. DOM ниво 3 е работна чернова на спецификация, която разширява функционалността на DOM ниво 2. Една от най- важни характеристикиТази версия на спецификацията е способността да работи с множество DOM разширения. Какво означава "софтуерен интерфейс"? Английската дума интерфейс може да се преведе като „контактна зона“. Един компютър, грубо казано, разбира само две неща: празен бит и запълнен бит. Езикът, който „говори“ компютърът, може да се разглежда като безкраен низ от нули и единици, даващи безкраен брой различни комбинации. Всякакви програмен код- това е разбираема интерпретация за програмиста на тези „нули и единици“, с които компютърът работи. По този начин всеки език за програмиране е интерфейс човек-машина. Браузърите работят по същия начин като другите компютърни приложения. Тълкуват в "нули и единици" HTML кодове, XML, CSS, JavaScript, PHP, Perl и др. За да се справим с това многоезичие, е необходима обща платформа. Тази платформа е DOM - спецификация, която не зависи от конкретен език за програмиране или маркиране. Това е интерфейс, който може да се използва в много популярни езици за програмиране, свързани със създаването на уеб страници и способен да разбира и интерпретира DOM обекти. DOM и браузъри DOM и JavaScript В JavaScript горната част на йерархичната стълба на DOM обектите, един вид „проводник“ към този интерфейс, е обектът на документа, а DOM обектите стават негови свойства, свойства на неговите свойства и т.н. Те се наричат ​​още DOM възли. DOM възли Има 12 вида възли в DOM ниво 2. На всеки тип DOM възел се присвоява константа с уникално име. Повечето възли са проектирани да работят с XML. В HTML - JavaScript сборката, която правим, могат да се използват само 5 типа. Но дори този „върх на айсберга“ е много „разпространено дърво“, което не може да бъде разгледано в един или два урока. Пълният набор от константи на типа възли, дефинирани в спецификацията на W3C DOM (възлите, налични за HTML - JavaScript са маркирани в синьо): Постоянно име Значение Описание Възел.ELEMENT_NODE Element Node (връща основния елемент на документа, за HTML документи това е HTML елементът) Възел.ATTRIBUTE_NODE Възел на атрибут (връща атрибут на XML или HTML елемент на документ) Текстов възел (#text) Възел.CDATA_SECTION_NODE CDATA раздел възел (XML: алтернативен синтаксис за показване на данни за знаци) Възел.ENTITY_REFERENCE_NODE Възел.ENTITY_NODE Възел на дяла Възел.PROCESSING_INSTRUCTION_NODE XML директивен възел Възел.COMMENT_NODE Коментар възел Възел.DOCUMENT_NODE Документен възел (основата за достъп до съдържанието на документа и създаване на неговите компоненти) Възел.DOCUMENT_TYPE_NODE Възел тип документ (връща типа на този документ, т.е. стойност на етикет DOCTYPE) Възел.DOCUMENT_FRAGMENT_NODE Възел на фрагмент на документ (извличане на част от дървото на документа, създаване на нов фрагмент на документ, вмъкване на фрагмент като дете на възел и т.н.) Възел.NOTATION_NODE Нотационен възел* * Нотациите са имена, които идентифицират формата на неанализирани секции, формата на елементи, които имат атрибут на нотация, или приложната програма, към която е адресирана директивата. (Не е ясно? И аз още не съм много сигурен.) Структура на документа в DOM < title>Всички обекти на документа са DOM възли. Нека да разгледаме един основен документ: Заглавка на DOM Текст на параграф Ето диаграма на неговото DOM дърво: Всеки възел може да има дъщерни възли (стрелките водят към тях на диаграмата). Обектът на документа - основата на дървото на документа - също е възел, но няма родителски възел и има редица свойства и методи, които другите възли нямат. Има един дъщерен възел: елемент. Един елемент има два дъщерни възела: и , за които всички елементи, съдържащи се в тях, стават дъщерни. внимание! Заглавка на DOM . „Елемент“ и „етикет“ не са синоними. Етикетът е знак за маркиране: - това са два различни тагова. А елементът е обект, маркиран с тези тагове: Елементи и Съдържа текст вътре. Това са техните дъщерни текстови възли. Елементът също има атрибут: align="center" . Възлите на атрибутите също са дъщерни възли на елементите, които ги съдържат. При работа с възли на DOM дърво се използват техните свойства и методи. Някои свойства на възлите Малко въведение Повтарям още веднъж: когато имаме достъп до елементи на страница в скриптове, имаме работа не само с езика Javascript, но и с DOM интерфейса, вграден в него. Понякога трябва да сте наясно с това, понякога можете да забравите, „че говорим в проза“. В този урок няма да вървим по „академичния“ път, като разглеждаме всички свойства на всички възли във всички браузъри. Първо, нека се запознаем с най-практичните и „безконфликтни“ от тях. Ето защо няма да започнем, както е обичайно, с „основните свойства“: nodeName и nodeValue. tagName Връща низ, съдържащ името на етикета на елемента. Всички стойности на tagName съдържат само главни букви. Синтаксис елемент.tagName Пример Тестване на свойството tagName document.write(document.getElementById( "testTagName").tagName) Резултат Тестване на свойството tagName innerHTML Вече се сблъскахме с това свойство (вижте урок 10). И сега разбираме откъде идва: „от дома“. Дава достъп до съдържанието на елемента. Указва не само текстовото съдържание, но и всички HTML тагове, разположени вътре в елемента. Това свойство е не само за четене, но и за промяна на съдържанието. Забележка В IE innerHTML е само за четене за редица елементи: това са всички елементи на таблица, с изключение на	и , както и и . Например създадохме празна таблица без елемент	и искаме да го вмъкнем програмно в

IE ще покаже " неизвестна грешкаизпълнение" и други браузъри ще извършат вмъкването.

В същото време, ако направим заявка за съществуващото съдържание на елемент , например чрез alert(document.getElementById("id").innerHTML) , тогава това ще работи в IE.

Синтаксис

елемент.innerHTML = "присвоен текст"

Пример

Тестване на свойството innerHTML Абзац за вмъкване // Тази функция чете текста и го вмъква в дадения параграф. функция testRead() ( document.getElementById( "цел").innerHTML = document.getElementById( "testInnerHTML").innerHTML } // Тази функция променя текста на дадения параграф. функция testChange() ( document.getElementById( "цел").innerHTML = „Преоцветяване и промяна на текста“ } // Тази функция връща свойството в първоначалната му позиция. функция testReset() ( document.getElementById( "цел").innerHTML = „Абзац за вмъкване“ }

Тестване на свойството innerHTML

Абзац за вмъкване

Обектният модел на документа или "DOM" е програмен интерфейс за достъп до елементи на уеб страници. По същество това е API на страница, който ви позволява да четете и манипулирате съдържанието, структурата и стиловете на страница. Нека да разберем как работи и как работи.

Как се изгражда уеб страница?

Процесът на трансформиране на оригиналния HTML документ в рендерируема, стилизирана и интерактивна страница се нарича „Критичен път на рендиране“. Докато този процес може да бъде разделен на няколко стъпки, както описах в Разбиране на критичния път на рендиране, тези стъпки могат грубо да бъдат групирани в две стъпки. При първия браузърът анализира документа, за да определи какво в крайна сметка ще се покаже на страницата, а при втория браузърът извършва изобразяването.

Резултатът от първия етап е това, което се нарича „дърво за изобразяване“. Дървото за изобразяване е представяне на HTML елементите, които ще бъдат изобразени на страница и свързаните с тях стилове. За да изгради това дърво, браузърът се нуждае от две неща:

CSSOM, представляващ стилове, свързани с елементи

DOM, представяне на елемент

От какво се състои DOM?

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

Структурата на DOM обектите е представена от това, което се нарича "дърво на възли". Нарича се така, защото може да се разглежда като дърво с един родител, което се разклонява на няколко дъщерни клона, всеки от които може да има листа. В този случай родителският "елемент" е коренният елемент, дъщерните "клонове" са вложените елементи, а "листата" са съдържанието в елементите.

Нека вземем този HTML документ като пример:

Моята първа уеб страница Здравей, свят!

как си

Този документ може да бъде представен като следното дърво от възли:

• html
  • главата
    • заглавие
      • Първата ми уеб страница
  • тяло
    • h1
      • Здравей, свят!
    • стр
      • как си

Какво не е DOM

В примера по-горе изглежда, че DOM е съпоставяне 1:1 на оригиналния HTML документ. Въпреки това, както казах преди, има разлики. За да разберем напълно какво е DOM, трябва да разгледаме какво не е.

DOM не е копие на оригиналния HTML

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

1. Когато HTML съдържа грешки в маркирането

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

Разгледайте този HTML документ като пример:

Здравей, свят!

В документа липсват елементите и , което е изискване за HTML. Но ако погледнем полученото DOM дърво, можем да видим, че това е поправено:

• html
  • главата
  • тяло
    • Здравей, свят!
  2. Когато DOM е модифициран от Javascript код

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

  Можем например да създадем допълнителни възли за DOM с помощта на Javascript.

  Var newParagraph = document.createElement("p"); var paragraphContent = document.createTextNode("Аз съм нов!"); newParagraph.appendChild(paragraphContent);document.body.appendChild(newParagraph);

  Този код ще промени DOM, но промените няма да се появят HTML документ.

  DOM не е това, което виждате в браузъра (т.е. дървото за изобразяване)

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

  Тъй като дървото за изобразяване се отнася само до това, което е изобразено, то изключва елементи, които са визуално скрити. Например елементи, които имат стилове с display: none.

  Здравей, свят!

  как си

  DOM ще включва елемента

  • html
    • главата
    • тяло
      • h1
        • Здравей, свят!
      • стр
        • как си

  Дървото на изобразяването обаче и следователно това, което се вижда в прозореца за изглед, няма да бъдат включени в този елемент.

  • html
    • тяло
      • h1
        • Здравей, свят!
  DOM не е това, което се показва в DevTools

  Тази разлика е малко по-малка, защото DevTools Element Inspector осигурява най-близкото приближение до DOM, което имаме в браузъра. Инспекторът на DevTools обаче съдържа допълнителна информация, който не е в DOM.

  Най-добрият пример за това са CSS псевдоелементите. Псевдо елементите, създадени с помощта на селекторите ::before и ::after, са част от CSSOM и дървото за изобразяване, но технически не са част от DOM. Това е така, защото DOM се създава само от оригиналния HTML документ, без да се включват стиловете, приложени към елемента.

  Въпреки че псевдоелементите не са част от DOM, те присъстват в нашия инспектор на елементи devtools.

  
  Резюме

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

В този урок ще разгледаме основите на работа със събития, атрибути и getElementById в JavaScript.

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

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

Например, потребителят ще щракне някъде с мишката и нашият код в отговор ще трябва да обработи това щракване и да покаже някаква информация на екрана. Действията на потребителите, които можем да проследим чрез JavaScript, се наричат ​​събития. Събитията могат да бъдат както следва:плача мишката върху елемент от страницата,напътствие мишка към елемент на страница или обратно -грижа

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

Има няколко начина за работа със събития в JavaScript.

Ще започнем с най-простия от тях. Основи на събитиетоНай-лесният начин да зададете отговор на даден елемент към конкретно събитие е да го посочите с помощта на атрибут за конкретен таг. Например събитие "щракване с мишката"съответства на атрибута onclick, събитие "мишка над"- атрибута onmouseover и събитието

"курсорът напуска елемента" - атрибут onmouseout.Стойността на атрибута със събитието е JavaScript код. В следния пример

като щракнете върху бутон с мишката функцията за предупреждение ще бъде изпълнена:И сега

чрез щракване

функцията func ще бъде изпълнена върху елемента:

функция func() ( предупреждение("!"); )

Можете да изпълнявате не само една функция, а няколко: функция func1 () ( предупреждение ("1"); ) функция func2 () ( предупреждение ("2"); )Моля, имайте предвид, че ако имате нужда от двойни кавички вътре в атрибут (например за низ) и външните кавички на атрибута също са двойни кавички -

onclick="предупреждение("!")" функция func1 () ( предупреждение ("1"); ) функция func2 () ( предупреждение ("2"); )- този код няма да работи. Има няколко начина за борба с това: можете да промените външните кавички на единични кавички, можете също да избягвате вътрешните кавички с обратна наклонена черта onclick="предупреждение(\"!\)".

или просто преместете JavaScript кода от атрибута във функцията и оставете само името на функцията в атрибута функция func1 () ( предупреждение ("1"); ) функция func2 () ( предупреждение ("2"); ) onclick="func()"

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

Сега ще научим как да получаваме елементи от HTML страница и да извършваме различни манипулации с тях (ще можем да променим например техния текст и цвят и много други полезни неща).

Да приемем, че имаме таг на страницата с атрибута id, зададен за тестване.

Нека запишем връзката към този таг в променливата elem. За да направим това, трябва да използваме метода getElementById, който получава елемента по неговия id.Този запис ще се появи, когато се щракне върху бутона, на който сме присвоили атрибута onclick. Като щракнете върху този бутон, ще работи функцията func, която ще намери елемент в HTML страницата с id, равен на test и write

линк към него към променливата elem:.

Сега в променливата elem имаме връзка към елемент с атрибута id в тестовата стойност. Самата променлива elem е обектТози обект и

HTML таг

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

HTML атрибути

чрез JavaScript Сега ще прочетем и променим атрибутите на таговете.Нека отново имаме вход с id равен на test и бутон, при натискането на който ще се стартира функцията func:

Във функцията func ще получим нашия вход

по неговия идентификатор

и напишете връзка към него в променливата elem:

функция func() ( var elem = document.getElementById("test"); )

Нека сега да покажем съдържанието на нашите входни атрибути.

За достъп например до атрибута value трябва да напишете следното: elem.value , където elem е променливата, в която сме написали връзка към нашия елемент с помощта на getElementById, а value е атрибутът на тага, който ни интересува.

Можем да покажем съдържанието на атрибута чрез предупреждение по този начин - alert(elem.value) - или да го запишем в някаква променлива. Нека направим това:

функция func() ( var elem = document.getElementById("test"); elem.value = "www"; //присвоим новое значение атрибуту value } !}

HTML кодът ще изглежда така (атрибутът стойност ще стане www):

Е, сега най-трудното нещо - не можете да въведете променливата elem, но изградете верига от точки по този начин:

функция func() ( alert(document.getElementById("test").value); //ще покаже "!")

По същия начин (верига) можете да пренапишете атрибути:

функция func() (document.getElementById("test").value = "www"; }!}

В повечето случаи обаче въвеждането на променлива е по-удобно. Сравнете два примера - сега въведох променливата elem и мога да чета произволен брой атрибути, докато getElementById се извиква само веднъж:

функция func() ( var elem = document.getElementById("test"); elem.value = "www"; elem.type = "submit"; }!}

Сега не въвеждам нова променлива и затова трябва да извикам getElementById два пъти:

функция func() (document.getElementById("test").value = "www"; document.getElementById("test").type = "submit"; }!}

Според мен този код стана по-сложен, въпреки че отнема един ред по-малко. Освен това, ако искам да променя стойността на id от test на например www, ще трябва да го направя на много места, което не е много удобно.

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

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

Ако използваме променливата elem, не се извършва търсене в страницата (елементът вече е намерен и връзката към него се намира в променливата elem).

Изключения: клас и за атрибути

Вече научихте как да работите с атрибути чрез JavaScript и сега е време да ви кажем, че не всичко е толкова просто - има изключение при работа с атрибути - това е атрибутът клас.

Тази дума е специална в JavaScript и затова не можем просто да пишем elem.classза да прочетете стойността на атрибута клас. Вместо това трябва да пишете elem.className.

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

функция func() ( var elem = document.getElementById("test"); alert(elem.className); )

Между другото, има и други атрибути, които се наричат ​​по различен начин от свойствата.

Например атрибутът for() има свойство, наречено htmlFor.

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

Освен това той показва, че този елемент вече е бил получен чрез метода getElementById.

Нека да видим как да работим с това и какво е удобството на този подход.

Нека имаме задача да щракнем върху вход, за да покажем съдържанието на неговата стойност.

Засега можете да вземете само това решение:

функция func() ( var elem = document.getElementById("test"); alert(elem.value); ) По принцип това едобро решение

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

В този случай ще завършим с нещо подобно:

функция func1() ( var elem = document.getElementById("test1"); alert(elem.value); ) функция func2() ( var elem = document.getElementById("test2"); alert(elem.value); ) функция func3() ( var elem = document.getElementById("test3"); alert(elem.value); )

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

Ако имаме 10 входа, ще трябва да направим 10 функции, което не е удобно.

Нека опростим нашата задача: ще предадем идентификатора на текущия елемент като параметър на функцията.

И вместо голям брой функции, всичко ще бъде сведено до една функция:

функция func(id) ( var elem = document.getElementById(id); alert(elem.value); )

Това решение обаче все още има недостатък - всеки елемент ще трябва да въвежда различен id, което също е донякъде неудобно.

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

Нашето this се предава като функционален параметър и завършва в променливата elem.

Този елемент се държи така, сякаш е получен по следния начин:

var elem = document.getElementById(...)

, но не е нужно да го получавате по този начин, всичко вече е готово и можете да го използвате. Например elem.value сочи към стойността на нашия вход и т.н.И така, ето най-простото решение на нашия проблем: функция func(elem) (alert(elem.value);)Основи на CSS

функция func() ( var elem = document.getElementById("test"); elem.style.color = "red"; )

Можете също така да не въведете променливата elem, но да изградите много дълга верига.

 

---

Прочетете:
Режим на хибернация в Windows - какво е и как да го използвате Процес на рестартиране на браузъра Firefox Безплатно нулиране на нивото на мастилото в принтери Epson L100, L110, L210, L300, L350, L355, L550, L555, L800 VK руската версия на моята страница Форматиране на SD и microSD карти с памет: защо е необходимо и как да го направите