Wyniki wyszukiwania

    Przykłady użycia DOM

    « Dokumentacja DOM

    Rozdział ten pokazuje kilka dłuższych przykładów użycia DOM na stronach internetowych i zastosowanie XML-a. Gdzie tylko jest to możliwe, przykłady używają ogólnie API, trików i wzorów kodu napisanych w JavaScripcie służących do manipulacji obiektem dokumentu.

    Przykład 1: Wysokość i szerokość

    Następujący przykład pokazuje użycie własności height i width obok obrazków, które się różnią rozmiarami:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
    
    <head>
    <title>Przykład width/height</title>
    <script type="text/javascript">
    function init()
    {
      var arrImages = new Array(3);
      arrImages[0] = document.getElementById("image1");
      arrImages[1] = document.getElementById("image2");
      arrImages[2] = document.getElementById("image3");
      var objOutput = document.getElementById("output");
      var strHtml = "<ul>";
      for (var i = 0; i < arrImages.length; i++)
        strHtml += "<li>image" + (i+1) + 
                ": height=" + arrImages[i].height + 
                ", width=" + arrImages[i].width + 
                ", style.height=" + arrImages[i].style.height + 
                ", style.width=" + arrImages[i].style.width + 
                "<\/li>";
      strHtml += "<\/ul>";
      objOutput.innerHTML = strHtml;
    }
    </script>
    </head>
    <body onload="init();">
    
    <p>Obrazek 1: Brak wysokości, szerokości oraz stylu
        <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif">
    </p>
    <p>Obrazek 2: height="50", width="500", lecz bez stylu 
        <img id="image2" src="http://www.mozilla.org/images/mozilla-banner.gif" 
             height="50" width="500">
    </p>
    <p>Obrazek 3: Brak wysokości, szerokości, lecz style="height: 50px; width: 500px;"
        <img id="image3" src="http://www.mozilla.org/images/mozilla-banner.gif" 
             style="height: 50px; width: 500px;">
    </p>
    
    <div id="output"> </div>
    </body>
    </html>
    

    height i width są także własnościami elementów OBJECT i APPLET.

    Przykład 2: Atrybuty obrazu

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="pl">
    
    <head>
    <title>Modyfikacja obramowania obrazka</title>
    <script type="text/javascript">
    function setBorderWidth(width) {
      document.getElementById("img1").style.borderWidth = width + "px";
    }
    </script>
    </head>
    
    <body>
    <p>
      <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100"
    height="100" alt="test obramowania">
    </p>
    
    <form name="FormName">
      <p><input type="button" value="Utwórz obramowanie 20px-wide" 
    onclick="setBorderWidth(20);"> <input type="button" value="Utwórz obramowanie 5px-wide" 
    onclick="setBorderWidth(5);"></p>
    </form>
    
    </body>
    </html>
    

    Przykład 3: Manipulacja stylami

    W tym prostym przykładzie, niektóre podstawowe własności stylów elementu znacznika HTML są dostępne przy zastosowaniu obiektów stylu elementu i obiektów własności stylu CSS, który może być odzyskiwany i ustawiany z DOM. W tym przypadku manipulujemy bezpośrednio pojedynczym stylem. W następnym przykładzie (zobacz przykład 4), zastosujemy arkusz stylów i jego reguły do zmiany stylów w dokumentach wokół.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
    
    <head>
    <title>Zmiana koloru i rozmiaru czcionki w przykładzie</title>
    <script type="text/javascript">
    function changeText() {
    	var p = document.getElementById("pid");
    	p.style.color = "blue"
    	p.style.fontSize = "18pt"
    }
    </script>
    </head>
    <body>
    <p id="pid" 
    onclick="window.location.href = 'http://www.cnn.com/';">linker</p>
    <form>
    <p><input value="rec" type="button" onclick="changeText();"></p>
    </form>
    </body>
    </html>
    

    Przykład 4: Zastosowanie stylów

    Własność obiektu dokumentu styleSheets zwraca listę arkusza stylów wczytanego do tegoż dokumentu. Można uzyskać dostęp do indywidualnych własności arkusza stylów używając obiektów stylesheet, style oraz CSSRule jak zademonstrowano w poniższym przykładzie, który wyświetla selektory reguł stylu na konsole.

    ss = document.styleSheets;
    for(ii=0;ii<ss.length;ii++) {
    for(i=0;i<ss[0].cssRules.length;i++) {
       dump( ss[ii].cssRules[i].style.selectorText + "\n" );
    }
    

    Dla dokumentu posiadającego tylko jeden styl, dla którego zdefiniowano 3 poniższe reguły:

    BODY { background-color: darkblue; }
    P { font-face: Arial; font-size: 10pt; margin-left: .125in; }
    #lumpy { display: none; }
    

    Wynik skryptu będzie następujący:

    BODY
    P
    #LUMPY
    

    Przykład 5: Propagowanie zdarzeń

    Poniższy przykład demonstruje w prosty sposób jak zainicjować zdarzenia oraz ich obsługę przez DOM. Kiedy BODY tegoż dokumentu zostanie załadowany nasłuch zdarzeń zostaje zarejestrowany w pierwszym rzędzie TABLE. Nasłuch zdarzeń obsługuje zdarzenie przez wykonanie funkcji l_func, która zmienia wartość dolnej komórki tabeli.

    Jednakże, l_func wywołuje również metodę obiektu zdarzenia event.stopPropagation powstrzymującą zdarzenie od dalszego "mieszania" w DOM-ie. Zauważ, że sama tabela posiada uchwyt zdarzenia onclick, który powinien wyświetlić powiadomienie w przypadku kliknięcia na tabelę. Metoda l_func powstrzymała propagacje, tak wiec po zaktualizowaniu danych tabeli faza zdarzenia została zakończona.

    <html>
    <head>
      <style>
        #t-daddy { border: 1px solid red }
        #t1 { background-color: pink; }
      </style>
      <script>
      function l_func(e) {
        t2 = document.getElementById("t2");
        t2.innerHTML = "three";
        e.stopPropagation(); 
        // this ought to keep t-daddy from getting the click. 
      }
      function load() {
        el = document.getElementById("t");
        el.addEventListener("click", l_func, false);
      }
      </script>
    </head>
    <body onload="load();">
    <table id="t-daddy" onclick="alert('hi');">
      <tr id="t">
         <td id="t1">one</td>
      </tr>
      <tr><td id="t2">two</td></tr>
    </table>
    </body>
    </html>
    

    Przykład 6: getComputedStyle

    Poniższy przykład demonstruje jak użyć metody DOM document.defaultView.getComputedStyle() do pobrania stylu elementu, który nie jest zgodny z językiem JavaScript (np., elementReference.style.backgroundColor="rgb(173, 216, 230)"). Typy stylów można pobrać w bardziej bezpośredni sposób style = własności elementReference.style, których lista własności przedstawiona jest DOM Style Reference książki (patrz DOM CSS Properties List). Zobacz również własności stylów w DOM Elements Reference. getComputedStyle() zwraca obiekt ComputedCSSStyleDeclaration, którego własności stylów można związać z metodą getPropertyValue() obiektu, jak pokazuje poniższy przykład dokumentu.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
    
    <head>
     <title>getComputedStyle example</title>
    
     <script type="text/javascript">
       function cStyles() 
      {
       var RefDiv = document.getElementById("d1");
    
       var txtHeight = document.getElementById("t1");
       var h_style = 
    document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height");
       txtHeight.value = h_style;
    
       var txtWidth = document.getElementById("t2");
       var w_style = 
    document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width");
       txtWidth.value = w_style;
    
       var txtBackgroundColor = document.getElementById("t3");
       var b_style = 
    document.defaultView.getComputedStyle(RefDiv,
    null).getPropertyValue("background-color");
       txtBackgroundColor.value = b_style;
      }
     </script>
    
     <style type="text/css">
       #d1 { margin-left: 10px; background-color: rgb(173, 216, 230); 
    height: 20px; max-width: 20px; }
     </style>
    
    </head>
    
    <body>
    
    <div id="d1">&nbsp;</div>
    
    <form action="">
    <p><button type="button" onclick="cStyles();">getComputedStyle</button>
      height<input id="t1" type="text" value="1">
      max-width<input id="t2" type="text" value="2">
      bg-color<input id="t3" type="text" value="3"></p>
    </form>
    
    </body>
    </html>
    

    Przykład 7: Wyświetlanie stałych obiektu zdarzenia

    Przykład pokazuje jak używając DOM można stworzyć tabele zawierającą zarówno wszystkie stałe obiektu zdarzenia jak i ich wartości. Pokazuje kilka ciekawych aspektów DOM, włączając w to własność Event.prototype pozwalającą uzyskać dostęp do własności danego obiektu, dobry wzorzec iteracji przez własności tegoż prototypu oraz same wartości stałych wyświetlanych w tabeli. Zauważ, że środkowy zakres zmiennych to kody znaków reprezentujące klawisze wciśnięte podczas zdarzenia (i do pobrania za pomocą własności charCode). Załaduj poniższy kod jako stronę www, aby zobaczyć stale obiektu zdarzenia.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    
    <title>Show Event properties</title>
    
    <style type="text/css">
      table {border-collapse: collapse;}
      thead {font-weight: bold;}
      td {padding: 2px 10px 2px 10px;}
      .odd {background-color: #efdfef;}
      .even {background-color: #ffffff;}
    </style>
    
    <script type="text/javascript">
    
    function showEventProperties(e)
    {
      function addCell(row, text) {
        var cell = row.insertCell(-1);
        cell.appendChild(document.createTextNode(text));
      }
    
      var e = e || window.event;
      document.getElementById('eventType').innerHTML = e.type;
    
      var table = document.createElement('table');
      var thead = table.createTHead();
      var row = thead.insertRow(-1);
      var lableList = ['#', 'Property', 'Value'];
      var len = lableList.length;
    
      for (var i=0; i<len; i++) { 
        addCell(row, lableList[i]);
      }
    
      var tbody = document.createElement('tbody');
      table.appendChild(tbody);
    
      for (var p in e) {
        row = tbody.insertRow(-1);
        row.className = (row.rowIndex % 2)? 'odd':'even';
        addCell(row, row.rowIndex);
        addCell(row, p);
        addCell(row, e[p]);
      }
    
      document.body.appendChild(table);
    }
    window.onload = function(event){
      showEventProperties(event);
    }
    </script>
    
    <h1>Properties of the DOM <span id="eventType"></span> Event Object</h1>
    

    Przykład 8: Zastosowanie interfejsu DOM Table

    Interfejs DOM HTMLTableElement dostarcza kilku wygodnych metod do tworzenia i modyfikacji tabeli. Dwoma często stosowanymi metodami są table.insertRow i row.insertCell.

    Aby dodać wiersz i kilka komórek do istniejącej tabeli:

    <table id="table0">
     <tr>
      <td>Row 0 Cell 0</td>
      <td>Row 0 Cell 1</td>
     </tr>
    </table>
    
    <script type="text/javascript">
    
    var table = document.getElementById('table0');
    var row = table.insertRow(-1);
    var cell, text;
    for (var i=0; i<2; i++) {
      cell = row.insertCell(-1);
      text = 'Row ' + row.rowIndex + ' Cell ' + i;
      cell.appendChild(document.createTextNode(text));
    }
    
    </script>
    

    Uwagi

    • A table's innerHTML property should never be used to modify a table, although you can use it to write an entire table or the content of a cell.
    • If DOM Core methods document.createElement and element.appendChild are used to create rows and cells, IE requires that they are appended to a tbody element, whereas other browsers will allow appending to a table element (the rows will be added to the last tbody element).
    • There are a number of other convenience methods belonging to the table interface that can be used for creating and modifying tables.

    Autorzy i etykiety dokumentu

    Autorzy tej strony: Ptak82, Bedi, Mgjbot
    Ostatnia aktualizacja: Ptak82,