JavaScript GetElementById

Aby uzyskać dostęp do DOM (Model Object Document to element API programowania), możesz zastosować różne techniki. Jedną z najbardziej pomocnych i popularnych metod jest wykorzystanie metody JavaScript GetElementById (). Wszystkie przeglądarki obsługują JavaScript GetElementById (), w tym Firefox, Internet Explorer, Chrome i tak dalej.

W tym artykule omówiono metodę getElementById () w JavaScript.

Co to jest GetElementById () w JavaScript?

Aby pobrać obiekt elementu HTML za pomocą jego „ID", Użyj "dokument.getElementById ()" metoda.Jest to najszybsza i najbardziej wydajna technika dostępu do elementu DOM. Służy głównie do manipulowania lub uzyskiwania informacji z elementu w dokumencie.

Notatka: Identyfikator elementu powinien być wyjątkowy w dokumencie HTML. Jeśli istnieje wiele elementów z tym samym identyfikatorem w dokumencie HTML, metoda podaje pierwszy element, który wykrywa. Wyświetla null, jeśli nie może zlokalizować elementu w DOM z określonym identyfikatorem.

Jak używać getElementById () w JavaScript?

Postępuj zgodnie z poniższą składnią do użycia metody getElementById ():

dokument.getElementById (id);

Akceptuje „ID„Elementu, na którym musisz wykonać jakąś operację. Ten dodany identyfikator powinien być wyjątkowy w dokumencie i wrażliwych na sprawę.

Przykład 1: Zmień kolor tekstu

W tym przykładzie kliknięcie przycisku spowoduje zmianę koloru nagłówka. Aby to zrobić, stworzymy nagłówek za pomocą

tag i ustaw „Witamy„Jako identyfikator, który pomoże uzyskać ten element:

Witamy w Linuxhint

Następnie utwórz przycisk, w którym dołączono zdarzenie onClick (), które wywoła funkcję zdefiniowaną przez użytkownika JavaScript o nazwie „Zmień kolor()”, Wyzwoluj po kliknięciu przycisku:

Kliknij tutaj

W pliku JavaScript zdefiniuj funkcję o nazwie „Zmień kolor()„To najpierw dostanie dodane nagłówek za pomocą„getElementById ()”Metoda, a następnie wywołać atrybut stylu, aby ustawić kolor równy się na„magenta”:

funkcja ChangeColor ()
dokument.GetElementById („Welcome”).styl.color = "magenta";

Można to zobaczyć z wyjścia po kliknięciu przycisku, kolor dodanego nagłówka jest zmieniany:

Przykład 2: Zmień tekst

Tutaj zmienimy cały tekst nagłówka na przycisk Kliknij. Najpierw utworzymy nagłówek za pomocą

tag poprzez ustawienie identyfikatora jako „chngtxt”:

Witamy w Linuxhint

Następnie załącz zdarzenie onClick () z przyciskiem, które wywoła „ChangeText ()„Funkcja, aby zmienić dodany tekst:

Kliknij tutaj

Zdefiniuj "ChangeText ()”Funkcja w taki sposób, że przyniesie nagłówek za pomocą dokumentu.Metoda getelementById () i zmień tekst po kliknięciu przycisku:

Funkcja ChangeText ()
var demo = dokument.getElementById („chngtxt”).innerHtml = „Najlepsza strona internetowa umiejętności uczenia się”;

Jak widać na wyjściu, po kliknięciu przycisku tekst jest zmieniany:

W JavaScript omówiliśmy wszystkie szczegóły dotyczące metody getElementById ().

Wniosek

GetElementById () to metoda JavaScript stosowana do pobierania elementu HTML DOM. Jest to najbardziej wydajna technika dostępu do elementu DOM. Przeszukuje element za pomocą przypisanego identyfikatora. Jeśli określony identyfikator nie znajduje się w DOM, zwróci NULL. W tym podręczniku omówiono metodę JavaScript getElementById () ze szczegółowymi przykładami.