Задача, с която много често се сблъскват начинаещите разработчици на javascript, е избирането на елемент от уеб страница чрез неговия id атрибут.
Да кажем, че имаме код на страница.
Как мога да избера елемент с id="elem" и да извърша някои действия с него?
Тук има няколко варианта за решаване на проблема. Нека сега да ги разгледаме.
Опция 1: Използвайте метода getElementById на Javascript.
Има начин да се обърнете към елемент чрез неговия идентификатор, като използвате "чист" код на javascript, без да използвате библиотеки на трети страни. Този метод трябва да използва метода ggetElementById("element_id"). По този начин ние се отнасяме към елемента, от който се нуждаем, чрез неговия id.
Нека да видим как работи това с прост пример.
Имайте предвид, че тези редове код (скрипт) са под самия елемент. Това е предпоставка този скрипт да работи, т.к. Javascript кодът се изпълнява, докато страницата се зарежда. Ако поставим кода по-горе, тогава ще се позоваваме на елемент на страницата, който все още не е зареден, т.е. няма да е в кода по време на изпълнение на скрипта. Има начини да избегнете това, но това е извън обхвата на тази статия.
В резултат на това, ако всичко работи правилно, ще получим изскачащ прозорец. Този прозорец ще покаже текста, който е вътре в блока div.
Нека сега да видим как можем да решим този проблем по различен начин.
Вариант 2. Използване на библиотеката Jquery.
Втората опция за избор на елемент по неговия id е използването на библиотеката Jquery. На практика в съвременните писмености най-често се използва този метод. Той е много по-удобен и по-лесен за запомняне.
За да се обърнете към елемент чрез неговия id, трябва да използвате конструкцията:
$("#elem")
Тук elem е името, съдържащо се в атрибута id.
защото ще използваме трета страна Javascript библиотека, който се нарича Jquery, тогава тази библиотека трябва първо да бъде свързана.
Добавя се в раздела
, един от начините да направите това е да добавите следния ред код:
За да се зареди библиотеката трябва да има интернет връзка.
Самият скрипт, както в предишния пример, трябва да е под кода на елемента, с който искате да взаимодействате.
По този начин анализирахме два начина как можете да изберете елемент на уеб страница чрез неговия id атрибут и да взаимодействате с него. Изберете метода, който ви подхожда и го използвайте на практика.
В последния урок беше разгледан методът getElementsByTagName, който връща масив ( група) елементи на страницата по име на етикет.
Тук продължава практическа работас javascript и методът getElementById ще бъде разгледан, което е връща препратка към елемент, въз основа на неговия уникален идентификатор.
метод getElementById, точно както getElementsByTagName е метод на обекта документ.
Името на метода се превежда буквално: вземете елемент по id.
Всеки елемент ( тегу) на уеб документ може да бъде присвоен собствен id - идентификатор, благодарение на който елементът става уникалени можете да получите достъп до него, за да работите с него.
обърни внимание e: няма s в името на метода в края на думата Element ( за разлика от метода getElementsByTagName). Това е за удобство и показва, че методът се използва за избор на елемента.
Някои обяснения за кодовия фрагмент по-горе...
- img етикет ( изображенияе) има id - идентификаторът penguin ;
- използвайки метода getElementById, този img таг се избира от идентификатора на пингвина;
- в променлива единствен по рода си връзката е въведенакъм избрания етикет;
- тогава можете да работите с маркера, както при обект чрез променлива unique , точно като работа с обект Date чрез произволна променлива.
След достъп до елемента ( тегу) уеб страница по id с помощта на метода getElementById, ние вече работим с нея като с обект, което означава, че получаваме достъп до атрибутите на етикета като свойства на обекта.
Следователно стойностите на атрибутите вече са стойности на свойства.
Да продължим с предишния пример...
"Замислен пингвин">
Обяснения за примерния код...
- img етикет ( изображенияе) има определени атрибути: src - адрес на файла, width и height - ширина и височина на изображението, alt - алтернативен текст;
- след като имаме достъп до етикета с помощта на метода getElementById като обект, получаваме достъп до атрибутите на маркера, как да обект свойства;
- НО стойности на атрибутиса сега стойности на имотите;
- в javascript свойствата на обекта са достъпни чрез точка. След това показваме alt - алтернативния текст на img тага, като използваме метода за предупреждение на екрана.
Надявам се, че не сте объркани от всичко това. Трябва да разберете едновременно какво се случва на ниво javascript програма и на ниво маркиране на документа.
Тагът img е уникален обект;
Атрибутите width и alt на етикета са свойства на обекта;
Стойности на атрибута "128" и "Замислен пингвин"са стойности на имотите;
// Ето как изглежда от гледна точка на javascript:
var уникален = (
ширина: "128",
алт: "Замислен пингвин"
}
Ето как работи методът getElementById, връщайки препратка към всеки елемент ( етикет) на уеб страницата, ако има уникален идентификатор. След това работим с този елемент на ниво javascript. като с предмет...
Трябва да се има предвид, че: както в предишния урок, тук - когато работите с метода getElementById, редът за извикване на скрипта трябва да бъде поставен в края на html документа
jQuery предоставя други опции за избор на елементи от уеб документ.
За да може скриптът да работи с някой елемент от страницата, този елемент трябва първо да бъде намерен. Има няколко начина да направите това в JavaScript. Намереният елемент обикновено се присвоява на променлива и по-късно чрез тази променлива скриптът получава достъп до елемента и извършва някои действия с него.
Търсене по id
Ако на елемента е даден атрибут id в кода на страницата, тогава елементът може да бъде намерен по id. Това е най-лесният начин. Елементът се търси с помощта на метода getElementById() на глобалния обект на документа.
document.getElementById(id)
Настроики:
id - идентификаторът на елемента, който трябва да бъде намерен. id е низ, така че трябва да е в кавички.
Нека създадем страница, да добавим елемент към нея и да й дадем id, и да намерим този елемент в скрипта:
HTML код:
JavaScript:
| var block = document.getElementById("блок"); конзолен дневник (блок); |
Присвоихме намерения елемент на блоковата променлива и изведохме променливата в конзолата. Отворете конзолата на браузъра, тя трябва да съдържа елемента.
Тъй като търсенето по id е най-лесният и удобен начин, той често се използва. Ако трябва да работите с някакъв елемент в скрипт, тогава атрибутът id е зададен за този елемент в кода на страницата, дори ако не е бил зададен преди това. И намерете елемента по id.
Търсене по клас
Методът getElementsByClassName() ви позволява да намерите всички елементи, принадлежащи към определен клас.
document.getElementsByClassName(клас)
Настроики:
class - клас от елементи, които трябва да бъдат намерени
Методът връща псевдомасив, съдържащ намерените елементи. Нарича се псевдомасив, защото много методи за масиви не работят за него. Но основното свойство остава - можете да се обърнете към всеки елемент от масива. Дори ако бъде намерен само един елемент, той все още е в масива.
Нека добавим елементи към страницата и да им дадем клас. Някои от елементите ще бъдат поставени вътре в блока, който създадохме по-рано. Другата част ще бъде създадена извън блока. Смисълът на това ще стане ясен малко по-късно. Сега страницата ще изглежда така:
HTML код:
JavaScript:
Сега се намират само онези елементи, които се намират в блока.
Търсене по етикет
Методът getElementsByTagName() намира всички елементи с определен таг. Той също така връща псевдомасив с намерените елементи.
document.getElementsByTagName (етикет)
Настроики:
таг - таг на елементите, които трябва да бъдат намерени
Нека намерим всички p тагове, които са на страницата:
| var p = document.getElementsByTagName("p"); конзолен дневник (p); |
Този метод също може да се приложи не към целия документ, а към конкретен елемент. Намерете всички p тагове в блока.
Търсене по селектор
Има методи querySelector() и querySelectorAll(), които намират елементи, които съответстват на даден селектор. Това означава, че ще бъдат намерени елементи, към които стилът би бил приложен, ако беше зададен към такъв селектор. В същото време наличието на такъв селектор в стила на страницата изобщо не е необходимо. Тези методи нямат нищо общо с CSS. Методът querySelectorAll() намира всички елементи, които съответстват на селектора. И методът querySelector() намира един елемент, който е първият елемент в кода на страницата. Тези методи могат да заменят всички начини за намиране на елементи, обсъдени по-рано, защото има селектор на идентификатори, селектор на етикети и много други.
document.querySelector(селектор)
document.querySelectorAll(селектор)
Селекторите са написани по същия начин като в CSS, само не забравяйте да поставите кавички.
Нека добавим списък към страницата и да го намерим чрез селектора. Търсим само един елемент и знаем със сигурност, че ще е първият, защото е единственият на страницата. Следователно в този случай е по-удобно да използвате метода querySelector(). Но когато използвате този метод, трябва да вземете предвид, че същите елементи могат да бъдат добавени към страницата в бъдеще. Това обаче се отнася за повечето методи.
HTML код:
Тези методи могат също да търсят елементи не в целия документ, а в рамките на един елемент.
В примера използвахме само селектори по етикет. Опитайте се да намерите елементи на страницата, като използвате други селектори.
Съседни елементи
За намерения елемент можете да намерите съседи. Всеки елемент е обект и съседните елементи могат да бъдат получени чрез свойствата на този обект. Свойството previousElementSibling съдържа предишния елемент, а свойството nextElementSibling съдържа следващия елемент.
element.previousElementSibling
element.nextElementSibling
Намерете елемента след блока:
Детски елементи
Свойството деца съдържа масив от деца.
елемент.деца
Намерете дъщерните елементи на блока.
Освен че позволяваме на уеб страниците да избират елементи по техния id, ние можем също да избираме елементи по техния атрибут клас.
Задачата също е много често срещана. Когато пиша скриптовете си, трябва да използвам този селектор много често.
Да приемем, че имаме следния код на страница.
Задачата е проста, трябва да изберете елемент с клас class = "elem" и да извършите някои действия с него с помощта на Javascript.
Нека да разгледаме няколко варианта как може да се направи това.
Опция 1: Използвайте метода на Javascript getElementsByClassName.
Ако не използвате никакви допълнителни библиотеки, тогава можете да получите достъп до елемента чрез метода getElementsByClassName("class_name").
Например във връзка с програмен код, можете да добавите следните редове код.
В резултат на това, ако всичко работи правилно, ще получим изскачащ прозорец, в който ще се покаже текстът, който е вътре в блока div.
Моля, обърнете внимание, че резултатът от изпълнението на метода getElementsByClassName ще бъде масив от елементи. На страницата може да има няколко елемента с един и същи клас.
Ето защо в края на конструкцията document.getElementsByClassName("elem") трябва да посочите, че се показва нулевият елемент на масива (). Броенето в Javascript започва от нула, а не от единица.
Но проблемът с използването на метода getElementsByClassName е, че този метод не се поддържа в по-стари версии на браузъри.
Има някои трикове за заобикаляне на това, но това е излишен код. Например можете да използвате регулярни изрази:
If(document.getElementsByClassName == undefined) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\\b"+cl+"\\b"); var elem = this.getElementsByTagName( "*"); за (променлива i = 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };
Това е един от начините за решаване на проблема. Но, честно казано, не е много приемливо за мен да задръствам страницата с ненужен код, така че най-често използвам второто решение на проблема.
Вариант 2. Използване на библиотеката Jquery.
Използването на библиотеката Jquery прави много по-лесно решаването на проблема с избирането на елементи по техния атрибут клас. Трябва да използвате конструкцията:
Тук elem е името на класа, присвоено на елемента.
Трябва да се помни, че за да работи това, първо трябва да се включи библиотеката Jquery. Добавя се в раздела
, един от начините да направите това е да добавите следния ред код:За да се зареди библиотеката трябва да има интернет връзка.
Нека да видим как работи това с пример.
Самият скрипт, както в предишния пример, трябва да е под кода на елемента, с който искате да взаимодействате.
По този начин има два начина, по които можете да взаимодействате с елементи, които имат зададен атрибут class. Изберете този, който ви подхожда най-добре и го използвайте на практика.
Свойството съответства на посочения низ. Тъй като идентификаторите на елементи трябва да бъдат уникални, ако са посочени, те са полезен начин за бърз достъп до конкретен елемент.
Ако трябва да получите достъп до елемент, който няма ID, можешизползвайте querySelector(), за да намерите елемента с помощта на произволен селектор.
Синтаксис
var element = document.getElementById(id);Параметри
id Идентификаторът на елемента за намиране. Идентификаторът е низ, чувствителен към главни и малки букви, който е уникален в рамките на документа; само един елемент може да има даден ID.върната стойност
Обект Element, описващ обекта на DOM елемент, съответстващ на посочения ID, или null, ако в документа не е намерен съответстващ елемент.
пример
HTML
Малко текст тук
JavaScript
функция changeColor(newColor) ( var elem = document.getElementById("para"); elem.style.color = newColor; )резултат
Бележки за употреба
Главна буква на „Id“ в името на този метод трябва дада е правилен, за да функционира кодът; getElementByID() е невалиден и няма да работи, колкото и естествено да изглежда.
За разлика от някои други методи за търсене на елементи като Document.querySelector() и Document.querySelectorAll(), getElementById() е наличен само като метод на глобалния обект на документ и неналичен като метод за всички елементни обекти в DOM. Тъй като стойностите на ID трябва да бъдат уникални в целия документ, няма нужда от"локални" версии на функцията.
пример
здравей word1
здравей word2
здравей word3
здравей word4
Ако няма елемент с дадения id, тази функция връща null. Имайте предвид, че параметърът id е чувствителен към малки и главни букви, така че document.getElementById(" М ain") ще върне нула вместо елемента
Елементи, които не са в документане се търсят от getElementById() . Когато създавате елемент и му присвоявате ID, трябва да вмъкнете елемента в дървото на документа с или подобен метод, преди да имате достъп до него с getElementById() :
var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el ще бъде нула!
Не-HTML документи. Реализацията на DOM трябва да има информация, която казва кои атрибути са от тип ID. Атрибутите с името "id" не са от тип ID, освен ако не е дефиниран така в DTD на документа. Атрибутът id е дефиниран да бъде от тип ID в обичайните случаи на XHTML, XUL и други. Реализации, които не знаят дали атрибутите са от тип ID или не се очаква да върнат null.
Спецификация
| Спецификация | Статус | Коментирайте |
|---|---|---|
| Обектен модел на документ (DOM) Спецификация ниво 1 |
Остарели | Първоначална дефиниция за интерфейса |
| Обектен модел на документ (DOM) ниво 2 Основна спецификация Дефиницията на "getElementById" в тази спецификация. |
Остарели | Замени DOM 1 |
| Обектен модел на документ (DOM) Ниво 3 Основна спецификация Дефиницията на "getElementById" в тази спецификация. |
Остарели | Замени DOM 2 |
| DOM Дефиницията на "getElementById" в тази спецификация. |
Стандарт на живот | Възнамерява да замени DOM 3 |
Съвместимост с браузър
Таблицата за съвместимост на тази страница е генерирана от структурирани данни. Ако искате да допринесете за данните, моля, разгледайте https://github.com/mdn/browser-compat-data и ни изпратете заявка за изтегляне.
Актуализирайте данните за съвместимост в GitHub
| работен плот | Подвижен | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | ръб, край | Firefox | Internet Explorer | Опера | сафари | android webview | Chrome за Android | Firefox за Android | Opera за Android | Safari на iOS | Интернет на Samsung | |
| getElementById | Пълна поддръжка на Chrome 1 | Edge Пълна поддръжка 12 | Firefox Пълна поддръжка 1 | IE Пълна поддръжка 5.5 | Пълна поддръжка на Opera 7 | Пълна поддръжка на Safari 1 | WebView Android Пълна поддръжка Да | Chrome Android Пълна поддръжка 18 | Firefox Android Пълна поддръжка Да | Opera Android Пълна поддръжка 10.1 | Safari iOS Пълна поддръжка 1 | Samsung Internet Android ? |