Skip to main content

Visit Mozilla.org

Dokumentacja Gecko DOM:Przykłady użycia DOM

z Mozilla Developer Center, polskiego centrum programistów Mozilli.

« Dokumentacja Gecko 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.

Spis treści

[edytuj] 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.

[edytuj] 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>

[edytuj] 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>

[edytuj] 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

[edytuj] 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>

[edytuj] 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>

[edytuj] 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>

[edytuj] 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>

[edytuj] 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.
Źródło: "http://developer.mozilla.org/pl/docs/Dokumentacja_Gecko_DOM:Przyk%C5%82ady_u%C5%BCycia_DOM"