From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../pl/web/api/element/addeventlistener/index.html | 109 ++++ files/pl/web/api/element/appendchild/index.html | 52 ++ files/pl/web/api/element/attributes/index.html | 82 +++ files/pl/web/api/element/blur/index.html | 21 + files/pl/web/api/element/childnodes/index.html | 49 ++ files/pl/web/api/element/classlist/index.html | 264 ++++++++ files/pl/web/api/element/classname/index.html | 37 ++ files/pl/web/api/element/click/index.html | 23 + files/pl/web/api/element/clientheight/index.html | 47 ++ files/pl/web/api/element/clientnode/index.html | 32 + files/pl/web/api/element/clientwidth/index.html | 47 ++ files/pl/web/api/element/dir/index.html | 34 ++ files/pl/web/api/element/dispatchevent/index.html | 43 ++ files/pl/web/api/element/firstchild/index.html | 101 +++ files/pl/web/api/element/focus/index.html | 23 + files/pl/web/api/element/getattribute/index.html | 43 ++ .../pl/web/api/element/getattributenode/index.html | 36 ++ .../web/api/element/getattributenodens/index.html | 39 ++ files/pl/web/api/element/getattributens/index.html | 47 ++ .../api/element/getboundingclientrect/index.html | 146 +++++ .../api/element/getelementsbytagnamens/index.html | 49 ++ files/pl/web/api/element/hasattribute/index.html | 34 ++ files/pl/web/api/element/hasattributens/index.html | 39 ++ files/pl/web/api/element/hasattributes/index.html | 28 + files/pl/web/api/element/haschildnodes/index.html | 28 + files/pl/web/api/element/id/index.html | 38 ++ files/pl/web/api/element/index.html | 677 +++++++++++++++++++++ files/pl/web/api/element/innerhtml/index.html | 67 ++ .../web/api/element/insertadjacenthtml/index.html | 91 +++ files/pl/web/api/element/insertbefore/index.html | 86 +++ files/pl/web/api/element/lang/index.html | 40 ++ files/pl/web/api/element/lastchild/index.html | 28 + files/pl/web/api/element/length/index.html | 37 ++ files/pl/web/api/element/localname/index.html | 64 ++ files/pl/web/api/element/name/index.html | 60 ++ files/pl/web/api/element/namespaceuri/index.html | 39 ++ files/pl/web/api/element/nextsibling/index.html | 63 ++ files/pl/web/api/element/nodename/index.html | 98 +++ files/pl/web/api/element/nodetype/index.html | 44 ++ files/pl/web/api/element/nodevalue/index.html | 85 +++ files/pl/web/api/element/normalize/index.html | 22 + files/pl/web/api/element/offsetheight/index.html | 61 ++ files/pl/web/api/element/offsetleft/index.html | 73 +++ files/pl/web/api/element/offsetparent/index.html | 28 + files/pl/web/api/element/offsetwidth/index.html | 70 +++ files/pl/web/api/element/onclick/index.html | 66 ++ files/pl/web/api/element/onkeypress/index.html | 21 + files/pl/web/api/element/onkeyup/index.html | 24 + files/pl/web/api/element/onmousedown/index.html | 23 + files/pl/web/api/element/onmousemove/index.html | 29 + files/pl/web/api/element/ownerdocument/index.html | 30 + files/pl/web/api/element/parentnode/index.html | 34 ++ files/pl/web/api/element/prefix/index.html | 28 + .../pl/web/api/element/previoussibling/index.html | 28 + files/pl/web/api/element/queryselector/index.html | 180 ++++++ .../pl/web/api/element/removeattribute/index.html | 36 ++ .../web/api/element/removeattributenode/index.html | 37 ++ .../web/api/element/removeattributens/index.html | 35 ++ files/pl/web/api/element/removechild/index.html | 36 ++ files/pl/web/api/element/replacechild/index.html | 53 ++ files/pl/web/api/element/scrollleft/index.html | 58 ++ files/pl/web/api/element/scrolltop/index.html | 70 +++ files/pl/web/api/element/scrollwidth/index.html | 32 + files/pl/web/api/element/setattribute/index.html | 34 ++ .../pl/web/api/element/setattributenode/index.html | 40 ++ .../web/api/element/setattributenodens/index.html | 41 ++ files/pl/web/api/element/setattributens/index.html | 33 + files/pl/web/api/element/style/index.html | 52 ++ files/pl/web/api/element/tabindex/index.html | 31 + files/pl/web/api/element/tagname/index.html | 37 ++ files/pl/web/api/element/textcontent/index.html | 41 ++ 71 files changed, 4353 insertions(+) create mode 100644 files/pl/web/api/element/addeventlistener/index.html create mode 100644 files/pl/web/api/element/appendchild/index.html create mode 100644 files/pl/web/api/element/attributes/index.html create mode 100644 files/pl/web/api/element/blur/index.html create mode 100644 files/pl/web/api/element/childnodes/index.html create mode 100644 files/pl/web/api/element/classlist/index.html create mode 100644 files/pl/web/api/element/classname/index.html create mode 100644 files/pl/web/api/element/click/index.html create mode 100644 files/pl/web/api/element/clientheight/index.html create mode 100644 files/pl/web/api/element/clientnode/index.html create mode 100644 files/pl/web/api/element/clientwidth/index.html create mode 100644 files/pl/web/api/element/dir/index.html create mode 100644 files/pl/web/api/element/dispatchevent/index.html create mode 100644 files/pl/web/api/element/firstchild/index.html create mode 100644 files/pl/web/api/element/focus/index.html create mode 100644 files/pl/web/api/element/getattribute/index.html create mode 100644 files/pl/web/api/element/getattributenode/index.html create mode 100644 files/pl/web/api/element/getattributenodens/index.html create mode 100644 files/pl/web/api/element/getattributens/index.html create mode 100644 files/pl/web/api/element/getboundingclientrect/index.html create mode 100644 files/pl/web/api/element/getelementsbytagnamens/index.html create mode 100644 files/pl/web/api/element/hasattribute/index.html create mode 100644 files/pl/web/api/element/hasattributens/index.html create mode 100644 files/pl/web/api/element/hasattributes/index.html create mode 100644 files/pl/web/api/element/haschildnodes/index.html create mode 100644 files/pl/web/api/element/id/index.html create mode 100644 files/pl/web/api/element/index.html create mode 100644 files/pl/web/api/element/innerhtml/index.html create mode 100644 files/pl/web/api/element/insertadjacenthtml/index.html create mode 100644 files/pl/web/api/element/insertbefore/index.html create mode 100644 files/pl/web/api/element/lang/index.html create mode 100644 files/pl/web/api/element/lastchild/index.html create mode 100644 files/pl/web/api/element/length/index.html create mode 100644 files/pl/web/api/element/localname/index.html create mode 100644 files/pl/web/api/element/name/index.html create mode 100644 files/pl/web/api/element/namespaceuri/index.html create mode 100644 files/pl/web/api/element/nextsibling/index.html create mode 100644 files/pl/web/api/element/nodename/index.html create mode 100644 files/pl/web/api/element/nodetype/index.html create mode 100644 files/pl/web/api/element/nodevalue/index.html create mode 100644 files/pl/web/api/element/normalize/index.html create mode 100644 files/pl/web/api/element/offsetheight/index.html create mode 100644 files/pl/web/api/element/offsetleft/index.html create mode 100644 files/pl/web/api/element/offsetparent/index.html create mode 100644 files/pl/web/api/element/offsetwidth/index.html create mode 100644 files/pl/web/api/element/onclick/index.html create mode 100644 files/pl/web/api/element/onkeypress/index.html create mode 100644 files/pl/web/api/element/onkeyup/index.html create mode 100644 files/pl/web/api/element/onmousedown/index.html create mode 100644 files/pl/web/api/element/onmousemove/index.html create mode 100644 files/pl/web/api/element/ownerdocument/index.html create mode 100644 files/pl/web/api/element/parentnode/index.html create mode 100644 files/pl/web/api/element/prefix/index.html create mode 100644 files/pl/web/api/element/previoussibling/index.html create mode 100644 files/pl/web/api/element/queryselector/index.html create mode 100644 files/pl/web/api/element/removeattribute/index.html create mode 100644 files/pl/web/api/element/removeattributenode/index.html create mode 100644 files/pl/web/api/element/removeattributens/index.html create mode 100644 files/pl/web/api/element/removechild/index.html create mode 100644 files/pl/web/api/element/replacechild/index.html create mode 100644 files/pl/web/api/element/scrollleft/index.html create mode 100644 files/pl/web/api/element/scrolltop/index.html create mode 100644 files/pl/web/api/element/scrollwidth/index.html create mode 100644 files/pl/web/api/element/setattribute/index.html create mode 100644 files/pl/web/api/element/setattributenode/index.html create mode 100644 files/pl/web/api/element/setattributenodens/index.html create mode 100644 files/pl/web/api/element/setattributens/index.html create mode 100644 files/pl/web/api/element/style/index.html create mode 100644 files/pl/web/api/element/tabindex/index.html create mode 100644 files/pl/web/api/element/tagname/index.html create mode 100644 files/pl/web/api/element/textcontent/index.html (limited to 'files/pl/web/api/element') diff --git a/files/pl/web/api/element/addeventlistener/index.html b/files/pl/web/api/element/addeventlistener/index.html new file mode 100644 index 0000000000..781ec7f3b6 --- /dev/null +++ b/files/pl/web/api/element/addeventlistener/index.html @@ -0,0 +1,109 @@ +--- +title: element.addEventListener +slug: Web/API/Element/addEventListener +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/EventTarget/addEventListener +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda addEventListener pozwala zarejestrować obserwatora zdarzeń dla określonego typu zdarzenia na elemencie.

+

Składnia

+
target.addEventListener(type, listener, useCapture);
+
+
+
+ type 
+
+ Łańcuch przedstawiający typ zdarzenia do nasłuchu.Need a link here
+
+ listener 
+
+ Obiekt, który otrzymuje zawiadomienie, gdy nastąpi zdarzenie określonego typu. Musi być zaimplementowanym obiektem interfejsu EventListener lub pojedynczą funkcją JavaScript.
+
+ useCapture 
+
+ Jeśli zostanie ustawione na true, useCapture wskazuje, że użytkownik chce przechwytywać zdarzenia. Po rozpoczęciu przechwytywania, wszystkie zdarzenia typu type będą przekazywane do naszego listener'a zanim zostaną wysłane do innych obiektów nasłuchujących (EventTarget) znajdujących się poniżej w drzewie DOM. Zdarzenia, które propagują w górę drzewa nie uruchamiają systemu nasłuchującego (listener) ustawionego na przechwytywanie.
+
+

Dla uzyskania szczegółowego objaśnienia zobacz DOM Level 3 Events.

+

Przykład

+
 <html>
+ <head>
+   <title>Przykład zdarzenia DOM</title>
+   <style type="text/css">
+     #t { border: 1px solid red }
+     #t1 { background-color: pink; }
+   </style>
+   <script type="text/javascript">
+
+   // Funkcja zmieniająca zawartość komórki tabeli t2
+   function modifyText() {
+     var t2 = document.getElementById("t2");
+     t2.firstChild.nodeValue = "Trzy";
+   }
+
+   // Funkcja dodająca obserwatora zdarzeń dla tabeli t
+   function load() {
+     var el = document.getElementById("t");
+     el.addEventListener("click", modifyText, false);
+   }
+
+   </script>
+ </head>
+ <body onload="load();">
+ <table id="t">
+   <tr><td id="t1">Jeden</td></tr>
+   <tr><td id="t2">Dwa</td></tr>
+ </table>
+ </body>
+ </html>
+
+

W powyższym przykładzie, funkcja modifyText() została zarejestrowana za pomocą addEventListener() do obsługi zdarzenia typu click na tabeli t. Kliknięcie w dowolnym miejscu tej tabeli rozpocznie propagowanie zdarzenia i wywoła funkcję modifyText().

+

Uwagi

+

Po co używać addEventListener?

+

addEventListener daje możliwość zarejestrowania obsługi zdarzenia według specyfikacji W3C DOM. Korzyści są następujące:

+ +

Alternatywne, starsze sposoby rejestracji zdarzeń są opisane poniżej.

+

Dodawanie nasłuchu podczas obsługi zdarzenia

+

Jeśli podczas obsługi zdarzenia zostanie dodany nowy obiekt nasłuchujący to zdarzenie, nie zostanie on uruchomiony dla tego zdarzenia. Może zostać wywołany podczas dalszego etapu przepływu zdarzeń(Event flow), np. w fazie propagowania zdarzenia w górę drzewa DOM.

+

Identyczne obiekty nasłuchujące

+

Jeśli kilka identycznych obiektów nasłuchujących zostanie zarejestrowanych dla tego samego zdarzenia (EventTarget) z tymi samymi parametrami to duplikaty są ignorowane. Obiekt nasłuchujący nie będzie wywołany więcej niż jeden raz. Powielone powiązania nie muszą być usuwane ręcznie za pomocą funkcji removeEventListener, ponieważ są one usuwane automatycznie.

+

Wartość this

+

Doczepianie akcji używając addEventListener() zmienia wartość this—zauważ, że wartość this ijest przekazywana funkcji przez zdarzenie.

+

W powyższym przykładzie, wartość this wewnątrz modifyText() gdy zostanie wywołana ze zdarzenia onclick event jest odwołaniem do tabeli 't'. Jeśli obsługa zdarzenia onclick jest dodana w źródle HTML:

+
<table id="t" onclick="modifyText();">
+  ...
+</table>
+
+

to wartość this wewnątrz funkcji modifyText() wywołanej z poziomu zdarzenia onclick będzie odwołaniem od obiektu globalnego(window).

+

Internet Explorer

+

W IE 8 i niższych należy użyć attachEvent zamiast standardowego addEventListener. By wspierać IE, powyższy przykład może zostać zmodyfikowany do:

+
if (el.addEventListener){
+  el.addEventListener('click', modifyText, false);
+} else if (el.attachEvent){
+  el.attachEvent('onclick', modifyText);
+}
+
+

Starsze sposoby dołączania zdarzeń

+

addEventListener() zostało wprowadzone wraz ze specyfikacją DOM 2 Events. Wcześniej, zdarzenia były dołączone jak pokazano poniżej:

+
// Using a function reference—note lack of '()'
+el.onclick = modifyText;
+
+// Używając deklaracji funkcji
+element.onclick = function(){
+                    // ... logika funkcji ...
+                  };
+
+

Ta metoda zastępuje istniejącą obsługę zdarzenia onclick na elemencie jeśli jest jakakolwiek. Podobnie do innych zdarzeń 'on' takich jak onblur, onkeypress, i tak dalej.

+

Ponieważ była to istotna część DOM 0, ta metoda jest bardzo szeroko wspierana i nie wymaga specjalnych kodów do różnych przeglądarek; stąd też jest to normalnie używana do dynamicznego zaczepienia obsługi zdarzenia jeśli nie potrzeba dodatkowych możliwości  addEventListener().

+

Specyfikacja

+

DOM Level 2 Events: addEventListener

+

{{ languages( { "en": "en/DOM/element.addEventListener", "fr": "fr/DOM/element.addEventListener", "ja": "ja/DOM/element.addEventListener" } ) }}

diff --git a/files/pl/web/api/element/appendchild/index.html b/files/pl/web/api/element/appendchild/index.html new file mode 100644 index 0000000000..ae2b141231 --- /dev/null +++ b/files/pl/web/api/element/appendchild/index.html @@ -0,0 +1,52 @@ +--- +title: element.appendChild +slug: Web/API/Element/appendChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/appendChild +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Metoda Node.appendChild() wstawia określony węzeł na koniec listy dzieci określonego rodzica. Jeśli węzeł ma już rodzica, jest on najpierw od niego oddzielany.

+ +

Składnia

+ +
var dziecko = element.appendChild(dziecko)
+
+ + + +

Opis

+ +

Metoda appendChild zwraca referencję do dodanego węzła. 

+ +

Przykład

+ +
// Tworzy nowy element paragrafu
+var p = document.createElement("p");
+
+// Wstawia go na koniec ciała dokumentu
+document.body.appendChild(p);
+
+ +

 

+ +

Uwagi

+ +

appendChild jest jedną z fundamentalnych metod w programowaniu z użyciem DOM. Metoda ta wstawia nowy węzeł do struktury DOM dokumentu HTML. Jest to druga część procesu stwórz-i-wstaw, podstawowego przy programowym budowaniu strony. Inne związane z tym metody to insertBefore, replaceChild i removeChild.

+ +

Jeśli dziecko jest referencją do węzła, który istnieje już w dokumencie, appendChild przenosi go z dotychczasowej pozycji w nowe miejsce (tj. nie ma potrzeby odzielać węzeł od jego rodzica przed wstawieniem go do innego węzła).

+ +

Specyfikacja

+ +

DOM Level 2 Core: appendChild

+ +

{{ languages( { "en": "en/DOM/element.appendChild", "fr": "fr/DOM/element.appendChild", "ja": "ja/DOM/element.appendChild" } ) }}

diff --git a/files/pl/web/api/element/attributes/index.html b/files/pl/web/api/element/attributes/index.html new file mode 100644 index 0000000000..5ae9839a79 --- /dev/null +++ b/files/pl/web/api/element/attributes/index.html @@ -0,0 +1,82 @@ +--- +title: element.attributes +slug: Web/API/Element/attributes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/attributes +--- +

{{ ApiRef() }}

+

Podsumowanie

+

attributes zwraca kolekcję atrybutów określonych dla danego elementu.

+

Składnia i wartości

+
var kolekcjaAtrybutów = elementNodeReference.attributes;
+
+

Typem zwracanego obiektu kolekcji jest NamedNodeMap. Jeśli element nie ma określonych żadnych atrybutów, zwrócony obiekt ma zerową długość. Właściwość attributes jest tylko do odczytu.

+

kolekcjaAtrybutów to referencja do kolekcji atrybutów.

+

Przykład

+
// weź pierwszy element <p> z dokumentu
+var para = document.getElementsByTagName("p")[0];
+var atts = para.attributes;
+
+

Uwagi

+

Zwracany obiekt ma typ NamedNodeMap, nazywany także kolekcją, będący listą węzłów, a nie ciągów znakowych. Właściwości obiektów atrybutów dostępne są poprzez indeks, tak jak w poniższym przykładzie, który pobiera parę nazwa/wartość pierwszego atrybutu akapitu "p1":

+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<html>
+
+ <head>
+  <title>Attributes example</title>
+  <script type="text/javascript">
+   function showFirstAttr()
+   {
+    var FirstParg = document.getElementById("p1");
+    var outputText = document.getElementById("result");
+
+    if (FirstParg.hasAttributes())
+    // sprawdźmy, czy FirstParg ma atrybuty
+     {
+      outputText.value = FirstParg.attributes[0].name + "->"
+                       + FirstParg.attributes[0].value;
+     }
+    else
+     {
+      outputText.value = "Brak atrybutów do wyświetlenia"
+     };
+   }
+  </script>
+ </head>
+
+<body>
+ <p id="p1" style="color: green;">Przykładowy akapit</p>
+ <form action="">
+  <p><input type="button" value="Pokaż nazwę i wartość pierwszego atrybutu"
+      onclick="showFirstAttr();">
+  <input id="result" type="text" value=""></p>
+ </form>
+</body>
+</html>
+
+

Obiekt z atrybutami jest kolekcją, która podobna jest do tablicy, ponieważ ma właściwość length, a do atrybutów można odnosić się poprzez indeks liczbowy, ale kolekcja nie posiada specjalnych metod, jakie mają tablice, jak join, split, itd.

+

Kolejność w kolekcji atrybutów nie jest wiarygodna - dwie przeglądarki po otrzymaniu takiego samego kodu znaczników mogą zwracać różnie uporządkowane obiekty attributes.

+

By uzyskać dostęp do konkretnego atrybutu, użyj metody getAttribute lub zapisu z użyciem kropki:

+
 // pokaż id elementu, jeśli element go posiada
+ if(element.id)
+  {
+   alert("id elementu to " + element.id);
+  }
+ else
+  {
+   alert("element nie ma id");
+  };
+
+

Specyfikacja

+ +

{{ languages( { "en": "en/DOM/element.attributes", "fr": "fr/DOM/element.attributes", "ja": "ja/DOM/element.attributes", "zh-cn": "cn/DOM/element.attributes" } ) }}

diff --git a/files/pl/web/api/element/blur/index.html b/files/pl/web/api/element/blur/index.html new file mode 100644 index 0000000000..1febd21617 --- /dev/null +++ b/files/pl/web/api/element/blur/index.html @@ -0,0 +1,21 @@ +--- +title: element.blur +slug: Web/API/Element/blur +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/blur +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda blur dezaktywuje bieżący element (usuwa focus).

+

Składnia

+
element.blur()
+
+

Specyfikacja

+

blur

+
+  
+

{{ languages( { "en": "en/DOM/element.blur", "fr": "fr/DOM/element.blur" } ) }}

diff --git a/files/pl/web/api/element/childnodes/index.html b/files/pl/web/api/element/childnodes/index.html new file mode 100644 index 0000000000..2f15d119e2 --- /dev/null +++ b/files/pl/web/api/element/childnodes/index.html @@ -0,0 +1,49 @@ +--- +title: element.childNodes +slug: Web/API/Element/childNodes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/childNodes +--- +

{{ ApiRef() }}

+

Podsumowanie

+

childNodes zwraca kolekcję węzłów-dzieci elementu.

+

Składnia i wartości

+
var listaWęzłów = referencjaDoWęzłaElementu.childNodes;
+
+

listaWęzłów to uporządkowana kolekcja obiektów węzłów, będącymi dziećmi bieżącego elementu. Jeśli element nie ma dzieci, listaWęzłów jest pusta.

+

listaWęzłów to zmienna przechowująca listę węzłów. Lista taka ma typ NodeList. Właściwość childNodes jest tylko do odczytu.

+

Przykład

+
// parg to referencja do obiektu elementu <p>
+if (parg.hasChildNodes())
+// sprawdzamy czy obiekt nie jest pusty - czy ma dzieci
+ {
+   var children = parg.childNodes;
+   for (var i = 0; i < children.length; i++)
+   {
+   // zrob cos z kazdym dzieckiem jako children[i]
+   // uwaga: lista "żyje", dodawanie bądź usuwanie dzieci ją zmieni
+   };
+ };
+
+
// sposób na usunięcie wszystkich dzieci węzła
+// box to referencja do obiektu elementu, który ma dzieci
+while (box.firstChild)
+ {
+    //lista jest "żywa", więc będzie przeindeksowana po każdym wywołaniu
+    box.removeChild(box.firstChild);
+ };
+
+

Uwagi

+

Elementy kolekcji węzłów są obiektami, a nie łańcuchami. By pobrać dane z tych obiektów, musisz użyć ich atrybutów (np. referencjaDoWęzłaElementu.childNodes{{ mediawiki.external(1) }}.nodeName by pobrać nazwę).

+

Obiekt document ma dwoje dzieci: deklarację DOCTYPE i element HTML.

+

Specyfikacja

+ +

{{ languages( { "en": "en/DOM/element.childNodes", "fr": "fr/DOM/element.childNodes", "ja": "ja/DOM/element.childNodes", "zh-cn": "cn/DOM/element.childNodes" } ) }}

diff --git a/files/pl/web/api/element/classlist/index.html b/files/pl/web/api/element/classlist/index.html new file mode 100644 index 0000000000..5e7112b8d5 --- /dev/null +++ b/files/pl/web/api/element/classlist/index.html @@ -0,0 +1,264 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

Element.classList jest właściwością tylko do odczytu, która zwraca zbiór live {{domxref("DOMTokenList")}} atrybutów klasy danego elementu.

+ +

Używanie classList stanowi wygodną alternatywę uzyskiwania dostępu do listy klas danego elementu w formie skompresowanego stringa poprzez {{domxref("element.className")}}.

+ +

Składnia

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

elementClasses to DOMTokenList reprezentujący atrybuty klasy elementNodeReference. Jeśli atrybut klasy nie został określony lub jest pusty, elementClasses.length zwraca 0. Sam w sobie element.classList jest tylko do odczytu, ale można go mimo to modyfikować poprzez stosowanie metod add() i remove().

+ +

Metody

+ +
+
add( String [, String] )
+
Nadaje określone wartości klasy. Jeśli wartości te już istnieją w atrybucie elementu, wówczas zostają zignorowane.
+
remove( String [,String] )
+
Usuwa określone wartości klasy.
+
item ( Number )
+
Zwraca wartosć klasy wg indeksu w zbiorze.
+
toggle ( String [, force] )
+
Jeśli występuje tylko jeden argument: Przełącza wartość klasy, tzn. jeśli klasa istnieje, wówczas zostaje usunięta i zwraca false, jeśli nie, wówczas dodaje ją i zwraca true.
+ Jeśli występuje również drugi argument: Jeśli drugi argument uznawany jest za true, dodaje określoną wartość klasy, natomiast jeśli zostaje uznany za false, wówczas zostaje usunięty.
+
contains( String )
+
Sprawdza, czy określona wartość klasy istnieje w atrybucie klasy danego elementu.
+
+ +

Przykłady

+ +
// div jest obiektem odwołującym się do elementu <div> o klasie ="foo bar"
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// jeśli ustawiona jest widoczność usuwa ją, w przeciwnym wypadku dodaje
+div.classList.toggle("visible");
+
+// dodaj/usuń (add/remove) jest widoczne, w zależności od warunku testowego, i mniejsze od 10
+div.classList.toggle("visible", i < 10 );
+
+alert(div.classList.contains("foo"));
+
+// dodaj lub usuń złożone klasy
+div.classList.add("foo", "bar");
+div.classList.remove("foo", "bar");
+ +
+

Wersje Firefoxa wcześniejsze niż 26 nie implementują użycia niektórych argumentów metod dodaj/usuń/przełącz (add/remove/toggle). Zobacz https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +

Polyfill

+ +
// Źródło: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
+;(function() {
+    // pomocnicy
+    var regExp = function(name) {
+        return new RegExp('(^| )'+ name +'( |$)');
+    };
+    var forEach = function(list, fn, scope) {
+        for (var i = 0; i < list.length; i++) {
+            fn.call(scope, list[i]);
+        }
+    };
+
+    // obiekt listy klasy z podstawowymi metodami
+    function ClassList(element) {
+        this.element = element;
+    }
+
+    ClassList.prototype = {
+        add: function() {
+            forEach(arguments, function(name) {
+                if (!this.contains(name)) {
+                    this.element.className += this.element.className.length > 0 ? ' ' + name : name;
+                }
+            }, this);
+        },
+        remove: function() {
+            forEach(arguments, function(name) {
+                this.element.className =
+                    this.element.className.replace(regExp(name), '');
+            }, this);
+        },
+        toggle: function(name) {
+            return this.contains(name)
+                ? (this.remove(name), false) : (this.add(name), true);
+        },
+        contains: function(name) {
+            return regExp(name).test(this.element.className);
+        },
+        // bonus..
+        replace: function(oldName, newName) {
+            this.remove(oldName), this.add(newName);
+        }
+    };
+
+    // IE8/9, Safari
+    if (!('classList' in Element.prototype)) {
+        Object.defineProperty(Element.prototype, 'classList', {
+            get: function() {
+                return new ClassList(this);
+            }
+        });
+    }
+
+    // replace() wspierane przez pozostałe przeglądarki
+    if (window.DOMTokenList && DOMTokenList.prototype.replace == null) {
+        DOMTokenList.prototype.replace = ClassList.prototype.replace;
+    }
+})();
+
+ +

Specyfikacje

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecifikacjaStatusKomentarz
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Initial definition
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}} 
+ +

Zgodność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Zgodność podstawowa812{{CompatGeckoDesktop(1.9.2)}}10[1]11.505.1
toggle() method's second argument2412{{CompatGeckoDesktop(24)}}{{CompatNo}}[2]157
Multiple arguments for add() & remove()2812{{CompatGeckoDesktop(26)}}{{CompatNo}}157
replace(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CechaAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Wsparcie podstawowe3.012{{CompatGeckoMobile(1.9.2)}}10[1]11.105.0
toggle method's second argument4.412{{CompatGeckoMobile(24)}}{{CompatNo}}[2]{{CompatUnknown}}7.0
multiple arguments for add() & remove()4.412{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}7.0
replace(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Brak wsparcia dla elementów SVG. Zobacz raport w tej kwestii na stronie Microsoftu.
+ [2] Internet Explorer nigdy tego nie zimplementował. Zobacz raport w tej kwestii na stronie Microsoftu.

+ +

Zobacz również

+ + diff --git a/files/pl/web/api/element/classname/index.html b/files/pl/web/api/element/classname/index.html new file mode 100644 index 0000000000..31f21befb2 --- /dev/null +++ b/files/pl/web/api/element/classname/index.html @@ -0,0 +1,37 @@ +--- +title: element.className +slug: Web/API/Element/className +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/className +--- +
+ {{APIRef}}
+
+  
+
+ Podsumowanie
+

className pobiera/ustawia wartość atrybutu class bieżącego elementu.

+

Składnia i wartości

+
var nazwaKlasy = referencjaDoWęzłaElementu.className;
+referencjaDoWęzłaElementu.className = nazwaKlasy;
+
+ +

Przykład

+
var elementNodeReference = document.getElementById("div1");
+
+if (elementNodeReference.className == "fixed") {
+  // pomiń elementy określonej klasy
+  goNextElement();
+};
+

Uwagi

+

Dla tej właściwości użyto nazwy className, a nie class, ponieważ "class" jest w wielu językach korzystających z DOM słowem kluczowym.

+

Specyfikacja

+ diff --git a/files/pl/web/api/element/click/index.html b/files/pl/web/api/element/click/index.html new file mode 100644 index 0000000000..5c0fe512d5 --- /dev/null +++ b/files/pl/web/api/element/click/index.html @@ -0,0 +1,23 @@ +--- +title: element.click +slug: Web/API/Element/click +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/click +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda click wywołuje kliknięcie na bieżącym elemencie.

+

Składnia

+
element.click()
+
+

Notatki

+

Metoda click symuluje zdarzenie kliknięcia na bieżącym elemencie. Zwykle używa się tego by wywołać obsługę zdarzenia przypisaną do elementu bieżącego bądź leżącego wyżej w "łańcuchu zdarzeń".

+

Specyfikacja

+

click

+
+  
+

{{ languages( { "en": "en/DOM/element.click", "fr": "fr/DOM/element.click" } ) }}

diff --git a/files/pl/web/api/element/clientheight/index.html b/files/pl/web/api/element/clientheight/index.html new file mode 100644 index 0000000000..7014fd35f5 --- /dev/null +++ b/files/pl/web/api/element/clientheight/index.html @@ -0,0 +1,47 @@ +--- +title: element.clientHeight +slug: Web/API/Element/clientHeight +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/clientHeight +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca wewnętrzną wysokość elementu w pikselach, włączając marginesy wewnętrzne ( + + padding + ), ale bez poziomego paska przewijania, obramowań i marginesów zewnętrznych ( + + margin + ).

+

clientHeight można wyliczyć jako (właśność height CSS) + (padding w CSS) - (wysokość poziomego paska przewijania (jeśli jest)).

+

Składnia i wartości

+
var h = element.clientHeight;
+
+

h to liczba całkowita reprezentująca clientHeight elementu w pikselach.

+

clientHeight jest tylko do odczytu.

+

Przykład

+
+
+

padding-top

+

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+

Cat image and text coming from http://www.best-cat-art.com/

+

padding-bottom

+
+ LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom
+

Grafika:clientHeight.png

+

Specyfikacja

+

Nie należy do żadnej ze specyfikacji W3C.

+

Uwagi

+

clientHeight jest niestandardową właściwością, wprowadzoną w modelu obiektowym przeglądarki Internet Explorer.

+

Dokumentacja

+ +

{{ languages( { "en": "en/DOM/element.clientHeight", "fr": "fr/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}

diff --git a/files/pl/web/api/element/clientnode/index.html b/files/pl/web/api/element/clientnode/index.html new file mode 100644 index 0000000000..eb0550678b --- /dev/null +++ b/files/pl/web/api/element/clientnode/index.html @@ -0,0 +1,32 @@ +--- +title: element.cloneNode +slug: Web/API/Element/clientNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/cloneNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda cloneNode zwraca kopię bieżącego węzła.

+

Składnia

+
kopiaWęzła = element.cloneNode(głębokość)
+
+

Parametry

+ +

Przykład

+
p = document.getElementById("para1");
+p_prime = p.cloneNode(true);
+
+

Uwagi

+

Kopia węzła zwrócona przez cloneNode() nie ma rodzica. Podczas klonowania węzła skopiowane zostają wszystkie jego atrybuty i ich wartości, ale nie zostaje skopiowana treść zawarta w węźle, ponieważ treść ta przechowywana jest w węźle potomnym typu Text.

+

Głębokie klonowanie kopiuje i zwraca węzeł wraz z całym drzewem pod nim się znajdującym (w tym treścią z potomnych węzłów Text) .

+

Specyfikacja

+

DOM Level 2 Core: cloneNode

+
+  
+

{{ languages( { "en": "en/DOM/element.cloneNode", "fr": "fr/DOM/element.cloneNode", "ja": "ja/DOM/element.cloneNode", "pt": "pt/DOM/element.cloneNode", "zh-cn": "cn/DOM/element.cloneNode" } ) }}

diff --git a/files/pl/web/api/element/clientwidth/index.html b/files/pl/web/api/element/clientwidth/index.html new file mode 100644 index 0000000000..5cf48d16ad --- /dev/null +++ b/files/pl/web/api/element/clientwidth/index.html @@ -0,0 +1,47 @@ +--- +title: element.clientWidth +slug: Web/API/Element/clientWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/clientWidth +--- +

{{ ApiRef() }}

+

Podsumowanie

+

clientWidth to wewnętrzna szerokość elementu w pikselach. Zawiera margines wewnętrzny ( + + padding + ), ale pomija pionowy pasek przewijania (jeśli jest obecny lub renderowany), obramowania i margines zewnętrzny ( + + margin + ).

+

Składnia i wartości

+
var w = element.clientWidth;
+
+

w to liczba całkowita odpowiadająca clientWidth elementu w pikselach. clientWidth jest tylko do odczytu.

+

Przykład

+
+
+

padding-top

+

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+

Cat image and text coming from www.best-cat-art.com

+

padding-bottom

+
+ LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+

Image:clientWidth.png

+

Specyfikacja

+

Nie należy do żadnej ze specyfikacji W3C.

+

Uwagi

+

clientWidth został wprowadzony w modelu obiektowym DHTML przeglądarki Internet Explorer.

+

Dokumentacja

+ +
+  
+

{{ languages( { "en": "en/DOM/element.clientWidth", "fr": "fr/DOM/element.clientWidth" } ) }}

diff --git a/files/pl/web/api/element/dir/index.html b/files/pl/web/api/element/dir/index.html new file mode 100644 index 0000000000..5e20e1e6ad --- /dev/null +++ b/files/pl/web/api/element/dir/index.html @@ -0,0 +1,34 @@ +--- +title: element.dir +slug: Web/API/Element/dir +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/dir +--- +
+ {{ApiRef}}
+

Podsumowanie

+

Atrybut dir ustawia lub pobiera kierunek pisania tekstu dla zawartości bieżącego elementu.

+

Składnia i wartości

+
var bieżącyKierunekPisania = elementNodeReference.dir;
+elementNodeReference.dir = nowyKierunekPisania;
+
+

bieżącyKierunekPisania jest łańcuchem reprezentującym kierunek pisania tekstu bieżącego elementu. nowyKierunekPisania to zmienna łańcuchowa, której wartość reprezentuje kierunek pisania tekstu.

+

Możliwe wartości dir to ltr dla "od lewej do prawej" i rtl dla "od prawej do lewej".

+

Przykład

+
var parg = document.getElementById("para1");
+
+parg.dir = "rtl";
+// zmienia kierunek tekstu w paragrafie "para1"
+
+

Uwagi

+

Kierunek pisania tekstu elementu oznacza kierunek, w którym idzie tekst (do obsługi różnych języków). Języki arabski i hebrajski to typowe przykłady użycia kierunku rtl.

+

Obrazek może mieć atrybut dir ustawiony na rtl. W takim wypadku atrybuty title i alt będą sformatowane i wyświetlona jako rtl.

+

Jeśli tabela ma kierunek rtl, kolumny porządkowane są od prawej do lewej.

+

Specyfikacja

+ diff --git a/files/pl/web/api/element/dispatchevent/index.html b/files/pl/web/api/element/dispatchevent/index.html new file mode 100644 index 0000000000..266c570cfe --- /dev/null +++ b/files/pl/web/api/element/dispatchevent/index.html @@ -0,0 +1,43 @@ +--- +title: element.dispatchEvent +slug: Web/API/Element/dispatchEvent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/EventTarget/dispatchEvent +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Wywołuje zdarzenie w bieżącym elemencie.

+ +

Składnia

+ +
bool = element.dispatchEvent(event)
+
+ + + +

Uwagi

+ +

Jak pokazuje powyższy przykład, dispatchEvent to ostatni krok w procesie utwórz-zainicjuj-wywołaj, którego używa się by ręcznie wywołać zdarzenia w modelu zdarzeń implementacji.

+ +

Zdarzenie może zostać utworzone przy użyciu metody document.createEvent i zainicjowane za pomocą initEvent lub innej, bardziej wyspecjalizowanej metody, jak initMouseEvent albo initUIEvent.

+ +

Zobacz też dokumentację obiektu event.

+ +

Specyfikacja

+ +

DOM Level 2 Events: dispatchEvent

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.dispatchEvent", "es": "es/DOM/element.dispatchEvent", "fr": "fr/DOM/element.dispatchEvent", "ja": "ja/DOM/element.dispatchEvent" } ) }}

diff --git a/files/pl/web/api/element/firstchild/index.html b/files/pl/web/api/element/firstchild/index.html new file mode 100644 index 0000000000..20189ce803 --- /dev/null +++ b/files/pl/web/api/element/firstchild/index.html @@ -0,0 +1,101 @@ +--- +title: element.firstChild +slug: Web/API/Element/firstChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/firstChild +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

firstChild jest właściwością tylko do odczytu, która zwraca pierwszego potomka węzła lub wartość null, jeżeli węzeł nie ma potomków. Jeżeli węzeł jest elementem Document, wtedy zwraca pierwszy węzeł z listy swoich bezpośrednich dzieci.

+ +

Składnia i wartości

+ +
var elt = element.firstChild;
+
+ +

elt to referencja do pierwszego dziecka elementu, jeśli jest takie - w przeciwnym razie jest to null.

+ +

Przykład

+ +

Przeglądarki oparte o Gecko wstawiają do dokumentu węzły tekstowe reprezentujące białe znaki w kodzie. Dlatego pierwsze dziecko elementu może odnosić się do wstawionego węzła tekstowego, a nie elementu określonego przez następny znacznik w źródle strony.

+ +
<p id="para-01">
+  <span>Pierwszy span</span>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+
+ +

W powyższym przykładzie alert wyświetli '#text', ponieważ wstawiony jest węzeł tekstowy oznaczający przerwę między otwierającymi znacznikami <p> i <span> . Dowolny biały znak spowoduje wstawienie węzła tekstowego - zarówno pojedyncza spacja, jak i dowolna ilość spacji, nowych linii, znaków tabulacji itd.

+ +

Kolejny węzeł #text jest wstawiany między zamykającymi znacznikami </span> i </p>

+ +

Jeśli usunie się białe znaki ze źródła, nie zostaną wstawione węzły tekstowe, a element span stanie się pierwszym dzieckiem paragrafu.

+ +
<p id="para-01"><span>Pierwszy span</span></p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstChild.nodeName)
+</script>
+
+ +

Teraz alert wyświetli 'SPAN'.

+ +

Uwagi

+ +

Więcej o problemach z węzłami-zjawami znajdziesz w {{ Bug(26179) }} (nie komentuj tego błędu!). Oto jeden ze sposobów na ominięcie problemu:

+ +
<!-- konwencjonalne formatowanie prowadzi do
+     zaśmiecenia drzewa dokumentu w Gecko
+ -->
+<div>
+ <ul>
+  <li>Pozycja 1</li>
+  <li>Pozycja 2</li>
+  <li>Pozycja 3</li>
+ </ul>
+</div>
+
+<!-- Formatowanie ustawione, by ominąć
+     problem węzłów-zjaw
+ -->
+<div
+ ><ul
+  ><li>Pozycja 1</li
+  ><li>Pozycja 2</li
+  ><li>Pozycja 3</li
+ ></ul
+></div>
+
+ +

Węzły bezdzietne

+ +

Własność zwraca null, jeśli bieżący węzeł jest bezdzietny.

+ +

Białe znaki i węzły dzieci

+ +

Węzły #text mogą być wstawione jako dzieci elementów takich jak TR pomimo że specyfikacja HTML pozwala tylko na TD jako ich dzieci. Z uwagi na XML białe znaki muszą zostać zachowane i gdzieś wstawione.

+ +

Ponieważ węzły #text nie są elementami HTML, białe znaki są tam wstawiane.

+ +

W3C DOM 3 FAQ: Why are some Text nodes empty?

+ +

Specyfikacja

+ +

DOM Level 1 Core: firstChild

+ +

DOM Level 2 Core: firstChild

+ +
+ +

{{ languages( { "en": "en/DOM/element.firstChild", "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "zh-cn": "cn/DOM/element.firstChild" } ) }}

diff --git a/files/pl/web/api/element/focus/index.html b/files/pl/web/api/element/focus/index.html new file mode 100644 index 0000000000..7f3eef32fa --- /dev/null +++ b/files/pl/web/api/element/focus/index.html @@ -0,0 +1,23 @@ +--- +title: element.focus +slug: Web/API/Element/focus +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/focus +--- +

{{ ApiRef() }}

+

Podsumowanie

+

focus aktywuje bieżący element (ustawia focus).

+

Składnia

+
element.focus()
+
+

Uwagi

+

Wywołanie metody focus() jest równoważne z zaznaczeniem elementu przez użytkownika.

+

Specyfikacja

+

focus

+
+  
+

{{ languages( { "en": "en/DOM/element.focus", "fr": "fr/DOM/element.focus" } ) }}

diff --git a/files/pl/web/api/element/getattribute/index.html b/files/pl/web/api/element/getattribute/index.html new file mode 100644 index 0000000000..da509fb349 --- /dev/null +++ b/files/pl/web/api/element/getattribute/index.html @@ -0,0 +1,43 @@ +--- +title: element.getAttribute +slug: Web/API/Element/getAttribute +translation_of: Web/API/Element/getAttribute +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

getAttribute zwraca wartość atrybutu o podanej nazwie.

+ +

Składnia

+ +
atrybut = element.getAttribute(nazwaAtrybutu)
+
+ + + +

Przykład

+ +
var div1 = document.getElementById("div1");
+var a = div1.getAttribute("align");
+alert(a); // pokaże wartość atrybutu "align" dla elementu o id="div1"
+
+ +

Uwagi

+ +

W zasadzie wszystkie przeglądarki (Firefox, Internet Explorer, nowsze wersje Opery, Safari, Konqueror oraz iCab) zwracają null, jeśli bieżący element nie posiada atrybutu o podanej nazwie. Specyfikacja DOM mówi, że w takiej sytuacji powinien być zwracany pusty ciąg znaków i niektórze implementacje DOM tak się zachowują. Zatem jeśli jest możliwe, że element nie posiada żądanego atrybutu, powinieneś użyć metody hasAttribute aby sprawdzić istnienie atrybutu zanim wywołasz getAttribute.

+ +

nazwaAtrybutu jest zazwyczaj zależna od wielkości liter, jednak nie w przypadku elementów HTML - wtedy wielkość liter nie ma znaczenia.

+ +

{{ DOMAttributeMethods() }}

+ +

Specyfikacja

+ +

DOM Level 2 Core: getAttribute (wprowadzono w DOM Level 1 Core)

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.getAttribute", "fr": "fr/DOM/element.getAttribute", "ja": "ja/DOM/element.getAttribute" } ) }}

diff --git a/files/pl/web/api/element/getattributenode/index.html b/files/pl/web/api/element/getattributenode/index.html new file mode 100644 index 0000000000..0bdf977063 --- /dev/null +++ b/files/pl/web/api/element/getattributenode/index.html @@ -0,0 +1,36 @@ +--- +title: element.getAttributeNode +slug: Web/API/Element/getAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca określony atrybut elementu jako węzeł typu Attr.

+

Składnia

+
węzełAtrybutu = element.getAttributeNode(nazwaAtrybutu)
+
+ +

Przykład

+
// html: <div id="top" />
+t = document.getElementById("top");
+iNode = t.getAttributeNode("id");
+// iNode.value = "top"
+
+

Uwagi

+

Interfejs węzła Attr dziedziczy ze wspólnego interfejsu węzłów Node, ale węzły atrybutów nie stanowią części drzewa dokumentu. Wpólne atrybuty wszystkich węzłów, takie jak parentNode, previousSibling i nextSibling mają w przypadku węzłów Attr wartość null.

+

Do elementu, do którego należy atrybut, możesz odnosić się wykorzystując właściwość ownerElement.

+

Do pobrania wartości atrybutu używa się raczej metody getAttribute niż getAttributeNode.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

getAttributeNode

+
+  
+

{{ languages( { "en": "en/DOM/element.getAttributeNode", "fr": "fr/DOM/element.getAttributeNode", "ja": "ja/DOM/element.getAttributeNode" } ) }}

diff --git a/files/pl/web/api/element/getattributenodens/index.html b/files/pl/web/api/element/getattributenodens/index.html new file mode 100644 index 0000000000..b1ec0f2281 --- /dev/null +++ b/files/pl/web/api/element/getattributenodens/index.html @@ -0,0 +1,39 @@ +--- +title: element.getAttributeNodeNS +slug: Web/API/Element/getAttributeNodeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNodeNS +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Zwraca węzeł Attr dla atrybutu z daną przestrzenią nazw i nazwą.

+ +

Składnia

+ +
attributeNode = element.getAttributeNodeNS(namespace,nodeName)
+
+ + + +

== Przykład == TBD The example needs to be fixed pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "http://www.mozilla.org/ns/specialspace", "id"); // iNode.value = "full-top" </pre

+ +

Uwagi

+ +

getAttributeNodeNS is more specific than getAttributeNode in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is setAttributeNodeNS.

+ +

{{ DOMAttributeMethods() }}

+ +

Specyfikacja

+ +

DOM Level 2 Core: getAttributeNodeNS

diff --git a/files/pl/web/api/element/getattributens/index.html b/files/pl/web/api/element/getattributens/index.html new file mode 100644 index 0000000000..1ece5594ec --- /dev/null +++ b/files/pl/web/api/element/getattributens/index.html @@ -0,0 +1,47 @@ +--- +title: element.getAttributeNS +slug: Web/API/Element/getAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/getAttributeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

getAttributeNS zwraca ciąg z wartością atrybutu o podanej nazwie i przestrzeni nazw. Jeśli nie ma atrybutu o takiego atrybutu, zwrócone zostanie null bądź "" (pust ciąg) - zob. {{ Anch("Uwagi") }}.

+

Składnia

+
wartośćAtr =element.getAttributeNS(przestrzeńNazw,nazwa)
+
+

Parametry

+ +

Przykład

+
var div1 = document.getElementById("div1");
+var a = div1.getAttributeNS("www.mozilla.org/ns/specialspace/",
+                            "special-align");
+alert(a); // wyświetli zawartość special-align elementu div
+
+

Uwagi

+

getAttributeNS różni się od getAttribute tym, że pozwala Ci określić do jakiej przestrzeni nazw należy atrybut, tak jak w powyższym przykładzie, gdzie atrybut należał do fikcyjnej przestrzeni "specialspace".

+

W zasadzie wszystkie przeglądarki (Firefox, Internet Explorer, nowsze wersje Opery, Safari, Konqueror oraz iCab) zwracają null, jeśli bieżący element nie posiada atrybutu o podanej nazwie. Specyfikacja DOM mówi, że w takiej sytuacji powinien być zwracany pusty ciąg znaków i niektórze implementacje DOM tak się zachowują. Zatem jeśli jest możliwe, że element nie posiada żądanego atrybutu, powinieneś użyć metody hasAttributeNS aby sprawdzić istnienie atrybutu zanim wywołasz getAttributeNS.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: getAttributeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.getAttributeNS", "fr": "fr/DOM/element.getAttributeNS", "ja": "ja/DOM/element.getAttributeNS" } ) }}

diff --git a/files/pl/web/api/element/getboundingclientrect/index.html b/files/pl/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..dc189b37af --- /dev/null +++ b/files/pl/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,146 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +tags: + - API + - Metoda(2) + - Pudełko + - Widok CSSOM +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

Metoda Element.getBoundingClientRect() zwraca rozmiar  oraz  położenie elementu względem okna widoku (viewport).

+ +

Składnia

+ +
rectObject = object.getBoundingClientRect();
+
+ +

Wynik

+ +

Zwrócony  jest obiekt DOMRect,  wyznaczony z tablicy prostokątów zwróconych przez  metodę getClientRects(), zastosowaną do danego elementu, czyli wyznaczony ze wszystkich pudełek  CSS związanych z danym elementem.

+ +

Zwrócony obiekt  DOMRect posiada następujące (tylko do odczytu) właściwości: left, top, right and bottom,  opisujące parametry otaczającego element pudełka w  pikselach. Właściwości top and left  oznaczają odległość od górnego-lewego rogu aktualnego okna widoku.

+ +
+

Uwaga: {{Gecko("1.9.1")}} dodało właściwości width and height do obiektu DOMRect.

+
+ +

Puste pudełka są całkowicie ignorowane. Jeśli wszystkie elementy pudełka są puste, to zwrócony prostokąt ma wysokość i szerokość równą zero zaś własności top oraz left dotyczą pierwszego pudełka CSS (w porządku kontekstowym) który zawiera dany element.

+ +

Efekt przewijania (scrolling) okna widoku  (lub dowolnego innego przewijalnego elementu) jest uwzględniany podczas wyznaczania otaczającego pudełka. Zatem, właściwości top oraz left zmieniają się natychmiast po dowolnym przewinięciu (są więc względne w stosunku do widoku, a więc nie są absolutne). W celu wyznaczenia absolutnego położenie elementu  należy do właściwości top oraz left dodać aktualne pozycje przesuwania (scrolling position)  (można je uzyskać za  pomocą window.scrollX and window.scrollY).

+ +

Skrypty wymagające  zgodności z różnymi przeglądarkami mogą korzystać z metod  window.pageXOffset oraz window.pageYOffset zamiast window.scrollX oraz window.scrollY. Skrypty które nie mają dostępu do  window.pageXOffset, window.pageYOffset, window.scrollX ani window.scrollY mogą stosować następujący kod :

+ +
// Zamiast scrollX
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft
+// Zamiast scrollY
+(((t = document.documentElement) || (t = document.body.parentNode))
+  && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop
+
+ +

Przykład

+ +
// rect jest obiektem DOMRect z sześcioma własnościami: left, top, right, bottom, width, height
+var rect = obj.getBoundingClientRect();
+
+ +

Specyfikacja

+ + + + + + + + + + + + + + + + +
SpecyfikacjaStatusKomentarz
{{SpecName("CSSOM View", "#the-getclientrects()-and-getboundingclientrect()-methods", "Element.getBoundingClientRect()")}}{{Spec2("CSSOM View")}}definicja początkowa
+ +

Uwagi

+ +

Metoda getBoundingClientRect() została wprowadzona po raz pierwszy w  modelu MS IE DHTML.

+ +

Wynik metody getBoundingClientRect() jest  obiektem zamrożonym.

+ +

Zgodność z przeglądarkami

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
WłaściwośćChromeFirefox (Gecko)Internet ExplorerOperaSafari
Postawowe wsparcie1.0[1]{{CompatGeckoDesktop(1.9)}}4.0[2]{{CompatVersionUnknown}}4.0
width/height{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9.1)}}9{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
WłaściwośćAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Postawowe wsparcie2.01.0{{CompatGeckoMobile(1.9)}}6.0{{CompatVersionUnknown}}4.0
+
+ +

[1] specyfikacja CSS dla elementu 'use'  wskazującego na element  'symbol' wymaga aby domyślne wartości atrybutów  width oraz height elementu 'use' ustawione były na 100%. Również,  specyfikacja CSS dla atrybutów width oraz height elementu 'svg' wymaga 100%  jako wartości domyślne. Google Chrome nie przestrzega tych wymagań dla elementów  'use'. Chrome nie uwzględnia również  'stroke-width'. Zatem metoda   getBoundingClientRect() może zwrócić inny prostokąt w  Chrome  niż w Firefox.

+ +

[2] W IE8, oraz we wcześniejszych wersjach, obiekt  DOMRect zwrócony przez getBoundingClientRect() nie zawiera właściwości height ani width. Żadne dodatkowe właściwości (w tym height oraz width) nie mogą być dodane do tych obiektów DOMRect.

+ +

Począwszy od Gecko 12.0 {{geckoRelease("12.0")}}, efekt  transformacji CSS jest uwzględniany w algorytmie wyznaczania otaczającego pudełka (bounding rectangle).

+ +

Patrz również

+ + diff --git a/files/pl/web/api/element/getelementsbytagnamens/index.html b/files/pl/web/api/element/getelementsbytagnamens/index.html new file mode 100644 index 0000000000..81b82173d2 --- /dev/null +++ b/files/pl/web/api/element/getelementsbytagnamens/index.html @@ -0,0 +1,49 @@ +--- +title: element.getElementsByTagNameNS +slug: Web/API/Element/getElementsByTagNameNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/Element/getElementsByTagNameNS +--- +

{{ ApiRef("DOM") }}

+ +

Podsumowanie

+ +

Zwraca listę elementów o danej nazwie znacznika należącej do danej przestrzeni nazw.

+ +

Składnia

+ +
elements =element.getElementsByTagNameNS(namespace,localName)
+
+ + + +

Przykład

+ +
// check the alignment on a number of cells in a table.
+var table = document.getElementById("forecast-table");
+var cells = table.getElementsByTagNameNS("www.mozilla.org/ns/specialspace/", "td");
+for (var i = 0; i < cells.length; i++) {
+    status = cells[i].getAttribute("status");
+    if ( status == "open") {
+        // grab the data
+    }
+}
+
+ +

Uwagi

+ +

element.getElementsByTagNameNS is similar to document.getElementsByTagNameNS, except that its search is restricted to those elements which are descendants of the specified element.

+ +

Specyfikacja

+ +

DOM Level 2 Core: Element.getElementsByTagNameNS

diff --git a/files/pl/web/api/element/hasattribute/index.html b/files/pl/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..e06d1f1fa2 --- /dev/null +++ b/files/pl/web/api/element/hasattribute/index.html @@ -0,0 +1,34 @@ +--- +title: element.hasAttribute +slug: Web/API/Element/hasAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttribute +--- +

{{ ApiRef() }}

+

Podsumowanie

+

hasAttribute zwraca wartość logiczną oznaczającą, czy element posiada określony atrybut czy nie.

+

Składnia

+
wynik = element.hasAttribute(nazwaAtrybutu)
+
+ +

Przykład

+
// przed ustawieniem wartości sprawdź, czy atrybut istnieje
+d = document.getElementById("div1");
+if(d.hasAttribute("align")){
+  d.setAttribute("align", "center");
+}
+
+

Uwagi

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: hasAttribute

+
+  
+

{{ languages( { "en": "en/DOM/element.hasAttribute", "fr": "fr/DOM/element.hasAttribute", "ja": "ja/DOM/element.hasAttribute" } ) }}

diff --git a/files/pl/web/api/element/hasattributens/index.html b/files/pl/web/api/element/hasattributens/index.html new file mode 100644 index 0000000000..13cc715dac --- /dev/null +++ b/files/pl/web/api/element/hasattributens/index.html @@ -0,0 +1,39 @@ +--- +title: element.hasAttributeNS +slug: Web/API/Element/hasAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttributeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

hasAttributeNS zwraca wartość logiczną oznaczającą, czy bieżący element ma określony atrybut.

+

Składnia

+
wynik =element.hasAttributeNS(przestrzeńNazw,nazwaLokalna)
+
+ +

Przykład

+
// sprawdza czy jest taki atrybut
+// przed nadaniem mu wartości
+var d = document.getElementById("div1");
+if (d.hasAttributeNS(
+        "http://www.mozilla.org/ns/specialspace/",
+        "special-align")) {
+   d.setAttribute("align", "center");
+}
+
+

Uwagi

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: hasAttributeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.hasAttributeNS", "fr": "fr/DOM/element.hasAttributeNS", "ja": "ja/DOM/element.hasAttributeNS" } ) }}

diff --git a/files/pl/web/api/element/hasattributes/index.html b/files/pl/web/api/element/hasattributes/index.html new file mode 100644 index 0000000000..2e1c7aea73 --- /dev/null +++ b/files/pl/web/api/element/hasattributes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasAttributes +slug: Web/API/Element/hasAttributes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/hasAttributes +--- +

{{ ApiRef() }}

+

Podsumowanie

+

hasAttributes zwraca wartość logiczną zależnie od tego, czy element posiada jakiekolwiek atrybuty.

+

Składnia

+
[ true | false ] = element.hasAttributes
+
+

Przykład

+
t1 = document.getElementById("table-data");
+if ( t1.hasAttributes ) {
+    // zrób coś z
+    // t1.attributes
+}
+
+

Specyfikacja

+

hasAttributes

+
+  
+

{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "it": "it/DOM/element.hasAttributes" } ) }}

diff --git a/files/pl/web/api/element/haschildnodes/index.html b/files/pl/web/api/element/haschildnodes/index.html new file mode 100644 index 0000000000..e21f22dedf --- /dev/null +++ b/files/pl/web/api/element/haschildnodes/index.html @@ -0,0 +1,28 @@ +--- +title: element.hasChildNodes +slug: Web/API/Element/hasChildNodes +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/hasChildNodes +--- +

{{ ApiRef() }}

+

Podsumowanie

+

hasChildNodes zwraca wartość logiczną określającą, czy element posiada dzieci czy nie.

+

Składnia

+
[ true | false ] = element.hasChildNodes()
+
+

Przykład

+
t1 = document.getElementById("table-data");
+if ( t1.hasChildNodes() ) {
+    // tabela ma dzieci }
+
+

Uwagi

+

Zauważ, że składnia element.hasChildNodes - bez nawiasów () - jest nieprawidłowa. Takie użycie zawsze zwraca true, oznaczające, że metoda o tej nazwie jest dostępna w obiekcie. Nie daj się nabrać.

+

Specyfikacja

+

hasChildNodes

+
+  
+

{{ languages( { "en": "en/DOM/element.hasChildNodes", "fr": "fr/DOM/element.hasChildNodes", "ja": "ja/DOM/element.hasChildNodes" } ) }}

diff --git a/files/pl/web/api/element/id/index.html b/files/pl/web/api/element/id/index.html new file mode 100644 index 0000000000..53ba49d3b0 --- /dev/null +++ b/files/pl/web/api/element/id/index.html @@ -0,0 +1,38 @@ +--- +title: element.id +slug: Web/API/Element/id +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/id +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność id jednoznacznie identyfikuje bieżący element.

+

Składnia i wartości

+
id_str = element.id
+element.id =id_str
+
+ +

Przykład

+
if (element.id != "main_loop")
+     goBack();
+
+

Uwagi

+

Nie ma ważniejszej własności w dziedzinie konstruowania stron niż + + id + . ID elementu jest tym, czego najczęściej używa się by go wydobyć (np. za pomocą getElementById) i pozwala ono manipulować węzłami niezależnie od innych węzłów. W HTML-u i w XUL-u id definiowane jest jako atrybut tak:

+
<td id="table-cell2" />
+
+

Jeśli zamierzasz używać DOM na swoich stronach dobrze jest przypisać tyle atrybutów id ile tylko będzie potrzebne. Zauważ też, że + + id + używa się również by powiązać reguły stylów CSS z poszczególnymi elementami.

+

Specyfikacja

+

id

+

{{ languages( { "en": "en/DOM/element.id", "fr": "fr/DOM/element.id", "ja": "ja/DOM/element.id", "zh-cn": "cn/DOM/element.id" } ) }}

diff --git a/files/pl/web/api/element/index.html b/files/pl/web/api/element/index.html new file mode 100644 index 0000000000..5a7c6be166 --- /dev/null +++ b/files/pl/web/api/element/index.html @@ -0,0 +1,677 @@ +--- +title: Element +slug: Web/API/Element +tags: + - DOM + - Gecko +translation_of: Web/API/Element +--- +

{{ ApiRef}}

+ +

Ten rozdział dostarcza zwięzłych informacji dla wszystkich metod, własności i zdarzeń dostępnych dla większości elementów HTML i XML w Gecko DOM.

+ +

Różne specyfikacje W3C mają zastosowanie do elementów:

+ + + +

Niniejsze interfejsy DOM łączą różne specyfikacje, jednak staramy się skoncentrować na rekomendacji DOM Level 2 HTML. Każda podstrona zawiera odnośnik do odpowiedniego fragmentu specyfikacji W3C DOM.

+ +

W tym miejscu "elementy" oznaczają ten interfejs, jaki mają wszystkie elementy HTML i XML. Istnieją również bardziej specjalizowane interfejsy dla poszczególnych elementów - np. BODY posiada dodatkowe funkcje i własności, podobnie tabele. W tym rozdziale omówiony jest tylko ten interfejs, jak współdzielą wszystkie elementy.

+ +

Własności

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NazwaOpisTypDostępność
attributesZwraca tablicę atrybutów elementu.NamedNodeMapWszystkie
childNodesZwraca tablicę węzłów potomnych elementu.NodeListWszystkie
classNamePobiera/ustawia klasę elementu.StringHTML, XUL
clientHeightZwraca wewnętrzną wysokość elementu.NumberHTML
clientWidthZwraca wewnętrzną szerokość elementu.NumberHTML
dirUstawia lub pobiera kierunek elementu.StringHTML, XUL
firstChildZwraca pierwsze dziecko bieżącego węzła lub null, jeśli ten element nie posiada węzła potomnego.NodeWszystkie
idPobiera/ustawia id elementu.StringHTML, XUL
innerHTMLPobiera/ustawia znacznik zawartości elementu.StringHTML
langOkreśla język bazowy dla wartość atrybutów i tekstowej zawartości elementu.StringHTML
lastChildZwraca ostatnie dziecko bieżącego węzła elementu lub null jeśli ten element nie posiada węzłów potomnych.NodeWszystkie
localNameZwraca lokalną część uściślonej nazwy węzła.StringWszystkie
NazwaOpisTypDostępność
namePobiera lub ustawia atrybut name - dostępne nie dla wszystkich elementów.StringHTML
namespaceURIURI przestrzeni nazw węzła lub null, jeśli jest bliżej nieokreślony.StringWszystkie
nextSiblingWęzeł bezpośrednio następny w drzewie dokumentu lub null jeżeli takiego nie ma.NodeWszystkie
nodeNameNazwa węzła.StringWszystkie
nodeTypeCyfra reprezentująca typ węzła. 1 oznacza element DOM.NumberWszystkie
nodeValueWartość węzła atrybutu, zawartość węzła tekstowego lub null dla elementu DOM.StringWszystkie
offsetHeightWysokość elementu, odnosząca się do układu strony.NumberHTML
offsetLeftOdległość pomiędzy lewą krawędzią elementu, a jego offsetParent lewej krawędzi.NumberHTML
offsetParentElement, od którego obliczane są wszystkie przesunięcia.ElementHTML
offsetTopOdległość pomiędzy górną krawędzią elementu, a jego offsetParent górnej krawędzi.NumberHTML
offsetWidthSzerokość elementu, odnosząca się do układu strony.NumberHTML
ownerDocumentDokument, którego węzeł jest w lub null jeśli węzeł nie znajduje się wewnątrz.DocumentWszystkie
NazwaOpisTypDostępność
parentNodeElement nadrzędny bieżącego węzła lub null jeżeli węzeł nie znajduje się wewnątrz dokumentu DOM.NodeWszystkie
prefixPrefiks przestrzeni nazw węzła lub null jeżeli nie określono prefiksa.StringWszystkie
previousSiblingWęzeł bezpośrednio poprzedni w drzewie dokumentu lub null jeżeli takiego nie ma.NodeWszystkie
scrollHeightThe scroll view height of an element.NumberHTML
scrollLeftPobiera/Ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu.NumberHTML
scrollTopPobiera/Ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu.NumberHTML
scrollWidthZwraca szerokość zawartości elementu w pikselach lub szerokość samego elementu.NumberHTML
styleObiekt reprezentujący deklaracje stylów elementu.CSSStyleHTML, XUL
tabIndexPobiera lub ustawia pozycję elementu w kolejności przechodzenia tabulatorem.NumberHTML
tagNameNazwa znacznika HTML danego elementu.StringWszystkie
textContentPobiera bądź ustawia tekstową treść elementu i jego potomków.StringWszystkie
+ +

 

+ +
+
attributes
+
Zwraca tablicę atrybutów elementu.
+
+ +
+
childNodes
+
Zwraca tablicę węzłów potomnych elementu
+
+ +
+
className
+
Pobiera/ustawia klasę elementu.
+
+ +
+
clientHeight
+
Własność DHTML-a, reprezentuje wewnętrzną wysokość elementu.
+
+ +
+
clientLeft
+
Długość od lewego obramowania elementu wyrażona w pikselach. Aktualnie nie obsługiwana.
+
+ +
+
clientTop
+
Długość od górnego obramowania elementu wyrażona w pikselach. Aktualnie nie obsługiwana.
+
+ +
+
clientWidth
+
Własność DHTML-a, reprezentuje wewnętrzną szerokość elementu.
+
+ +
+
dir
+
Pobiera/ustawia kierunkowość (ang. directionality) elementu.
+
+ +
+
firstChild
+
Zwraca pierwsze dziecko bieżącego węzła.
+
+ +
+
id
+
Pobiera/ustawia id elementu.
+
+ +
+
innerHTML
+
innerHTML zwraca całą zawartość elementu wraz ze znacznikami.
+
+ +
+
lang
+
Określa język bazowy dla wartość atrybutów i tekstowej zawartości elementu.
+
+ +
+
lastChild
+
Zwraca ostatnie dziecko bieżącego węzła.
+
+ +
+
length
+
Zwraca ilość elementów listy (np. childNodes).
+
+ +
+
localName
+
Zwraca lokalną część uściślonej nazwy węzła.
+
+ +
+
name
+
Pobiera lub ustawia atrybut name - dostępne nie dla wszystkich elementów.
+
+ +
+
namespaceURI
+
URI przestrzeni nazw węzła lub NULL, jeśli nie określono przestrzeni nazw.
+
+ +
+
nextSibling
+
Zwraca węzeł bezpośrednio następny w drzewie dokumentu.
+
+ +
+
nodeName
+
Zwraca nazwę biężącego węzła.
+
+ +
+
nodeType
+
Zwraca typ bieżącego węzła.
+
+ +
+
nodeValue
+
Zwraca wartość bieżącego węzła.
+
+ +
+
offsetHeight
+
offsetHeight jest własnością DHTML-a, zwracającą wysokość elementu względem układu.
+
+ +
+
offsetLeft
+
offsetLeft pobiera/ustawia ilość pikseli, jaka dzieli element od lewej strony wewnątrz węzła offsetParent.
+
+ +
+
offsetParent
+
offsetParent zwraca referencję do obiektu, w którym obecny element się znajduje (tj. rodzica).
+
+ +
+
offsetTop
+
offsetTop zwraca pozycję obecnego elementu względem góry węzła offsetParent.
+
+ +
+
offsetWidth
+
offsetWidth jest własnością DHTML-a, zwracającą szerokość elementu względem układu.
+
+ +
+
ownerDocument
+
Zwraca dokument, w którym znajduje się bieżący węzeł.
+
+ +
+
parentNode
+
Zwraca rodzica bieżącego węzła.
+
+ +
+
prefix
+
Zwraca prefiks przestrzeni nazw obecnego węzła bądź NULL, jeśli nie określono przestrzeni nazw.
+
+ +
+
previousSibling
+
Zwraca węzeł bezpośrednio poprzedni w drzewie dokumentu.
+
+ +
+
scrollHeight
+
Własność DHTML-a, zwraca wysokość zawartości elementu z paskiem przewijania.
+
+ +
+
scrollLeft
+
pobiera bądź ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu. Kierunek przewijania odbywa się w lewo.
+
+ +
+
scrollTop
+
Własność DHTML-a, która ustawia bądź pobiera odległość między górą elementu a najwyższym punktem zawartości elementu z paskiem przewijania.
+
+ +
+
scrollWidth
+
Zwraca the width of the scroll view of an element.
+
+ +
+
style
+
Zwraca blok reguł stylów dla elementu.
+
+ +
+
tabIndex
+
Pobiera/ustawia pozycję elementu w porządku tabulacji.
+
+ +
+
tagName
+
Zwraca nazwę elementu.
+
+ +
+
textContent
+
Pobiera/ustawia zawartość tekstu elementu włączając jego potomków.
+
+ +

Metody

+ +
+
addEventListener
+
Pozwala zarejestrować obserwatora zdarzeń dla celu zdarzenia.
+
+ +
+
appendChild
+
Wstawia określony węzeł do listy węzłów dokumentu.
+
+ +
+
blur
+
Dezaktywuje bieżący element.
+
+ +
+
click
+
Wywołuje kliknięcie na elemencie.
+
+ +
+
cloneNode
+
Zwraca kopię bieżącego węzła.
+
+ +
+
dispatchEvent
+
Pozwala przekazać wywołania zdarzeń do modelu zdarzeń w implementacji DOM.
+
+ +
+
focus
+
Aktywuje bieżący element.
+
+ +
+
getAttribute
+
Zwraca wartość atrybutu o podanej nazwie.
+
+ +
+
getAttributeNS
+
Zwraca wartość atrybutu o podanej nazwie i przestrzeni nazw.
+
+ +
+
getAttributeNode
+
Zwraca atrybut elementu jako osobny węzeł.
+
+ +
+
getElementsByTagName
+
Zwraca elementy o podanej nazwie będące potomkami bieżącego elementu.
+
+ +
+
hasAttribute
+
Zwraca wartość logiczną zależnie od tego, czy element posiada atrybut o podanej nazwie.
+
+ +
+
hasAttributeNS
+
Zwraca wartość logiczną zależnie od tego, czy element posiada atrybut o podanej nazwie i przestrzeni nazw.
+
+ +
+
hasAttributes
+
Zwraca wartość logiczną zależnie od tego, czy element posiada jakiekolwiek atrybuty.
+
+ +
+
hasChildNodes
+
Zwraca wartość logiczną zależnie od tego, czy element posiada dzieci.
+
+ +
+
insertBefore
+
Metoda pozwala wstawić węzeł przed bieżącym elementem w DOM.
+
+ +
+
item
+
Zwraca węzeł z drzewa wg podanego indeksu.
+
+ +
+
normalize
+
Metoda zapisuje bieżący węzeł i całe drzewo znajdujące się wewnątrz w "znormalizowanej" formie.
+
+ +
+
removeAttribute
+
Usuwa atrybut elementu.
+
+ +
+
removeAttributeNode
+
Usuwa określony atrybut elementu.
+
+ +
+
removeChild
+
Usuwa węzeł potomny bieżącego elementu.
+
+ +
+
removeEventListener
+
Pozwala usunąć obserwatora zdarzeń z celu zdarzenia.
+
+ +
+
replaceChild
+
Metoda replaceChild() zastępuje węzeł potomny bieżącego elementu innym węzłem.
+
+ +
+
setAttribute
+
Dodaje nowy atrybut bądź zmienia wartość atrybutu bieżącego elementu.
+
+ +
+
setAttributeNS
+
Dodaje nowy atrybut bądź zmienia wartość atrybutu bieżącego elementu, wg podanej nazwy i przestrzeni nazw.
+
+ +
+
setAttributeNode
+
Dodaje nowy węzeł atrybutu do bieżącego elementu.
+
+ +
+
setAttributeNodeNS
+
Dodaje nowy węzeł atrybutu do bieżącego elementu wg podanej nazwy i przestrzeni nazw.
+
+ +
+
supports
+
Sprawdza, czy implementacja DOM pozwala na wykorzystanie konkretnej możliwości.
+
+ +

Uchwyty zdarzeń

+ +

Poniższe właściwości nie mogą być przypisane, tak jak uchwyty zdarzeń obiektów document czy window. Wszystkie poniższe własności służą tylko do odczytu - zwracają kod obsługi zdarzeń, jeżeli został on nadany elementowi w samym HTML-u bądź XML-u.

+ +

Są to właściwości odnoszące się do HTML dla atrybutów zdarzeń 'on'.

+ +

W przeciwieństwie do odpowiadających atrybutów, wartości tych właściwość są funkcjami lub jakimkolwiek innym obiektem implementowanym przez EventListener interfejs. Przypisanie atrybutu zdarzenia w HTML powoduje utworzenie funkcji opakowującej funkcji dla określonego kodu. Np. podając następujący HTML:

+ +
<div onclick="foo();">click me!</div>
+
+ +

Jeżeli element jest referencją do <div>, wartość element.onclick wynosi faktycznie:

+ +
function onclick(event) {
+   foo();
+}
+
+ +

Note how the event object is passed as parameter event to this wrapper function.

+ +
+
onblur
+
Zwraca kod obsługi zdarzenia blur.
+
+ +
+
onclick
+
Zwraca kod obsługi zdarzenia onclick.
+
+ +
+
ondblclick
+
Zwraca kod obsługi zdarzenia dblclick.
+
+ +
+
onfocus
+
Zwraca kod obsługi zdarzenia focus.
+
+ +
+
onkeydown
+
Zwraca kod obsługi zdarzenia keydown.
+
+ +
+
onkeypress
+
Zwraca kod obsługi zdarzenia keypress.
+
+ +
+
onkeyup
+
Zwraca kod obsługi zdarzenia keyup.
+
+ +
+
onmousedown
+
Zwraca kod obsługi zdarzenia mousedown.
+
+ +
+
onmousemove
+
Zwraca kod obsługi zdarzenia mousemove.
+
+ +
+
onmouseout
+
Zwraca kod obsługi zdarzenia mouseout.
+
+ +
+
onmouseover
+
Zwraca kod obsługi zdarzenia mouseover.
+
+ +
+
onmouseup
+
Zwraca kod obsługi zdarzenia mouseup.
+
+ +
+
onresize
+
Zwraca kod obsługi zdarzenia resize.
+
diff --git a/files/pl/web/api/element/innerhtml/index.html b/files/pl/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..dafe31adf1 --- /dev/null +++ b/files/pl/web/api/element/innerhtml/index.html @@ -0,0 +1,67 @@ +--- +title: element.innerHTML +slug: Web/API/Element/innerHTML +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/innerHTML +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

innerHTML ustawia lub pobiera zbiór zawartych w danym elemencie znaczników razem z ich treścią.

+ +

Składnia

+ +
var markup = element.innerHTML;
+element.innerHTML = markup;
+
+ + + +

Przykład

+ +
// HTML:
+// <div id="d"><p>Treść</p>
+// <p>Bardziej skomplikowane</p>
+// </div>
+
+d = document.getElementById("d");
+dump(d.innerHTML);
+
+// ciąg "<p>Treść</p><p>Bardziej skomplikowane</p>"
+// zostanie wyświetlony w oknie konsoli
+
+ +

Uwagi

+ +

Własność ta, nie będąca częścią specyfikacji W3C DOM, zapewnia możliwość łatwego zastąpienia całej zawartości elementu. Na przykład można wyczyścić wszystko co jest w body:

+ +
document.body.innerHTML = "";  // Zawartość body zostaje zastąpiona pustym ciągiem
+
+ +

Własność innerHTML różnych elementów, w tym BODY i HTML może zostać pobrana czy zastąpiona. Można jej użyć, by wyświetlić źródło zmodyfikowanej dynamicznie strony:

+ +
// Skopiuj jako pojedynczą linię i wklej do paska adresu
+javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;
+
+ +

Ponieważ nie ma publicznej specyfikacji dla tej własności, jej implementacje różnią się. Na przykład po wprowadzeniu tekstu do pola tekstowego, IE zmieni zawartość atrybutu value elementu INPUT w innerHTML, a przeglądarki oparte o Gecko - nie.

+ +

Własności tej nigdy nie powinno się używać do zapisu części tabeli - zamiast niej należy skorzystać z metod W3C DOM. innerHTML można jednak użyć, by zapisać całą tabelę lub zmodyfikować zawartość pojedynczych komórek.

+ +

Specyfikacja

+ +

{{ DOM0() }}

+ +

Zobacz także

+ +

MSDN innerHTML

+ +

{{ languages( { "en": "en/DOM/element.innerHTML", "fr": "fr/DOM/element.innerHTML", "ja": "ja/DOM/element.innerHTML" } ) }}

diff --git a/files/pl/web/api/element/insertadjacenthtml/index.html b/files/pl/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..c3332ed337 --- /dev/null +++ b/files/pl/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,91 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

insertAdjacentHTML() metoda z {{domxref("Element")}} interfejsu analizuje specyficzny tekst jak HTML albo XML, wstawia wynik w drzewo DOM w określonej pozycji. to nie naprawia elementu jest użyty na a zatem nie jest zepsuty istniejący element w środku elementu. To unika ekstra kroków z serializacją, zrobienie tego jest wiele szybsze niż bezpośredni {{domxref("Element.innerHTML", "innerHTML")}} manipulation.

+ +

Syntax

+ +
element.insertAdjacentHTML(position, text);
+ +

Parametry

+ +
+
position
+
A {{domxref("DOMString")}} reprezentuje pozycję relatywną element-u musi być must be jeden z następujących ciągów: +
    +
  • 'beforebegin': przed element -em.
    • +
  • 'afterbegin': W środku element-u przed jego pierwszym dzieckiem.
    • +
  • 'beforeend': W środku elementu po jego ostatnim dziecku.
    • +
  • 'afterend': Po element-cie 
    • +
+
+
text
+
string analizuje HTML albo XML i włącza w drzewo.
+
+ +

Visualization of position names

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Note: beforebegin i afterend pozycja działa tylko jeśli node jest w drzewie DOM i ma rodzica elementu.
+ +

Przykład:

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// At this point, the new structure is:
+// <div id="one">one</div><div id="two">two</div>
+ +

Notes

+ +

Security considerations

+ +

When inserting HTML into a page by using insertAdjacentHTML(), be careful not to use user input that hasn't been escaped.

+ +

It is not recommended you use insertAdjacentHTML() when inserting plain text; instead, use the {{domxref("Node.textContent")}} property or the {{domxref("Element.insertAdjacentText()")}} method. This doesn't interpret the passed content as HTML, but instead inserts it as raw text.

+ +

Specification

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

Browser compatibility

+ + + +

{{Compat("api.Element.insertAdjacentHTML")}}

+ +

See also

+ + diff --git a/files/pl/web/api/element/insertbefore/index.html b/files/pl/web/api/element/insertbefore/index.html new file mode 100644 index 0000000000..27c40ad945 --- /dev/null +++ b/files/pl/web/api/element/insertbefore/index.html @@ -0,0 +1,86 @@ +--- +title: element.insertBefore +slug: Web/API/Element/insertBefore +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/insertBefore +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Wstawia określony węzeł przed danym elementem jako dziecko aktualnego węzła.

+ +

Składnia

+ +
var wstawionyElement =elementRodzic.insertBefore(nowyElement,danyElement)
+
+ +

Jeżeli danyElement ma wartość null, nowyElement jest wstawiany na końcu listy węzłów potomnych.

+ + + +

Przykład

+ +
 <html>
+
+ <head>
+ <title>Gecko DOM insertBefore test</title>
+ </head>
+
+ <body>
+ <div>
+   <span id="childSpan">foo bar</span>
+ </div>
+
+ <script type="text/javascript">
+ // tworzy pusty węzeł elementu
+ // bez ID, jakichkolwiek atrybutów lub jakiejkolwiek zawartości
+ var sp1 = document.createElement("span");
+
+ // daje to atrybut id nazwany 'newSpan'
+ sp1.setAttribute("id", "newSpan");
+
+ // tworzy jakąś zawartość dla nowo powstałego elementu.
+ var sp1_content = document.createTextNode("Jest to nowy element span. ");
+
+ // zwraca się, która treść ma być do nowego elementu.
+ sp1.appendChild(sp1_content);
+
+ var sp2 = document.getElementById("childSpan");
+ var parentDiv = sp2.parentNode;
+
+ // wstawia nowy element do DOM przed sp2
+ parentDiv.insertBefore(sp1, sp2);
+ </script>
+
+ </body>
+ </html>
+
+ +

Nie istnieje metoda insertAfter, jednak można ją emulować poprzez kombinację insertBefore oraz nextSibling.

+ +

W powyższym przykładzie, sp1 może zostać wstawiona za sp2 przy użyciu:

+ +
parentDiv.insertBefore(sp1, sp2.nextSibling);
+
+ +

Jeżeli sp2 nie posiada następnego rodzeństwa i musi być ostatnim potomnym —sp2.nextSibling to zwróci null więc sp1 będzie wstawione na końcu listy węzłów potomnych (np. natychmiast po sp2).

+ +

Specyfikacja

+ +

insertBefore

+ +

 

+ +
 
+ +

{{ languages( { "en": "en/DOM/element.insertBefore", "fr": "fr/DOM/element.insertBefore", "ja": "ja/DOM/element.insertBefore", "pt": "pt/DOM/element.insertBefore" } ) }}

diff --git a/files/pl/web/api/element/lang/index.html b/files/pl/web/api/element/lang/index.html new file mode 100644 index 0000000000..446c0817b9 --- /dev/null +++ b/files/pl/web/api/element/lang/index.html @@ -0,0 +1,40 @@ +--- +title: element.lang +slug: Web/API/Element/lang +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/lang +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność ta pozwala pobrać lub ustawić język bazowy wartości atrybutów i treści elementu.

+

Składnia i wartości

+
var languageUsed = elementNodeReference.lang;
+elementNodeReference.lang = NewLanguage;
+
+ +

Przykład

+
// poniższy fragment kodu porównuje język bazowy i odsyła
+// do innych URL na podstawie odczytanego kodu języka
+if (document.documentElement.lang == "en")
+   {
+    window.location.href = "Some_document.html.en";
+   }
+else if(document.documentElement.lang == "ru")
+   {
+    window.location.href = "Some_document.html.ru";
+   };
+
+

Uwagi

+

Kod języka zwracany przez w/w właściwość zgodny jest z kodami zdefiniowanymi w dokumencie RFC 1766. Przykładowo: "en" dla języka angielskiego, "ja" dla japońskiego, "es" dla hiszpańskiego itd. Domyślna wartość atrybutu to unknown. Wartość tego atrybutu ustawiana jest zwykle dla podstawowego (najwyższego) elementu dokumentu.

+

Specyfikacja

+

W3C DOM Level 2 HTML: lang

+
+  
+

{{ languages( { "en": "en/DOM/element.lang", "fr": "fr/DOM/element.lang", "ja": "ja/DOM/element.lang" } ) }}

diff --git a/files/pl/web/api/element/lastchild/index.html b/files/pl/web/api/element/lastchild/index.html new file mode 100644 index 0000000000..34475c02d7 --- /dev/null +++ b/files/pl/web/api/element/lastchild/index.html @@ -0,0 +1,28 @@ +--- +title: element.lastChild +slug: Web/API/Element/lastChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/lastChild +--- +

{{ ApiRef() }}

+

Podsumowanie

+

lastChild zwraca ostatnie dziecko węzła.

+

Składnia i wartości

+
ostatnieDziecko = element.lastChild
+
+

ostatnieDziecko to węzeł. Jeśli jego rodzicem jest element, dzieckiem jest na ogół węzeł elementu, komentarza lub węzeł tekstowy.

+

Przykład

+
tr = document.getElementById("row1");
+td_róg = tr.lastChild;
+
+

Uwagi

+

Jeżeli nie ma węzłów potomnych, zwracane jest null.

+

Specyfikacja

+

lastChild

+
+  
+

{{ languages( { "en": "en/DOM/element.lastChild", "fr": "fr/DOM/element.lastChild", "ja": "ja/DOM/element.lastChild" } ) }}

diff --git a/files/pl/web/api/element/length/index.html b/files/pl/web/api/element/length/index.html new file mode 100644 index 0000000000..ce5e1345ef --- /dev/null +++ b/files/pl/web/api/element/length/index.html @@ -0,0 +1,37 @@ +--- +title: element.length +slug: Web/API/Element/length +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/NodeList/length +--- +

{{ ApiRef() }}

+

Podsumowanie

+

length zwraca liczbę elementów listy.

+

Składnia

+
liczbaElementów = nodeList.length
+
+

Parametry

+ +

Przykład

+
// wszystkie paragrafy z dokumentu
+items = document.getElementsByTagName("p");
+// są jakieś?
+if ( items.length ) {
+     // dodaj HTML z każdego elemntu listy
+     for (var i = 0; i < items.length; i++) {
+         gross += items[0].innerHTML;
+         // gross zawiera teraz cały HTML z paragrafów
+     }
+}
+
+

Uwagi

+

Właściwość length jest bardzo częsta w programowaniu z użyciem DOM. Używa się jej by sprawdzić, czy lista zawiera elementy oraz w pętli for, jak w powyższym przykładzie.

+

Specyfikacja

+

length

+

{{ languages( { "en": "en/DOM/element.length", "ja": "ja/DOM/element.length" } ) }}

diff --git a/files/pl/web/api/element/localname/index.html b/files/pl/web/api/element/localname/index.html new file mode 100644 index 0000000000..55b5649e31 --- /dev/null +++ b/files/pl/web/api/element/localname/index.html @@ -0,0 +1,64 @@ +--- +title: element.localName +slug: Web/API/Element/localName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/localName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

localName zwraca lokalną część uściślonej nazwy węzła.

+

Składnia

+
nazwa = element.localName
+
+

Parametry

+ +

Przykład

+

(Musi obsługiwać treść XML typu, jak <tt>text/xml</tt> lub <tt>application/xhtml+xml</tt>.)

+
<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:svg="http://www.w3.org/2000/svg">
+<head>
+  <script><![CDATA[
+  function test() {
+    var text = document.getElementById('text');
+    var circle = document.getElementById('circle');
+
+    text.value = "<svg:circle> has:\n" +
+                 "localName = '" + circle.localName + "'\n" +
+                 "namespaceURI = '" + circle.namespaceURI + "'";
+  }
+  ]]></script>
+</head>
+<body onload="test()">
+  <textarea id="text" rows="4" cols="55"/>
+  <svg:svg version="1.1"
+    style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:0;"
+    viewBox="0 0 100 100">
+    <svg:circle cx="50" cy="50" r="30" style="fill:#aaa" id="circle"/>
+  </svg:svg>
+</body>
+</html>
+
+

Uwagi

+

Dla węzłów typu innego niż ELEMENT_NODE i ATTRIBUTE_NODE oraz dla węzłów utworzonych za pomocą metod DOM Level 1, jak na przykład document.createElement, własność ta ma zawsze wartość NULL.

+

localname węzła to ta część uściślonej nazwy węzła, która znajduje się po dwukropku. Uściślone nazwy są zwykle używane w XML jako część przestrzeni nazw w poszczególnych dokumentach XML. Na przykład w uściślonej nazwie "ecomm:partners" nazwa lokalna to "partners", a "ecomm" to prefiks.

+
<ecomm:business id="soda_shop" type="brick_n_mortar">
+  <ecomm:partners>
+    <ecomm:partner id="1001">Tony's Syrup Warehouse
+    </ecomm:partner>
+  </ecomm:partner>
+</ecomm:business>
+
+

Prefiks - w tym wypadku "ecomm" - określa przestrzeń nazw, w której można użyć nazwy lokalnej.

+

Zobacz także

+

element.namespaceURI

+

Specyfikacja

+

localName

+
+  
+

{{ languages( { "en": "en/DOM/element.localName", "fr": "fr/DOM/element.localName", "ja": "ja/DOM/element.localName" } ) }}

diff --git a/files/pl/web/api/element/name/index.html b/files/pl/web/api/element/name/index.html new file mode 100644 index 0000000000..e1a9fa7f41 --- /dev/null +++ b/files/pl/web/api/element/name/index.html @@ -0,0 +1,60 @@ +--- +title: element.name +slug: Web/API/Element/name +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API +--- +

{{ ApiRef() }}

+

Podsumowanie

+

name pobiera lub ustawia atrybut name obiektu DOM. Ma zastosowanie tylko dla poniższych elementów: anchor, applet, form, frame, iframe, image, input, map, meta, object, option, param, select i textarea.

+

name można wykorzystać w metodzie getElementsByName, w obiekcie form i w kolekcji elements. Jeśli zostanie użyta dla formularza lub kolekcji elementów, właściwość tak może zwrócić jeden element lub ich kolekcję.

+

Składnia

+
HTMLElement.name = string;
+var elName = HTMLElement.name;
+
+var kontrolka = HTMLFormElement.nazwaElementu;
+var kolekcjaKontrolek = HTMLFormElement.elements.nazwaElementu;
+
+

Przykład

+
<form action="" name="formA">
+  <input type="text" value="foo">
+</form>
+
+<script type="text/javascript">
+
+  // pobierz referncję do pierwszego elementu formularza
+  var formElement = document.forms['formA'].elements[0];
+
+  // nadaj mu nazwę
+  formElement.name = 'inputA';
+
+  // i wyświetl jego wartość
+  alert(document.forms['formA'].elements['inputA'].value);
+
+</script>
+
+

uwagi

+

W przeglądarce Internet Explorer (IE) nie można modyfikować właściwości name obiektów DOM utworzonych za pomocą createElement.

+

Specyfikacja

+

Specyfikacja W3C DOM 2 HTML:

+ +

{{ languages( { "en": "en/DOM/element.name", "ja": "ja/DOM/element.name", "fr": "fr/DOM/element.name" } ) }}

diff --git a/files/pl/web/api/element/namespaceuri/index.html b/files/pl/web/api/element/namespaceuri/index.html new file mode 100644 index 0000000000..9f252ba570 --- /dev/null +++ b/files/pl/web/api/element/namespaceuri/index.html @@ -0,0 +1,39 @@ +--- +title: element.namespaceURI +slug: Web/API/Element/namespaceURI +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/namespaceURI +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca URI przestrzeni nazw tego węzła lub NULL, jeśli jej nie określono.

+

Składnia

+
przestrzeńNazw = element.namespaceURI
+
+

Parametry

+ +

Przykład

+

W poniższym wycinku kodu sprawdzane są localName i namespaceURI węzła. Jeśli namespaceURI jest zgodny ze zmienną zawierającą przestrzeń nazw dla XUL, węzeł jest uznawany za widget <browser /> w języku XUL.

+
if (node.localName == "browser"
+    && node.namespaceURI == kXULNSURI) {
+// xul browser
+this.viewee = node.webNavigation.document;
+//...
+}
+
+

Uwagi

+

Nie jest to wyznaczona wartość, będąca rezultatem przeszukiwania w oparciu o deklaracje przestrzeni nazw w zakresie, w jakim znajduje się element. Jest to jedynie URI takiej przestrzeni nazw, jaką nadano w momencie tworzenia elementu.

+

Dla węzłow typów innych niż ELEMENT_NODE i ATTRIBUTE_NODE oraz węzłów utworzonych metodami DOM Level 1, jak document.createElement, wartość tej właściwości to zawsze NULL.

+

Zgodnie ze specyfikacją Namespaces in XML atrybut nie dziedziczy przestrzeni nazw po elemencie, do którego jest przypisany. Jeśli atrybut nie ma bezpośrednio nadanej przestrzeni nazw, po prostu nie należy do żadnej przestrzeni.

+

Specyfikacja

+

namespaceURI

+

Przestrzenie nazw XML

+
+  
+

{{ languages( { "en": "en/DOM/element.namespaceURI", "fr": "fr/DOM/element.namespaceURI", "ja": "ja/DOM/element.namespaceURI" } ) }}

diff --git a/files/pl/web/api/element/nextsibling/index.html b/files/pl/web/api/element/nextsibling/index.html new file mode 100644 index 0000000000..17f1822a56 --- /dev/null +++ b/files/pl/web/api/element/nextsibling/index.html @@ -0,0 +1,63 @@ +--- +title: element.nextSibling +slug: Web/API/Element/nextSibling +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nextSibling +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca węzeł znajdujący się w drzewie bezpośrednio za węzłem bieżącym.

+

Składnia i wartości

+
następnyElement = element.nextSibling
+
+

następnyElement to węzeł bezpośrednio następny w liście rodzeństwa (np. liście dzieci węzła parentNode). Następnym węzłem jest na ogół węzeł elementu, komentarza lub węzeł tekstowy.

+

Przykład

+
<div id="div-01">Here is div-01</div>
+<div id="div-02">Here is div-02</div>
+
+<script type="text/javascript">
+  var el = document.getElementById('div-01').nextSibling;
+  document.write('<p>Rodzeństwo div-01</p><ol>');
+  while (el) {
+    document.write('<li>' + el.nodeName + '</li>');
+    el = el.nextSibling;
+  }
+  document.write('</ol>');
+</script>
+
+/**************************************************
+  Po załadowaniu zostanie dopisane do strony:
+
+     Rodzeństwo div-01
+
+      1. #text
+      2. DIV
+      3. #text
+      4. SCRIPT
+      5. P
+      6. OL
+**************************************************/
+
+

Węzły tekstowe - #text - są w powyższym przykładzie wstawiane do modelu dokumentu w miejsce białych znaków między elementami (np. po znaczniku zamykającym jeden element, ale przed znacznikiem otwierającym następny element). Białe znaki nie są wstawiane przy wywołaniu document.write.

+

Poniższy przykład pokazuje, jak białe znaki wpływają na sąsiednie węzły komórek tabeli:

+
<table>
+  <tr>
+    <td id="cell1">cell1</td>
+    <td id="cell2">cell2</td>
+  </tr>
+  <tr>
+    <td id="cell3">cell3</td><td id="cell4">cell4</td></tr>
+</table>
+
+

nextSibling cell1 to węzeł tekstowy. Między komórkami drugiego rzędu tabeli nie ma białych znaków, dlatego rodzeństwo cell3 to tylko cell4. Podczas przechodzenia przez model dokumentu za pomocą nextSibling należy liczyć się z możliwością wystąpienia węzłów tekstowych.

+

Uwagi

+

Zwraca null, kiedy nie ma już więcej węzłów.

+

Specyfikacja

+

nextSibling

+
+  
+

{{ languages( { "en": "en/DOM/element.nextSibling", "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling" } ) }}

diff --git a/files/pl/web/api/element/nodename/index.html b/files/pl/web/api/element/nodename/index.html new file mode 100644 index 0000000000..93a54424a6 --- /dev/null +++ b/files/pl/web/api/element/nodename/index.html @@ -0,0 +1,98 @@ +--- +title: element.nodeName +slug: Web/API/Element/nodeName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca nazwę węzła jako ciąg znaków.

+

Składnia

+
nazwa = element.nodeName
+
+

+ + nazwa + to ciąg znaków reprezentujący nazwę bieżącego elementu. nodeName to atrybut tylko do odczytu.

+

Uwagi

+

Poniżej przedstawione są wartości zwracane dla różnych typów węzłów:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InterfejsnodeName
Attrtak samo jak Attr.name
CDATASection"#cdata-section"
Comment"#comment"
Document"#document"
DocumentFragment"#document-fragment"
DocumentTypetak samo jak DocumentType.name
Elementtak samo jak Element.tagName
Entitynazwa encji
EntityReferencenazwa refernecji do encji
Notationnazwa notacji
ProcessingInstructiontak samo jak ProcessingInstruction.target
Text"#text"
+

Przykład

+

Dane są poniższe znaczniki

+
<div id="d1">hello world</div>
+<input type="text" id="t"/>
+
+

i taki skrypt:

+
var div1 = document.getElementById("d1");
+var poleTekstowe = document.getElementById("t");
+poleTekstowe.value = div1.nodeName;
+
+

W XHTML-u (lub innym formacie XML) wartość pola tekstowego to "div". W HTML wartość ta to "DIV".

+

Zauważ, że można było użyć właściwości tagName, ponieważ dla elementów nodeName ma taką samą wartość jak tagName.

+

Specyfikacja

+

W3C DOM Level 2 Core: nodeName

+

W3C DOM Level 3 Core: nodeName

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.nodeName", "es": "es/DOM/element.nodeName", "fr": "fr/DOM/element.nodeName", "it": "it/DOM/element.nodeName", "ja": "ja/DOM/element.nodeName" } ) }}

diff --git a/files/pl/web/api/element/nodetype/index.html b/files/pl/web/api/element/nodetype/index.html new file mode 100644 index 0000000000..8f3825ea86 --- /dev/null +++ b/files/pl/web/api/element/nodetype/index.html @@ -0,0 +1,44 @@ +--- +title: element.nodeType +slug: Web/API/Element/nodeType +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeType +--- +
+ {{ApiRef}}
+

Podsumowanie

+

Zwraca kod reprezentujący typ węzła.

+

Składnia

+
typ = document.nodeType
+
+

typ jest zmienną liczbową typu unsigned short o jednej z poniższych wartości:

+ +

Przykład

+

Ten przykład sprawdza czy pierwszy węzeł wewnątrz elementu document jest comment node, i jeśli nie jest, wyświetli wiadomość.

+
var node = document.documentElement.firstChild;
+
+if(node.nodeType != Node.COMMENT_NODE)
+  alert("You should comment your code well!");
+
+

Specyfikacja

+ diff --git a/files/pl/web/api/element/nodevalue/index.html b/files/pl/web/api/element/nodevalue/index.html new file mode 100644 index 0000000000..205871bba3 --- /dev/null +++ b/files/pl/web/api/element/nodevalue/index.html @@ -0,0 +1,85 @@ +--- +title: Node.nodeValue +slug: Web/API/Element/nodeValue +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/nodeValue +--- +
+ {{APIRef}}
+
+  
+
+ Podsumowanie
+

Zwraca wartość bieżącego węzła.

+

Składnia

+
wartość = document.nodeValue
+
+

wartość to ciąg znaków reprezentujący wartość elementu, jeśli taka istnieje.

+

Uwagi

+

Dla dokumentu nodeValue zwraca null. Dla węzłów tekstowych, komentarzy i CDATA nodeValue zwraca zawartość węzła. Dla węzłów atrybutów, zwracana jest wartość atrybutu.

+

Poniższa tabela przedstawia wartości zwracane dla różnych interfejsów:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
InterfejsnodeValue
Attrwartość atrybutu
CDATASectiontreść sekcji CDATA
Commenttreść komentarza
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructioncała treść, wyłączając cel
Texttreść węzła tekstowego
+

Jeśli nodeValue z definicji ma wartość null, ustawianie tej właściwości nie będzie mieć efektu.

+

Specyfikacja

+ diff --git a/files/pl/web/api/element/normalize/index.html b/files/pl/web/api/element/normalize/index.html new file mode 100644 index 0000000000..4dac3822cc --- /dev/null +++ b/files/pl/web/api/element/normalize/index.html @@ -0,0 +1,22 @@ +--- +title: element.normalize +slug: Web/API/Element/normalize +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/normalize +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda zapisuje określony węzeł i całe jego poddrzewo w "znormalizowanej" formie. W znormalizowanym poddrzewie żaden węzeł tekstowy nie jest pusty, nie ma również sąsiednich węzłów tekstowych.

+

Składnia

+
element.normalize()
+
+

Uwagi

+

Specyfikacja

+

DOM Level 2 Core: Node.normalize

+
+  
+

{{ languages( { "en": "en/DOM/element.normalize", "fr": "fr/DOM/element.normalize" } ) }}

diff --git a/files/pl/web/api/element/offsetheight/index.html b/files/pl/web/api/element/offsetheight/index.html new file mode 100644 index 0000000000..ce5fc2254e --- /dev/null +++ b/files/pl/web/api/element/offsetheight/index.html @@ -0,0 +1,61 @@ +--- +title: element.offsetHeight +slug: Web/API/Element/offsetHeight +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetHeight +--- +

{{ ApiRef() }}

+ +

offsetHeight

+ +

Własność DHTML (Dynamic HyperText Markup Language), która daje wysokość relatywnego elementu do układu strony.

+ +

Składnia i wartości

+ +
varintElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;
+
+ +

intElemOffsetHeightis a variable storing an integer corresponding to the offsetHeight pixel value of the element. offsetHeight is a read-only property.

+ +

Opis

+ +

Typically, an element's offsetHeight is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.

+ +

Przykład

+ +
+
+

padding-top

+ +

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+ +

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+ +

Cat image and text coming from www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

grafika:offsetHeight.png

+ +

Specyfikacja

+ +

offsetHeight is part of the MSIE's DHTML object model. offsetHeight is not part of any W3C specification or technical recommendation.

+ +

Uwagi

+ +

offsetHeight is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred as an element physical/graphical dimensions or an element's box height.

+ +

Dokumentacja

+ + diff --git a/files/pl/web/api/element/offsetleft/index.html b/files/pl/web/api/element/offsetleft/index.html new file mode 100644 index 0000000000..b0252f3363 --- /dev/null +++ b/files/pl/web/api/element/offsetleft/index.html @@ -0,0 +1,73 @@ +--- +title: element.offsetLeft +slug: Web/API/Element/offsetLeft +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetLeft +--- +

{{ ApiRef("HTML DOM") }}

+ +

Podsumowanie

+ +

Zwraca ilość pikseli, jaką dzieligórny lewy róg bieżącego elementu od lewej strony wewnątrz węzła offsetParent.

+ +

Składnia

+ +
left =element.offsetLeft;
+
+ +

left jest liczbą całkowitą reprezentująca przesunięcie od lewej strony podane w pikselach.

+ +

Uwaga

+ +

offsetLeft returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for inline elements (such as span) in flowed text that wraps from one line to the next. The span may start in the middle of the line and wrap around to the beginning of the next line. The offsetLeft will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text. (And, I can't figure out how to find the leftmost edge of such a span, sigh.)

+ +

Przykład

+ +
var colorTable = document.getElementById("t1");
+var tOLeft = colorTable.offsetLeft;
+
+if (tOLeft > 5) {
+  // duże lewe przesunięcie: zrób coś tutaj
+}
+
+ +

Przykład

+ +

Per the note above, this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.

+ +

Image:offsetLeft.jpg

+ +

Note: This is an image of the example, not a live rendering in the browser. This was done because script elements can't be included in the wiki page.

+ +
<div style="width: 300px; border-color:blue;
+  border-style:solid; border-width:1;">
+  <span>Short span. </span>
+  <span id="long">Long span that wraps withing this div.</span>
+</div>
+
+<div id="box" style="position: absolute; border-color: red;
+  border-width: 1; border-style: solid; z-index: 10">
+</div>
+
+<script>
+  var box = document.getElementById("box");
+  var long = document.getElementById("long");
+  box.style.left = long.offsetLeft + document.body.scrollLeft;
+  box.style.top = long.offsetTop + document.body.scrollTop;
+  box.style.width = long.offsetWidth;
+  box.style.height = long.offsetHeight;
+</script>
+
+ +

Zobacz także

+ +

offsetParent, offsetTop, offsetWidth, offsetHeight

+ +

Specyfikacja

+ +

Niestandardowa własność.

diff --git a/files/pl/web/api/element/offsetparent/index.html b/files/pl/web/api/element/offsetparent/index.html new file mode 100644 index 0000000000..c33d32b38c --- /dev/null +++ b/files/pl/web/api/element/offsetparent/index.html @@ -0,0 +1,28 @@ +--- +title: element.offsetParent +slug: Web/API/Element/offsetParent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetParent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

offsetParent zwraca referencję do obiektu, który jest najbliższym (w hierarchii zawierania się elementów) pozycjonowanym elementem. Jeżeli element nie jest pozycjonowany, offsetParent jest wówczas korzeń dokumentu (html w trybie zgodności ze standardami; body w trybie przybliżonym).

+

Składnia

+
parentObj = element.offsetParent
+
+

Parametry

+ +

Specyfikacja

+

DOM Level 0. + + Nie jest częścią specyfikacji. +

+
+  
+

{{ languages( { "en": "en/DOM/element.offsetParent", "fr": "fr/DOM/element.offsetParent" } ) }}

diff --git a/files/pl/web/api/element/offsetwidth/index.html b/files/pl/web/api/element/offsetwidth/index.html new file mode 100644 index 0000000000..b78d7b4136 --- /dev/null +++ b/files/pl/web/api/element/offsetwidth/index.html @@ -0,0 +1,70 @@ +--- +title: element.offsetWidth +slug: Web/API/Element/offsetWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetWidth +--- +

{{ APIRef("HTML DOM") }}

+ +

offsetWidth

+ +

właściwość DHTML, która podaje szerokość elementu, odnosząca się do układu strony.

+ +

Składnia i wartości

+ +
var intElemOffsetWidth = document.getElementById(id_attribute_value).offsetWidth;
+
+ +

intElemOffsetWidth jest zmienną przechowującą liczbę całkowitą odpowiadającą wartości offsetWidth elementu i wyrażoną w pikselach. offsetWidth jest właściwością tylko do odczytu.

+ +

Opis

+ +

Zazwyczaj offsetWidth elementu obejmuje jego obramowanie, wewnętrzny margines (padding), pionowy pasek przewijania (jeśli jest obecny lub renderowany) i szerokość CSS elementu.

+ +

Przykład

+ +
+
+

padding-top

+ +

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+ +

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+ +

Cat image and text coming from www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

Image:offsetWidth.png

+ +

Specyfikacja

+ +

offsetWidth jest częścią modelu obiektowego MSIE DHTML. offsetWidth nie jest częścią żadnej specyfikacji W3C ani rekomendacji technicznej.

+ +

Uwagi

+ +

offsetWidth jest własnością modelu obiektowego DHTML, który został wprowadzony przez MSIE. Czasem określany jest jako fizyczny/graficzny wymiar elementu lub jako szerokość pudełka elementu.

+ +

Dokumentacja

+ + + +
+

Zobacz również

+
+ + diff --git a/files/pl/web/api/element/onclick/index.html b/files/pl/web/api/element/onclick/index.html new file mode 100644 index 0000000000..b6215b4c00 --- /dev/null +++ b/files/pl/web/api/element/onclick/index.html @@ -0,0 +1,66 @@ +--- +title: element.onclick +slug: Web/API/Element/onclick +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onclick +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Właściwość onclick zwraca kod obsługi zdarzenia onClick w bieżącym elemencie.

+

Składnia

+
element.onclick = refDoFunkcji;
+
+

gdzie refDoFunkcji to nazwa funkcji zadeklarowanej gdzie indziej bądź wyrażenie funkcyjne. Zob. Funkcje. - tego rodzialu jeszcze nie ma, a pod nazwa Funkcje jest cos innego

+

Przykład

+
<html>
+
+<head>
+<title>przykład zdarzenia onclick</title>
+
+<script type="text/javascript">
+
+function initElement()
+ {
+ var p = document.getElementById("foo");
+
+ // Uwaga: ani showAlert();, ani showAlert(param); tu NIE zadziałają
+ // potrzebna jest referencja do funkcji, a nie wywołanie funkcji
+ p.onclick = showAlert;
+ };
+
+function showAlert()
+ {
+ alert("wykryto zdarzenie onclick!")
+ }
+</script>
+
+<style type="text/css">
+<!--
+#foo {
+border: solid blue 2px;
+}
+-->
+</style>
+</head>
+
+<body onload="initElement()";>
+<span id="foo">Mój Element</span>
+<p>Kliknij na powyższy element.</p>
+</body>
+</html>
+
+

Można również użyć funkcji bezimiennej jak poniżej:

+
p.onclick = function() { alert("moot!"); };
+
+

Not going to confuse poor readers with this. You could also use a the Function constructor: <pre> p.onclick = Function( "alert('moot!')" ); </pre>

+

Uwagi

+

Zdarzenie click jest wywoływane, kiedy użytkownik kliknie na element. Zdarzenie to występuje po mousedown i mouseup.

+

Tylko jedna funkcja obsługi zdarzenia może zostać przypisana za jednym razem za pomocą tej właściwości. Możesz zamiast niej użyć metody addEventListener - jest bardziej elastyczna i stanowi część specyfikacji DOM Events.

+

Specyfikacja

+

{{ DOM0() }}

+

{{ languages( { "en": "en/DOM/element.onclick", "fr": "fr/DOM/element.onclick" } ) }}

diff --git a/files/pl/web/api/element/onkeypress/index.html b/files/pl/web/api/element/onkeypress/index.html new file mode 100644 index 0000000000..eb57c1936c --- /dev/null +++ b/files/pl/web/api/element/onkeypress/index.html @@ -0,0 +1,21 @@ +--- +title: element.onkeypress +slug: Web/API/Element/onkeypress +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onkeypress +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Właściwość onkeypress zawiera kod obsługi zdarzenia onKeyPress dla bieżącego elementu.

+

Składnia

+
element.onkeypress = kod obsługi zdarzenia
+
+

Uwagi

+

Zdarzenie keydown wywoływane jest, gdy użytkownik naciska klawisz na klawiaturze.

+

Specyfikacja

+

{{ DOM0() }}

diff --git a/files/pl/web/api/element/onkeyup/index.html b/files/pl/web/api/element/onkeyup/index.html new file mode 100644 index 0000000000..ad411b0e1a --- /dev/null +++ b/files/pl/web/api/element/onkeyup/index.html @@ -0,0 +1,24 @@ +--- +title: element.onkeyup +slug: Web/API/Element/onkeyup +tags: + - DOM + - DOM_0 + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onkeyup +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Właściwość onkeyup zawiera kod obsługi zdarzenia keyup dla bieżącego elementu.

+

Składnia

+
kod obsługi zdarzenia = element.onkeyup
+
+

Uwagi

+

Zdarzenie keyup wywoływane jest, gdy użytkownik zwalnia naciśnięty klawisz na klawiaturze.

+

Specyfikacja

+

{{ DOM0() }}

+
+  
+

{{ languages( { "en": "en/DOM/element.onkeyup", "fr": "fr/DOM/element.onkeyup" } ) }}

diff --git a/files/pl/web/api/element/onmousedown/index.html b/files/pl/web/api/element/onmousedown/index.html new file mode 100644 index 0000000000..e616906126 --- /dev/null +++ b/files/pl/web/api/element/onmousedown/index.html @@ -0,0 +1,23 @@ +--- +title: element.onmousedown +slug: Web/API/Element/onmousedown +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onmousedown +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność onmousedown zwraca kod obsługi zdarzenia onMouseDown w bieżącym elemencie.

+

Składnia

+
event handling code = element.onMouseDown
+
+

Uwagi

+

Zdarzenie mousedown jest wywołane kiedy użytkownik naciśnie lewy przycisk.

+

Specyfikacja

+

DOM Level 0. Nie jest częścią specyfikacji.

+
+  
+

{{ languages( { "en": "en/DOM/element.onmousedown", "fr": "fr/DOM/element.onmousedown" } ) }}

diff --git a/files/pl/web/api/element/onmousemove/index.html b/files/pl/web/api/element/onmousemove/index.html new file mode 100644 index 0000000000..f54256c9f7 --- /dev/null +++ b/files/pl/web/api/element/onmousemove/index.html @@ -0,0 +1,29 @@ +--- +title: element.onmousemove +slug: Web/API/Element/onmousemove +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/GlobalEventHandlers/onmousemove +--- +

{{ ApiRef() }}

+ +

Podsumowanie

+ +

Właściwość onmousemove zwraca kod obsługi zdarzenia mousemove w bieżącym elemencie.

+ +

Składnia

+ +
event handling code = element.onMouseMove
+
+ +

Uwagi

+ +

Zdarzenie mousemove jest wywoływane, kiedy użytkownik przesunie kursor myszy.

+ +

Specyfikacja

+ +

DOM Level 0. Nie jest częścią specyfikacji.

diff --git a/files/pl/web/api/element/ownerdocument/index.html b/files/pl/web/api/element/ownerdocument/index.html new file mode 100644 index 0000000000..0ecbed4869 --- /dev/null +++ b/files/pl/web/api/element/ownerdocument/index.html @@ -0,0 +1,30 @@ +--- +title: element.ownerDocument +slug: Web/API/Element/ownerDocument +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/ownerDocument +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność ownerDocument zwraca obiekt najwyższego poziomu - dokument, w którym znajduje się bieżący węzeł.

+

Składnia

+
dokument = element.ownerDocument
+
+

dokument to obiekt document, będący rodzicem bieżącego elementu.

+

Przykład

+
// dla danego elementu "p" znajdź element HTML najwyższego poziomu
+d = p.ownerDocument;
+html = d.documentElement;
+
+

Uwagi

+

Obiekt document zwracany przez tę własność jest głównym obiektem, w którym tworzone są wszystkie węzły-dzieci właściwego dokumentu HTML. Własność ta użyta na węźle, który sam jest dokumentem, zwraca NULL

+

Specyfikacja

+

ownerDocument

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.ownerDocument", "fr": "fr/DOM/element.ownerDocument", "ja": "ja/DOM/element.ownerDocument" } ) }}

diff --git a/files/pl/web/api/element/parentnode/index.html b/files/pl/web/api/element/parentnode/index.html new file mode 100644 index 0000000000..ec9bbceda0 --- /dev/null +++ b/files/pl/web/api/element/parentnode/index.html @@ -0,0 +1,34 @@ +--- +title: element.parentNode +slug: Web/API/Element/parentNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/parentNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Własność parentNode zwraca rodzica bieżącego elementu.

+

Składnia i wartości

+
rodzic = element.parentNode
+
+

rodzic jest rodzicem bieżącego węzła. Rodzicem elementu jest węzeł typu Element, Document lub DocumentFragment.

+

Przykład

+
text_field = document.getElementById("t");
+if ( div1.parentNode == document ){
+    text_field.setAttribute("value", "top-level");
+    // pole tekstowe wyświetli tekst "top-level" }
+
+

Uwagi

+

parentNode zwraca null dla poniższych typów węzłów: Attr, Document, DocumentFragment, Entity i Notation.

+

null zwracane jest także, gdy węzeł został utworzony, ale nie przypisano go jeszcze do drzewa.

+

Zobacz także

+

{{ Domxref("element.firstChild") }}, {{ Domxref("element.lastChild") }}, {{ Domxref("element.childNodes") }}, {{ Domxref("element.nextSibling") }}, {{ Domxref("element.previousSibling") }}.

+

Specyfikacja

+

DOM Level 2 Core: Node.parentNode

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.parentNode", "fr": "fr/DOM/element.parentNode", "it": "it/DOM/element.parentNode", "ja": "ja/DOM/element.parentNode" } ) }}

diff --git a/files/pl/web/api/element/prefix/index.html b/files/pl/web/api/element/prefix/index.html new file mode 100644 index 0000000000..c5ecdac392 --- /dev/null +++ b/files/pl/web/api/element/prefix/index.html @@ -0,0 +1,28 @@ +--- +title: element.prefix +slug: Web/API/Element/prefix +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/prefix +--- +

{{ ApiRef() }}

+

Podsumowanie

+

prefix zwraca prefiks przestrzeni nazw węzła lub null, jeśli nie określono prefiksu.

+

Składnia

+
string = element.prefix
+element.prefix =string
+
+

Przykłady

+
<x:div onclick="alert(this.prefix)"/>
+
+

Wyświetlone zostanie "x".

+

Uwagi

+

Własność ta działa tylko wtedy, gdy używany jest parser przetwarzający przestrzenie nazw, tj. gdy dokument serwowany jest z typem MIME XML. Własność nie działa dla dokumentów HTML.

+

Specyfikacja

+

Node.prefix (wprowadzona w DOM2)

+
+  
+

{{ languages( { "en": "en/DOM/element.prefix", "fr": "fr/DOM/element.prefix", "it": "it/DOM/element.prefix", "ja": "ja/DOM/element.prefix" } ) }}

diff --git a/files/pl/web/api/element/previoussibling/index.html b/files/pl/web/api/element/previoussibling/index.html new file mode 100644 index 0000000000..0199cfb1a7 --- /dev/null +++ b/files/pl/web/api/element/previoussibling/index.html @@ -0,0 +1,28 @@ +--- +title: element.previousSibling +slug: Web/API/Element/previousSibling +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/previousSibling +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zwraca węzeł bezpośrednio poprzedzający bieżący węzeł w drzewie.

+

Składnia i wartości

+
pNode = elementNode.previousSibling
+
+

pNode to węzeł przed bieżącym na liście rodzeństwa (czyli liście dzieci rodzica). Węzeł poprzedzający element jest zwykle węzłem elementu, komentarza lub tekstowym.

+

Przykład

+
var n1 = n2.previousSibling;
+
+

Uwagi

+

Zwraca null, jeśli nie ma poprzedzających węzłów.

+

Specyfikacja

+

DOM Level 1 Core: previousSibling

+

DOM Level 2 Core: previousSibling

+
+  
+

{{ languages( { "en": "en/DOM/element.previousSibling", "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling" } ) }}

diff --git a/files/pl/web/api/element/queryselector/index.html b/files/pl/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..62c6fe2561 --- /dev/null +++ b/files/pl/web/api/element/queryselector/index.html @@ -0,0 +1,180 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef("DOM")}}
+ +

Returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.

+ +

Syntax

+ +
element = baseElement.querySelector(selectors);
+
+ +

Parameters

+ +
+
selectors
+
A group of selectors to match the descendant elements of the {{domxref("Element")}} baseElement against; this must be valid CSS syntax, or a SyntaxError exception will occur. The first element found which matches this group of selectors is returned.
+
+ +

Return value

+ +

The first descendant element of baseElement which matches the specified group of selectors. The entire hierarchy of elements is considered when matching, including those outside the set of elements including baseElement and its descendants; in other words, selectors is first applied to the whole document, not the baseElement, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of baseElement. The first match of those remaining elements is returned by the querySelector() method.

+ +

If no matches are found, the returned value is null.

+ +

Exceptions

+ +
+
SyntaxError
+
The specified selectors are invalid.
+
+ +

Examples

+ +

Let's consider a few examples.

+ +

Find a specific element with specific values of an attribute

+ +

In this first example, the first {{HTMLElement("style")}} element which either has no type or has type "text/css" in the HTML document body is returned:

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

The entire hierarchy counts

+ +

The next example, below, demonstrates that the hierarchy of the entire document is considered when applying selectors, so that levels which are outside the specified baseElement are still considered when locating matches.

+ +

HTML

+ +
<div>
+  <h5>Original content</h5>
+  <p>
+    inside paragraph
+    <span>inside span</span>
+    inside paragraph
+  </p>
+</div>
+<div>
+  <h5>Output</h5>
+  <div id="output"></div>
+</div>
+ +

JavaScript

+ +
var baseElement = document.querySelector("p");
+document.getElementById("output").innerHTML =
+         (baseElement.querySelector("div span").innerHTML);
+ +

Result

+ +

The result looks like this:

+ +

{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}

+ +

Notice how the "div span" selector still matches the {{HTMLElement("span")}} element, even though the baseElement excludes the {{domxref("div")}} element which is part of the specified selector.

+ +

The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement.

+ +

More examples

+ +

See {{domxref("Document.querySelector()")}} for additional examples of the proper format for the selectors.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}{{Spec2('DOM4')}} 
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 2')}} 
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}{{Spec2('Selectors API Level 1')}} 
+ +

Browser compatibility

+ +

{{ CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(1)}}12{{CompatGeckoDesktop(1.9.1)}}9[1][2]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] querySelector() is supported in IE8, but only for CSS 2.1 selectors.
+ [2] in IE8 and iE9 document must be in HTML5 mode (HTML5 doctype declaration present)

+ +

See also

+ + diff --git a/files/pl/web/api/element/removeattribute/index.html b/files/pl/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..9f3c2c4892 --- /dev/null +++ b/files/pl/web/api/element/removeattribute/index.html @@ -0,0 +1,36 @@ +--- +title: element.removeAttribute +slug: Web/API/Element/removeAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttribute +--- +

{{ ApiRef() }}

+

Podsumowanie

+

removeAttribute usuwa atrybut bieżącego elementu.

+

Składnia

+
element.removeAttribute(nazwaAtrybutu)
+
+ +

Przykład

+
// <div align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// teraz: <div width="200px">
+
+

Uwagi

+

Aby usunąć atrybut, powinieneś używać metody removeAttribute, a nie ustawiać wartość atrybutu na null za pomocą setAttribute.

+

Próba usunięcia nieistniejącego atrybutu elementu nie wyrzuca wyjątku.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: removeAttribute (wprowadzono w DOM Level 1 Core)

+
+  
+

{{ languages( { "en": "en/DOM/element.removeAttribute", "fr": "fr/DOM/element.removeAttribute", "ja": "ja/DOM/element.removeAttribute" } ) }}

diff --git a/files/pl/web/api/element/removeattributenode/index.html b/files/pl/web/api/element/removeattributenode/index.html new file mode 100644 index 0000000000..82872fa822 --- /dev/null +++ b/files/pl/web/api/element/removeattributenode/index.html @@ -0,0 +1,37 @@ +--- +title: element.removeAttributeNode +slug: Web/API/Element/removeAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttributeNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

removeAttributeNode usuwa określony atrybut z bieżącego elementu.

+

Składnia

+
usuniętyAtr =element.removeAttributeNode(węzełAtrybutu)
+
+ +

Przykład

+
// <div id="top" align="center" />
+var d = document.getElementById("top");
+var d_align = d.getAttributeNode("align");
+d.removeAttributeNode(d_align);
+// align ma wartość domyślną - center,
+// więc usunięty atrybut jest od razu zastępowany:
+// <div id="top" align="center" />
+
+

Uwagi

+

Jeśli usuwany atrybut ma wartość domyślną, od razu zostanie nią zastąpiony. Zastępujący atrybut ma - jeśli mają tu one zastosowanie - taki sam URI przestrzeni nazw, nazwę lokalną oraz prefiks jak oryginalny węzeł.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: removeAttributeNode (wprowadzono w DOM Level 1 Core)

+
+  
+

{{ languages( { "en": "en/DOM/element.removeAttributeNode", "fr": "fr/DOM/element.removeAttributeNode", "ja": "ja/DOM/element.removeAttributeNode" } ) }}

diff --git a/files/pl/web/api/element/removeattributens/index.html b/files/pl/web/api/element/removeattributens/index.html new file mode 100644 index 0000000000..88df27e6ca --- /dev/null +++ b/files/pl/web/api/element/removeattributens/index.html @@ -0,0 +1,35 @@ +--- +title: element.removeAttributeNS +slug: Web/API/Element/removeAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/removeAttributeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

removeAttributeNS usuwa określony atrybut elementu.

+

Składnia

+
element.removeAttributeNS(przestrzeńNazw,nazwaAtrybutu);
+
+ +

Przykład

+
// <div id="div1" xmlns:special="http://www.mozilla.org/ns/specialspace"
+//      special:specialAlign="utterleft" width="200px" />
+d = document.getElementById("div1");
+d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign");
+// teraz: <div id="div1" width="200px" />
+
+

Uwagi

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: removeAttributeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.removeAttributeNS", "fr": "fr/DOM/element.removeAttributeNS", "ja": "ja/DOM/element.removeAttributeNS" } ) }}

diff --git a/files/pl/web/api/element/removechild/index.html b/files/pl/web/api/element/removechild/index.html new file mode 100644 index 0000000000..c07c36ab3b --- /dev/null +++ b/files/pl/web/api/element/removechild/index.html @@ -0,0 +1,36 @@ +--- +title: element.removeChild +slug: Web/API/Element/removeChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/removeChild +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Metoda removeChild usuwa węzeł potomny elementu.

+

Składnia

+
stareDziecko =element.removeChild(dziecko)
+
+

Parametry

+ +

Przykład

+
// <div id="nadrzedny" align="center">
+//   <div id="zagniezdzony"></div>
+// </div>
+d = document.getElementById("nadrzedny");
+d_zagniezdzony = document.getElementById("zagniezdzony");
+usuwany_wezel = d.removeChild(d_zagniezdzony);
+
+

 

+

Specyfikacja

+

removeChild

+
+  
+

{{ languages( { "en": "en/DOM/element.removeChild", "fr": "fr/DOM/element.removeChild", "ja": "ja/DOM/element.removeChild" } ) }}

diff --git a/files/pl/web/api/element/replacechild/index.html b/files/pl/web/api/element/replacechild/index.html new file mode 100644 index 0000000000..dcb5686d44 --- /dev/null +++ b/files/pl/web/api/element/replacechild/index.html @@ -0,0 +1,53 @@ +--- +title: element.replaceChild +slug: Web/API/Element/replaceChild +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/replaceChild +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Zastępuje dziecko węzła innym węzłem.

+

Składnia

+
węzełZastąpiony =węzełRodzic.replaceChild(noweDziecko,stareDziecko);
+
+ +

Przykład

+
// <div>
+//  <span id="childSpan">foo bar</span>
+// </div>
+
+// utwórz węzeł pustego elementu
+// bez ID, atrybutów i zawartości
+var sp1 = document.createElement("span");
+
+// nadaj mu ID 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// utwórz jakąś zawartość dla nowego elementu
+var sp1_content = document.createTextNode("Nowy element span.");
+
+// wstaw tę zawartość
+sp1.appendChild(sp1_content);
+
+// stwórz referencję do istniejącego węzła, który ma zostać zastąpiony
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// zastąp istniejący węzeł sp2 elementem span sp1
+parentDiv.replaceChild(sp1, sp2);
+
+
+

Specyfikacja

+

DOM Level 1 Core: replaceChild

+

DOM Level 2 Core: replaceChild

+
+  
+

{{ languages( { "en": "en/DOM/element.replaceChild", "fr": "fr/DOM/element.replaceChild", "ja": "ja/DOM/element.replaceChild" } ) }}

diff --git a/files/pl/web/api/element/scrollleft/index.html b/files/pl/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..e6c526c23b --- /dev/null +++ b/files/pl/web/api/element/scrollleft/index.html @@ -0,0 +1,58 @@ +--- +title: element.scrollLeft +slug: Web/API/Element/scrollLeft +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/scrollLeft +--- +

{{ ApiRef() }}

+

Podsumowanie

+

scrollLeft pobiera bądź ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu. Kierunek przewijania odbywa się w lewo.

+

Składnia i wartości

+
// Pobierz wartość przewinięcia w pikselach
+var sLeft = element.scrollLeft;
+
+

sLeft jest wartością liczbową reprezentującą ilość pikseli, o które element został przewinięty w lewo.

+
// Ustaw wartość przewinięcia w pikselach
+element.scrollLeft = 10;
+
+

scrollLeft może przyjąć dowolną wartość liczbową, jednakże:

+ +

Przykład

+
<script type="text/javascript">
+
+function doScrollLeft(el, p)
+{
+  el.scrollLeft = p;
+}
+
+</script>
+
+<div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+>
+<script type="text/javascript">
+for (var i=0; i<100; ++i){
+  document.write(i + '-FooBar-FooBar-FooBar<br>');
+}
+</script>
+</div>
+<br>
+<input type="button" value="Scroll left 50"
+       onclick="doScrollLeft(document.getElementById('aDiv'), 50);"
+>
+
+

Specyfikacja

+

To nie jest żadna część specyfikacji W3C.

+

Powiązania

+

MSDN scrollLeft

+
+  
+

{{ languages( { "en": "en/DOM/element.scrollLeft", "fr": "fr/DOM/element.scrollLeft" } ) }}

diff --git a/files/pl/web/api/element/scrolltop/index.html b/files/pl/web/api/element/scrolltop/index.html new file mode 100644 index 0000000000..a79c23d9ff --- /dev/null +++ b/files/pl/web/api/element/scrolltop/index.html @@ -0,0 +1,70 @@ +--- +title: element.scrollTop +slug: Web/API/Element/scrollTop +translation_of: Web/API/Element/scrollTop +--- +

{{APIRef}}

+ +

scrollTop pobiera bądź ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu.

+ +

Składnia i wartości

+ +
// Pobierz wartość przewinięcia w pikselach
+var  intElemScrollTop = element.scrollTop;
+
+ +

intElemScrollTop jest liczbą całkowitą reprezentującą ilość pikseli, o które element został przewinięty w górę.

+ +
// Ustaw wartość przewinięcia w pikselach
+element.scrollTop = intValue;
+
+ +

scrollTop może przyjąć dowolną wartość liczbową, jednakże:

+ + + +

Opis

+ +

Element scrollTop jest miarą odległości od góry elementu do najwyższej krawędzi jego widzialnej zawartości.

+ +

Kiedy zawartość elementu nie powoduje powstania pionowego paska przewijania, wartość scrollTop jest domyślnie ustawiona na 0.

+ +

Przykład

+ +
+
+

padding-top

+ +

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

+ +

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

+ +

Cat image and text coming from www.best-cat-art.com

+ +

padding-bottom

+
+LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}
+ +

Image:scrollTop.png

+ +

Nie mamy interaktywnej demonstracji jak ma to miejsce w dokumentacji Gecko DOM.

+ +

Specyfikacja

+ +

scrollTop jest częścią obiektowego modelu MSIE. scrollTop nie jest częścią żadnej specyfikacji W3C lub rekomendacji technicznej.

+ +

Uwagi

+ +

scrollTop jest własnością obiektowego modelu DHTML (Dynamic HyperText Markup Language), który po raz pierwszy został wprowadzony przez MSIE. Własność ta jest zdefiniowana jako odległość do górnej krawędzi widoku elementu przewijanego.

+ +

Dokumentacja

+ + diff --git a/files/pl/web/api/element/scrollwidth/index.html b/files/pl/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..42cb1a96f1 --- /dev/null +++ b/files/pl/web/api/element/scrollwidth/index.html @@ -0,0 +1,32 @@ +--- +title: element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/scrollWidth +--- +

{{ ApiRef() }}

+

Podsumowanie

+

scrollWidth jest własnością tylko do odczytu, która zwraca szerokość zawartości elementu w pikselach lub szerokość samego elementu - w zależności od tego, która z tych wartości jest większa.

+

Składnia i wartości

+
var xScrollWidth = element.scrollWidth;
+
+

xScrollWidth jest szerokością zawartości elementu element w pikselach.

+

Przykład

+
<div id="aDiv"
+     style="width: 100px; height: 200px; overflow: auto;"
+>-FooBar-FooBar-FooBar</div>
+<br>
+<input type="button" value="Show scrollWidth"
+       onclick="alert(document.getElementById('aDiv').scrollWidth);">
+
+

Specyfikacja

+

Nie ma specyfikacji W3C dla scrollWidth.

+

Dokumentacja

+

MSDN scrollWidth reference

+
+  
+

{{ languages( { "en": "en/DOM/element.scrollWidth", "fr": "fr/DOM/element.scrollWidth" } ) }}

diff --git a/files/pl/web/api/element/setattribute/index.html b/files/pl/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..79f649526e --- /dev/null +++ b/files/pl/web/api/element/setattribute/index.html @@ -0,0 +1,34 @@ +--- +title: element.setAttribute +slug: Web/API/Element/setAttribute +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttribute +--- +

{{ ApiRef() }}

+

Podsumowanie

+

setAttribute dodaje nowy lub zmienia wartość atrybutu w bieżącym elemencie.

+

Składnia

+
element.setAttribute(nazwa,wartość)
+
+

Parametry

+ +

Przykład

+
d = document.getElementById("d1");
+d.setAttribute("align", "center");
+
+

Uwagi

+

Jeśli istnieje już atrybut o danej nazwie, jego wartość zostaje zmieniona na wartość podaną w wywołaniu setAttribute. Jeśli nie istnieje taki atrybut, zostanie on utworzony.

+

Pomimo, że getAttribute zwraca null jeśli atrybut nie istnieje, do usuwania atrybutów powinieneś używać metody removeAttribute, a nie element.setAttribute(attr, null).

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: setAttribute (wprowadzono w DOM Level 1 Core)

+
+  
+

{{ languages( { "en": "en/DOM/element.setAttribute", "fr": "fr/DOM/element.setAttribute", "ja": "ja/DOM/element.setAttribute" } ) }}

diff --git a/files/pl/web/api/element/setattributenode/index.html b/files/pl/web/api/element/setattributenode/index.html new file mode 100644 index 0000000000..dbf836f80c --- /dev/null +++ b/files/pl/web/api/element/setattributenode/index.html @@ -0,0 +1,40 @@ +--- +title: element.setAttributeNode +slug: Web/API/Element/setAttributeNode +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNode +--- +

{{ ApiRef() }}

+

Podsumowanie

+

setAttributeNode dodaje do elementu nowy węzeł typu Attr.

+

Składnia

+
zastąpionyAtr = element.setAttributeNode(atrybut)
+
+

Parametry

+ +

Przykład

+
// <div id="raz" align="left">raz</div>
+// <div id="dwa">dwa</div>
+d1 = document.getElementById("raz");
+d2 = document.getElementById("dwa");
+a = d1.getAttributeNode("align");
+d2.setAttributeNode(a);
+alert(d2.attributes[1].value)
+// wypisze: "left"
+
+

Uwagi

+

Jeżeli istnieje już atrybut o danej nazwie, zostanie on zastąpiony nowym atrybutem i zwrócony jako wynik funkcji.

+

Tej metody używa się rzadko - do zmiany atrybutów elementu zwykle wykorzystywana jest metoda setAttribute.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: setAttributeNode (wprowadzono w DOM Level 1 Core

+
+  
+

{{ languages( { "en": "en/DOM/element.setAttributeNode", "fr": "fr/DOM/element.setAttributeNode", "ja": "ja/DOM/element.setAttributeNode" } ) }}

diff --git a/files/pl/web/api/element/setattributenodens/index.html b/files/pl/web/api/element/setattributenodens/index.html new file mode 100644 index 0000000000..5633d0367e --- /dev/null +++ b/files/pl/web/api/element/setattributenodens/index.html @@ -0,0 +1,41 @@ +--- +title: element.setAttributeNodeNS +slug: Web/API/Element/setAttributeNodeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNodeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

setAttributeNodeNS dodaje nowy węzeł atrybutu z określoną nazwą i przestrzenią nazw.

+

Składnia

+
replacedAttr = element.setAttributeNodeNS(namespace,attributeNode)
+
+ +

Przykład

+
// <div id="one" special-align="utterleft">one</div>
+// <div id="two">two</div>
+
+var myns = "http://www.mozilla.org/ns/specialspace";
+var d1 = document.getElementById("one");
+var d2 = document.getElementById("two");
+var a = d1.getAttributeNodeNS(myns, "special-align");
+var d2.setAttributeNodeNS(myns, a);
+
+alert(d2.attributes[1].value) // zwraca: `utterleft'
+
+

Uwagi

+

Jeśli określony atrybut istnieje dla elementu, to jest on zastępowany nowym i zwracany.

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: setAttributeNodeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.setAttributeNodeNS", "fr": "fr/DOM/element.setAttributeNodeNS", "ja": "ja/DOM/element.setAttributeNodeNS" } ) }}

diff --git a/files/pl/web/api/element/setattributens/index.html b/files/pl/web/api/element/setattributens/index.html new file mode 100644 index 0000000000..c721111e36 --- /dev/null +++ b/files/pl/web/api/element/setattributens/index.html @@ -0,0 +1,33 @@ +--- +title: element.setAttributeNS +slug: Web/API/Element/setAttributeNS +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/setAttributeNS +--- +

{{ ApiRef() }}

+

Podsumowanie

+

setAttributeNS dodaje nowy lub zmienia wartość istniejącego atrybutu o podanej nazwie i przestrzeni nazw.

+

Składnia

+
element.setAttributeNS(przestrzeńNazw,nazwa,wartość)
+
+ +

Przykład

+
var d = document.getElementById("d1");
+d.setAttributeNS("http://www.mozilla.org/ns/specialspace", "align", "center");
+
+

Uwagi

+

{{ DOMAttributeMethods() }}

+

Specyfikacja

+

DOM Level 2 Core: setAttributeNS

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.setAttributeNS", "fr": "fr/DOM/element.setAttributeNS", "ja": "ja/DOM/element.setAttributeNS" } ) }}

diff --git a/files/pl/web/api/element/style/index.html b/files/pl/web/api/element/style/index.html new file mode 100644 index 0000000000..4736774e83 --- /dev/null +++ b/files/pl/web/api/element/style/index.html @@ -0,0 +1,52 @@ +--- +title: element.style +slug: Web/API/Element/style +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/ElementCSSInlineStyle/style +--- +

{{ ApiRef("DOM") }}

+ +

Podsumowanie

+ +

Zwraca obiekt reprezentujący atrybut style elementu.

+ +

Przykład

+ +
var div = document.getElementById("div1");
+div.style.marginTop = ".25in";
+
+ +

Uwagi

+ +

Ponieważ własność style reprezentuje atrybut style, który ma najwyższy priorytet w kaskadzie CSS, własność ta jest użyteczna by ustawić styl określonego elementu. Nie przyda się jednak do sprawdzania stylu elementu, ponieważ zależy ona tylko od atrybutu style, a nie od reguł stylów określonych gdziekolwiek indziej. Możesz użyć window.getComputedStyle, by sprawdzić styl elementu.

+ +

Zobacz listę własności CSS dostępnych w DOM, gdzie znajdziesz też dodatkowe uwagi o zastosowaniu własności style.

+ +

Ogólnie rzecz biorąc, lepiej jest użyć własność style zamiast elt.setAttribute('style', '...'), ponieważ użycie style nie nadpisze innych własności CSS, które mogły być wcześniej określone atrybutem style.

+ +

Styli nie można ustawiać poprzez przekazywania łańcucha znaków do atrybutu style (tylko odczyt), np. elt.style = "color: blue;". Jest to niemożliwe ponieważ atrybut stylu zwraca obiekt CSSStyleDeclaration . Zamiast tego, możesz ustawić poszczególne własności atrybutu style w ten sposób:

+ +
elt.style.color = "blue";  // Directly
+
+var st = elt.style;
+st.color = "blue";  // Indirectly
+
+ +

Poniższy kod wyświetli nazwy wszystkich własności stylu, wartości ustawione dla elementu elt oraz dziedziczone 'przeliczone'' wartości:

+ +
var elt = document.getElementById("elementIdHere");
+var out = "";
+var st = elt.style;
+var cs = window.getComputedStyle(z, null);
+for (x in st)
+  out += "  " + x + " = '" + st[x] + "' > '" + cs[x] + "'\n";
+
+ +

Specyfikacja

+ +

DOM Level 2 Style: ElementCSSInlineStyle.style

diff --git a/files/pl/web/api/element/tabindex/index.html b/files/pl/web/api/element/tabindex/index.html new file mode 100644 index 0000000000..d8fdd6ce7d --- /dev/null +++ b/files/pl/web/api/element/tabindex/index.html @@ -0,0 +1,31 @@ +--- +title: element.tabIndex +slug: Web/API/Element/tabIndex +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLOrForeignElement/tabIndex +--- +
+ {{APIRef}}
+
+  
+
+ Podsumowanie
+

Pobiera/ustawia kolejność tabulacji dla bieżącego elementu.

+

Składnia

+
element.tabIndex = indeks
+
+ +

Przykład

+
var b1 = document.getElementById("button1");
+
+b1.tabIndex = 1;
+

Specyfikacja

+ diff --git a/files/pl/web/api/element/tagname/index.html b/files/pl/web/api/element/tagname/index.html new file mode 100644 index 0000000000..61972df98c --- /dev/null +++ b/files/pl/web/api/element/tagname/index.html @@ -0,0 +1,37 @@ +--- +title: element.tagName +slug: Web/API/Element/tagName +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Element/tagName +--- +

{{ ApiRef() }}

+

Podsumowanie

+

tagName zwraca nazwę elementu.

+

Składnia

+
nazwaElementu = element.tagName
+
+ +

Przykład

+

Dane są takie znaczniki:

+
<span id="born">Kiedy przyszedłem na świat...</span>
+
+

i taki skrypt:

+
var span = document.getElementById("born");
+alert(span.tagName);
+
+

W XHTML-u (lub innym formacie XML) wyświetlone zostanie "span", a w HTML - "SPAN".

+

Uwagi

+

W XML-u tagName zachowuje wielkość liter. W HTML-u tagName zwraca nazwę elementu w formie kanonicznej - wielkimi literami. Wartość tagName jest taka sama jak wartość nodeName.

+

Specyfikacja

+

tagName

+

 

+

 

+
+  
+

{{ languages( { "en": "en/DOM/element.tagName", "es": "es/DOM/element.tagName", "fr": "fr/DOM/element.tagName", "ja": "ja/DOM/element.tagName" } ) }}

diff --git a/files/pl/web/api/element/textcontent/index.html b/files/pl/web/api/element/textcontent/index.html new file mode 100644 index 0000000000..f667ea2889 --- /dev/null +++ b/files/pl/web/api/element/textcontent/index.html @@ -0,0 +1,41 @@ +--- +title: element.textContent +slug: Web/API/Element/textContent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/Node/textContent +--- +

{{ ApiRef() }}

+

Podsumowanie

+

Pobiera lub ustawia zawartość tekstową węzła i jego potomków.

+

Składnia

+
tekst = element.textContent
+element.textContent = "przykładowy tekst"
+
+

Przykład

+
// Dany jest taki fragment w HTML:
+//   <div id="divA">To jest <span>jakiś</span> tekst</div>
+
+// Pobierz zawartość tekstową:
+var tekst = document.getElementById("divA").textContent;
+// |tekst| zawiera: "To jest jakiś tekst".
+
+// Ustaw zawartość:
+document.getElementById("divA").textContent = "To jest jakiś tekst";
+// teraz HTML elementu divA to <div id="divA">To jest jakiś tekst</div>
+
+

Uwagi

+ +

Specyfikacja

+

textContent

+
+  
+

{{ languages( { "en": "en/DOM/element.textContent", "fr": "fr/DOM/element.textContent", "it": "it/DOM/element.textContent" } ) }}

-- cgit v1.2.3-54-g00ecf