Share via

  • Artykuł

          

Kurs JavaScript - Jak odwołać się do elementu  Udostępnij na: Facebook

Autor: Mateusz Mikulski

Opublikowano: 2011-12-08

Podczas tworzenia skryptów JavaScript, często pojawia się potrzeba odwołania do konkretnego elementu dokumentu. W języku JavaScript, możesz tego dokonać za pomocą metody getElementById(). Służy ona do odwołania do konkretnego elementu przy użyciu identyfikatora tego elementu. Metoda przyjmuje następującą konstrukcję:

document.GetElementById(id_elementu)

gdzie id_elementu to identyfikator elementu, do którego chcesz się odwołać. Wymieniona metoda zwraca obiekt. Dzięki temu po znaku kropki, możesz odwołać się dodatkowo do konkretnej właściwości danego elementu, np. value

Kolejną metodą, której możesz użyć, aby odwołać się do konkretnych elementów w języku JavaScript, jest metoda getElementsByName(). Przy użyciu tej metody, możesz odwołać się do kilku elementów, które w swojej definicji posiadają właściwość name o określonej treści. Metoda przyjmuje następującą konstrukcję:

document.GetElementsByName(nazwa_elementu)

gdzie nazwa_elementu to nazwa elementu, do którego chcesz się odwołać. Metoda ta zwraca tablicę obiektów, posiadających nazwę podaną jako argument.

Ostatnią, często wykorzystywaną metodą uzyskania dostępu do wybranych elementów, jest metoda GetElementsByTagName(). Przy użyciu tej metody możesz odwołać się do elementów, znajdujących się w określonych znacznikach. Metoda ta zwraca listę wszystkich elementów danego typu znacznika. Wykorzystuje ona następującą konstrukcję:

document.GetElementsByTagName(nazwa_znacznika)

gdzie nazwa_znacznika to nazwa znaczników, których listę chcesz otrzymać. Zamiast konkretnej nazwy znacznika, możesz użyć również znaku *, dzięki któremu otrzymasz listę wszystkich znaczników w dokumencie.

Przykład

Poniższy kod prezentuje przykładowe wykorzystanie metody GetElementById():

<!DOCTYPE html>
<html>
<head>
    <title>Odwołanie do elementów</title>
    <script type="text/javascript">
        function checkElement() {
            alert("Wartość w polu tekstowym to : " + document.getElementById("pole").value);
        }
    </script>
</head>
<body>
    <form>
        <input id="pole" type="text">
        <input onClick="checkElement()" type="button" value="Sprawdź">
    </form>
</body>
</html>

Wynik działania tego skryptu został przedstawiony na Rys. 1.

Rys. 1. Przykład wykorzystania metody GetElementById().

Kolejny przykładowy kod pokazuje wykorzystanie metody GetElementsByName():

<!DOCTYPE html>
<html>
<head>
    <title>Odwołanie do elementów</title>
    <script type="text/javascript">
        function getValues(Objekt) {
        var arr = new Array();
        arr = document.getElementsByName(Objekt);
        alert("Liczba obiektów z nazwą \"Pole\" = " + arr.length);
        }
    </script>
</head>
<body>
    <input name="Pole" type="text" value="Pole1" /><br />
    <input name="Pole" type="text" value="Pole2" /><br />
    <input name="Pole" type="text" value="Pole3" /><br />
    <input id="Button1" type="button" value=" Sprawdź" onclick="getValues('Pole')" />
</body>
</html>

Wynik działania powyższego kodu przedstawiono na Rys. 2.

Rys. 2. Przykładowe użycie metody GetElementsByName().

Ostatni przykład prezentuje wykorzystanie metody GetElementsByTagName():

<!DOCTYPE html>
<html>
<head>
    <title>Odwołanie do elementów</title>
<script type="text/javascript" language="javascript">
    function wszystkie() {
    alert("Liczba znalezionych znaczników HTML " + document.getElementsByTagName("*").length);
    }
    function divy() {
    alert("Liczba znalezionych znaczników DIV " + document.getElementsByTagName("div").length);
    }
    function py() {
    alert("Liczba znalezionych znaczników P " + document.getElementsByTagName("p").length);
    }
    function spany() {
    alert("Liczba znalezionych znaczników SPAN " + document.getElementsByTagName("span").length);
    }
</script>
</head>
<body>
    <div>div</div>
    <div>div</div>
    <p>p</p>
    <span>span</span>
<div>div</div>
<br />
    <input id="button1" type="button" value="Wszystkie elementy" onclick="wszystkie();" />
    <input id="button2" type="button" value="Liczba elementów DIV" onclick="divy();" />
    <input id="button3" type="button" value="Liczba elementów P" onclick="py();" />
    <input id="button4" type="button" value="Liczba elementów SPAN" onclick="spany();" />
</body>
</html>

Wynik działania powyższego kodu przedstawiono na Rys. 3.

Rys. 3. Przykładowe wykorzystanie metody GetElementByTagName().

Praktyczne przykłady

Zobacz, jak praktycznie wykorzystać odwołanie do elementów strony w samouczku: