Вградени свойства и методи на обекта на документа ви позволяват да се намери и да е елемент на страницата, и го направи необходимите действия. Например, всеки елемент има имот стил. която ви позволява да промените на елементите на CSS стилове.
елементи от първо ниво
Елементите на горното ниво могат да бъдат достъпни директно използване на свойствата на документа за обект:
- document.documentElement - да се отнася до елемента .
- document.head - да се отнася до елемента .
- document.body - да се отнася до елемента .
По елементи на страницата, не могат да бъдат достъпни, преди да бъде показана в браузъра.
DOM-документ структура е създадена като на изхода на страницата, към екрана. Ако елементът не се показва в браузъра, така че тя не присъства в дървото DOM. В съответствие с това, че е невъзможно да се прилага по отношение на този елемент. нищо не се случва, когато стартирате следния скрипт:
Това се дължи на факта, че по време на изпълнение на елемента на скрипт
Тя не съществува.Сценарият трябва да започне едва след като изходен променлив елемент от екрана.
Търсене на елементи
За да се отнасят до всеки елемент от интерфейса на страницата DOM са въведени специални методи за търсене. Търсенето може да се извършва в съответствие с различни параметри на елементите, така че с помощта на тях можете да намерите всеки елемент.
getElementById ()
документ Object има интегриран метод getElementById (). Той търси елемент от неговия уникален идентификатор номер.
document.getElementById (ID) ID низ, съдържащ уникален идентификатор.
Lorem Ipsum печал.
Deleniti седне veniam.
Lorem Ipsum печал.
Deleniti седне veniam.
Обработка на глобални променливи може да доведе до грешки в програмата. По-правилно е да се използва document.getElementById ().
Този метод е много бързо, тъй като самия браузър създава връзки с елементи с атрибут за идентификатор.
За да търсите номер за да работи правилно, ИД наистина трябва да бъде уникално. Документът не може да бъде няколко елемента с същ идентификационен номер.
getElementsByName ()
документ Object има интегриран метод getElementsByName (). Търсенето се извършва на всички елементи на страницата, с посоченото име на атрибут. Методът връща списък с всички елементи, чието име на атрибут удовлетворява искането.
document.getElementsByName (име) име на низ, съдържащ името на елемент (име на атрибут).
Lorem Ipsum печал.
Deleniti седне veniam.
Получената Списъкът се актуализира автоматично, когато промените съдържанието на страницата.
getElementsByTagName ()
За всеки елемент на метода на страница getElementsByTagName () е на разположение. Този метод се извършва търсене в маркера. Когато той се нарича търсене се провежда в рамките на този елемент. Методът връща списък с всички елементи, които отговарят на искането.
елемент. getElementsByTagName (таг) таг съдържаща името на маркера.
букви, ако заявката за търсене не са от значение. Ако искането за прехвърляне звездичка *. След това методът връща всички наследници на даден елемент.
Lorem Ipsum печал.
Deleniti седне veniam.
Получената Списъкът се актуализира автоматично, когато промените съдържанието на страницата.
getElementsByClassName ()
За всеки елемент на метода на страница getElementsByClassName () е на разположение. Този метод търси глобален атрибут клас. Когато той се нарича търсене се провежда в рамките на този елемент. Методът връща списък на всички елементи с определен клас.
елемент. getElementsByClassName (клас) клас А низ, съдържащ името на класа.
Lorem Ipsum печал.
Deleniti седне veniam.
Получената Списъкът се актуализира автоматично, когато промените съдържанието на страницата.
querySelectorAll ()
За всеки елемент на метода на страница querySelectorAll () е на разположение. Методът връща списък с всички елементи, които отговарят на определен CSS за избор. Когато той се нарича търсене се провежда в рамките на този елемент.
елемент. querySelectorAll (селектор) селектор низ, съдържащ CSS-селектор.
Lorem Ipsum печал.
Deleniti седне veniam.
Този метод е най-често, тъй като те могат да бъдат заменени от всяко от горните методи.
Този метод е с висока производителност, но в резултат на списъка не се актуализира, когато промените съдържанието на страницата.
querySelector ()
За всеки елемент на метода на страница querySelector () е на разположение. Методът се връща на първия елемент, който отговаря на определен CSS-селектор. Когато той се нарича търсене се провежда в рамките на този елемент.
елемент. querySelector (селектор) селектор низ, съдържащ CSS-селектор.
Основното предимство на този метод по отношение querySelectorAll () е, че тя спира, когато първия мач. Това ви позволява да се увеличи производителността. Например, ако ясно известно, че резултатът ще се състои от един елемент, е по-добре да се използва този метод.
Lorem Ipsum печал.
Deleniti седне veniam.
За всеки елемент на страницата () метод близкото е на разположение. Както querySelector (). метод връща първия елемент, който отговаря на определен CSS-селектор. Но търсенето не е вътре в елемента, както и обратното - до йерархията на DOM. В този случай, на елемента, на който се нарича метод, също участват в одита.
елемент. Най-близкото (селектор) селектор низ, съдържащ CSS-селектор.
Принципът на метода е, както следва:
- Първо проверете на самия елемент, на който се извиква метода.
- Освен проверява майка на този елемент. Тогава баба и дядо и така нататък.
- Методът спира на първия елемент и го връща.
Свързани статии