diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pl/web/api/element | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/pl/web/api/element')
71 files changed, 4353 insertions, 0 deletions
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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <code>addEventListener</code> pozwala zarejestrować obserwatora zdarzeń dla określonego typu zdarzenia na elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>target</em>.addEventListener(<em>type</em>, <em>listener</em>, <em>useCapture</em>); +</pre> +<dl> + <dt> + type </dt> + <dd> + Łańcuch przedstawiający typ zdarzenia do nasłuchu.<span class="comment">Need a link here</span></dd> + <dt> + listener </dt> + <dd> + Obiekt, który otrzymuje zawiadomienie, gdy nastąpi zdarzenie określonego typu. Musi być zaimplementowanym obiektem interfejsu <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener"><code>EventListener</code></a> lub pojedynczą <a href="/pl/Przewodnik_po_języku_JavaScript_1.5#Funkcje" title="pl/Przewodnik_po_języku_JavaScript_1.5#Funkcje">funkcją</a> JavaScript.</dd> + <dt> + useCapture </dt> + <dd> + Jeśli zostanie ustawione na <code>true</code>, <code>useCapture</code> wskazuje, że użytkownik chce przechwytywać zdarzenia. Po rozpoczęciu przechwytywania, wszystkie zdarzenia typu <code>type</code> będą przekazywane do naszego <code>listener</code>'a zanim zostaną wysłane do innych obiektów nasłuchujących (<code>EventTarget</code>) znajdujących się poniżej w drzewie DOM. Zdarzenia, które propagują w górę drzewa nie uruchamiają systemu nasłuchującego (<code>listener</code>) ustawionego na przechwytywanie.</dd> +</dl> +<p>Dla uzyskania szczegółowego objaśnienia zobacz <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre> <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> +</pre> +<p>W powyższym przykładzie, funkcja <code>modifyText()</code> została zarejestrowana za pomocą <code>addEventListener()</code> do obsługi zdarzenia typu <code>click</code> na tabeli <code>t</code>. Kliknięcie w dowolnym miejscu tej tabeli rozpocznie propagowanie zdarzenia i wywoła funkcję <code>modifyText()</code>.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<h4 id="Po_co_u.C5.BCywa.C4.87_addEventListener.3F" name="Po_co_u.C5.BCywa.C4.87_addEventListener.3F">Po co używać <code>addEventListener</code>?</h4> +<p><code>addEventListener</code> daje możliwość zarejestrowania obsługi zdarzenia według specyfikacji W3C DOM. Korzyści są następujące:</p> +<ul> + <li>Pozwala na dodanie więcej niż jednego obiektu obsługującego zdarzenie. Jest to szczególnie użyteczne przy bibliotekach <a href="/pl/DHTML" title="pl/DHTML">DHTML</a> czy <a href="/pl/Rozszerzenia" title="pl/Rozszerzenia">rozszerzeniach Mozilli</a>, które pracują, gdy uruchomione są inne biblioteki i rozszerzenia,</li> + <li>Daje większą kontrolę nad etapem aktywacji obiektu nasłuchującego <code>listener</code> (przechwytywanie vs. propagowanie),</li> + <li>Działa dla każdego elementu z DOM, a nie tylko dla elementów HTML.</li> +</ul> +<p>Alternatywne, starsze sposoby rejestracji zdarzeń są <a href="#Starsze_sposoby_do.C5.82.C4.85czania_zdarze.C5.84">opisane poniżej</a>.</p> +<h4 id="Dodawanie_nas.C5.82uchu_podczas_obs.C5.82ugi_zdarzenia" name="Dodawanie_nas.C5.82uchu_podczas_obs.C5.82ugi_zdarzenia">Dodawanie nasłuchu podczas obsługi zdarzenia</h4> +<p>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ń(<code>Event flow</code>), np. w fazie propagowania zdarzenia w górę drzewa DOM.</p> +<h4 id="Identyczne_obiekty_nas.C5.82uchuj.C4.85ce" name="Identyczne_obiekty_nas.C5.82uchuj.C4.85ce">Identyczne obiekty nasłuchujące</h4> +<p>Jeśli kilka identycznych obiektów nasłuchujących zostanie zarejestrowanych dla tego samego zdarzenia (<code>EventTarget</code>) 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 <code><a href="/pl/DOM/element.removeEventListener" title="pl/DOM/element.removeEventListener">removeEventListener</a></code>, ponieważ są one usuwane automatycznie.</p> +<h4 id="Warto.C5.9B.C4.87_this" name="Warto.C5.9B.C4.87_this">Wartość <code>this</code></h4> +<p>Doczepianie akcji używając <code>addEventListener()</code> zmienia wartość <code>this</code>—zauważ, że wartość <code>this</code> ijest przekazywana funkcji przez zdarzenie.</p> +<p>W powyższym przykładzie, wartość <code>this</code> wewnątrz <code>modifyText()</code> 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:</p> +<pre><table id="t" onclick="modifyText();"> + ... +</table> +</pre> +<p>to wartość <code>this</code> wewnątrz funkcji <code>modifyText()</code> wywołanej z poziomu zdarzenia onclick będzie odwołaniem od obiektu globalnego(window).</p> +<h4 id="Internet_Explorer" name="Internet_Explorer">Internet Explorer</h4> +<p>W IE 8 i niższych należy użyć <code>attachEvent</code> zamiast standardowego <code>addEventListener</code>. By wspierać IE, powyższy przykład może zostać zmodyfikowany do:</p> +<pre>if (el.addEventListener){ + el.addEventListener('click', modifyText, false); +} else if (el.attachEvent){ + el.attachEvent('onclick', modifyText); +} +</pre> +<h4 id="Starsze_sposoby_do.C5.82.C4.85czania_zdarze.C5.84" name="Starsze_sposoby_do.C5.82.C4.85czania_zdarze.C5.84">Starsze sposoby dołączania zdarzeń</h4> +<p><code>addEventListener()</code> zostało wprowadzone wraz ze specyfikacją DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. Wcześniej, zdarzenia były dołączone jak pokazano poniżej:</p> +<pre>// Using a function reference—note lack of '()' +el.onclick = modifyText; + +// Używając deklaracji funkcji +element.onclick = function(){ + // ... logika funkcji ... + }; +</pre> +<p>Ta metoda zastępuje istniejącą obsługę zdarzenia <code>onclick</code> na elemencie jeśli jest jakakolwiek. Podobnie do innych zdarzeń 'on' takich jak <code>onblur</code>, <code>onkeypress</code>, i tak dalej.</p> +<p>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 <code>addEventListener()</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-addEventListener">DOM Level 2 Events: addEventListener</a></p> +<p>{{ languages( { "en": "en/DOM/element.addEventListener", "fr": "fr/DOM/element.addEventListener", "ja": "ja/DOM/element.addEventListener" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Metoda <code>Node.appendChild()</code> 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.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>var dziecko = element</em>.appendChild(<em>dziecko</em>) +</pre> + +<ul> + <li><code>element</code> jest rodzicem elementu.</li> + <li><code>dziecko</code> jest węzłem.</li> +</ul> + +<h3 id="Opis">Opis</h3> + +<p>Metoda <code>appendChild</code> zwraca referencję do dodanego węzła. </p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>// Tworzy nowy element paragrafu +var p = document.createElement("p"); + +// Wstawia go na koniec ciała dokumentu +document.body.appendChild(p); +</pre> + +<p> </p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><code>appendChild</code> 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 <em>stwórz-i-wstaw</em>, podstawowego przy programowym budowaniu strony. Inne związane z tym metody to <a href="/pl/DOM/element.insertBefore" title="pl/DOM/element.insertBefore">insertBefore</a>, <a href="/pl/DOM/element.replaceChild" title="pl/DOM/element.replaceChild">replaceChild</a> i <a href="/pl/DOM/element.removeChild" title="pl/DOM/element.removeChild">removeChild</a>.</p> + +<p>Jeśli <code>dziecko</code> jest referencją do węzła, który istnieje już w dokumencie, <code>appendChild</code> 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).</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-184E7107">DOM Level 2 Core: appendChild</a></p> + +<p>{{ languages( { "en": "en/DOM/element.appendChild", "fr": "fr/DOM/element.appendChild", "ja": "ja/DOM/element.appendChild" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><strong>attributes</strong> zwraca <em>kolekcję</em> atrybutów określonych dla danego elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>kolekcjaAtrybutów</var> = elementNodeReference.attributes; +</pre> +<p>Typem zwracanego obiektu kolekcji jest <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1780488922">NamedNodeMap</a>. Jeśli element nie ma określonych żadnych atrybutów, zwrócony obiekt ma zerową długość. Właściwość <code>attributes</code> jest tylko do odczytu.</p> +<p><var>kolekcjaAtrybutów</var> to referencja do kolekcji atrybutów.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// weź pierwszy element <p> z dokumentu +var para = document.getElementsByTagName("p")[0]; +var atts = para.attributes; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zwracany obiekt ma typ <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1780488922">NamedNodeMap</a>, nazywany także <em>kolekcją</em>, 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":</p> +<pre><!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> +</pre> +<p>Obiekt z atrybutami jest <em>kolekcją</em>, która podobna jest do tablicy, ponieważ ma właściwość <code>length</code>, a do atrybutów można odnosić się poprzez indeks liczbowy, ale kolekcja nie posiada specjalnych metod, jakie mają tablice, jak <code>join</code>, <code>split</code>, itd.</p> +<p>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 <code>attributes</code>.</p> +<p>By uzyskać dostęp do konkretnego atrybutu, użyj metody <a href="/pl/DOM/element.getAttribute" title="pl/DOM/element.getAttribute">getAttribute</a> lub zapisu z użyciem kropki:</p> +<pre> // pokaż id elementu, jeśli element go posiada + if(element.id) + { + alert("id elementu to " + element.id); + } + else + { + alert("element nie ma id"); + }; +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-84CF096">W3C DOM Level 2 Core: attributes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-84CF096">W3C DOM Level 3 Core: attributes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1780488922">W3C DOM Level 3 NamedNodeMap interface</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.attributes", "fr": "fr/DOM/element.attributes", "ja": "ja/DOM/element.attributes", "zh-cn": "cn/DOM/element.attributes" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>blur</b> dezaktywuje bieżący element (usuwa focus).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.blur() +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-28216144">blur</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.blur", "fr": "fr/DOM/element.blur" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>childNodes </b> zwraca kolekcję węzłów-dzieci elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>listaWęzłów</var> = referencjaDoWęzłaElementu.childNodes; +</pre> +<p><var>listaWęzłów</var> to uporządkowana kolekcja obiektów węzłów, będącymi dziećmi bieżącego elementu. Jeśli element nie ma dzieci, <var>listaWęzłów</var> jest pusta.</p> +<p><var>listaWęzłów</var> to zmienna przechowująca listę węzłów. Lista taka ma typ <a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">NodeList</a>. Właściwość <code>childNodes</code> jest tylko do odczytu.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// 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 + }; + }; +</pre> +<pre>// 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); + }; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>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. <code>referencjaDoWęzłaElementu.childNodes{{ mediawiki.external(1) }}.nodeName</code> by pobrać nazwę).</p> +<p>Obiekt <code>document</code> ma dwoje dzieci: deklarację DOCTYPE i element <code>HTML</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1451460987">W3C DOM 2 Core: childNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1451460987">W3C DOM 3 Core: childNodes</a></li> + <li><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-536297177">W3C DOM 3 NodeList interface</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.childNodes", "fr": "fr/DOM/element.childNodes", "ja": "ja/DOM/element.childNodes", "zh-cn": "cn/DOM/element.childNodes" } ) }}</p> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Element.classList</strong></code> jest właściwością tylko do odczytu, która zwraca zbiór live {{domxref("DOMTokenList")}} atrybutów klasy danego elementu.</p> + +<p>Używanie <code>classList</code> stanowi wygodną alternatywę uzyskiwania dostępu do listy klas danego elementu w formie skompresowanego stringa poprzez {{domxref("element.className")}}.</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox">const <var>elementClasses</var> = elementNodeReference.classList; +</pre> + +<p><em>elementClasses</em> to <a href="/en-US/docs/DOM/DOMTokenList">DOMTokenList</a> reprezentujący atrybuty klasy <em>elementNodeReference</em>. Jeśli atrybut klasy nie został określony lub jest pusty, <em>elementClasses.length</em> zwraca 0. Sam w sobie <code>element.classList</code> jest tylko do odczytu, ale można go mimo to modyfikować poprzez stosowanie metod <code>add()</code> i <code>remove()</code>.</p> + +<h2 id="Metody">Metody</h2> + +<dl> + <dt>add( String [, String] )</dt> + <dd>Nadaje określone wartości klasy. Jeśli wartości te już istnieją w atrybucie elementu, wówczas zostają zignorowane.</dd> + <dt>remove( String [,String] )</dt> + <dd>Usuwa określone wartości klasy.</dd> + <dt><strong>item</strong> ( Number )</dt> + <dd>Zwraca wartosć klasy wg indeksu w zbiorze.</dd> + <dt><strong>toggle</strong> ( String [, force] )</dt> + <dd>Jeśli występuje tylko jeden argument: Przełącza wartość klasy, tzn. jeśli klasa istnieje, wówczas <u>zostaje usunięta</u> i zwraca <code>false</code>, jeśli nie, wówczas <u>dodaje ją</u> i zwraca <code>true</code>.<br> + 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.</dd> + <dt>contains( String )</dt> + <dd>Sprawdza, czy określona wartość klasy istnieje w atrybucie klasy danego elementu.</dd> +</dl> + +<h2 id="Przykłady">Przykłady</h2> + +<pre class="brush: js">// 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, <code>i</code> 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");</pre> + +<div class="note"> +<p>Wersje Firefoxa wcześniejsze niż 26 nie implementują użycia niektórych argumentów metod dodaj/usuń/przełącz (add/remove/toggle). Zobacz <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814014">https://bugzilla.mozilla.org/show_bug.cgi?id=814014</a></p> +</div> + +<h2 id="Polyfill">Polyfill</h2> + +<pre class="brush:js">// Ź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; + } +})(); +</pre> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specifikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.</td> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Zgodność podstawowa</td> + <td>8</td> + <td>12</td> + <td>{{CompatGeckoDesktop(1.9.2)}}</td> + <td>10<sup>[1]</sup></td> + <td>11.50</td> + <td>5.1</td> + </tr> + <tr> + <td><code>toggle()</code> method's second argument</td> + <td>24</td> + <td>12</td> + <td>{{CompatGeckoDesktop(24)}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>15</td> + <td>7</td> + </tr> + <tr> + <td>Multiple arguments for <code>add()</code> & <code>remove()</code></td> + <td>28</td> + <td>12</td> + <td>{{CompatGeckoDesktop(26)}}</td> + <td>{{CompatNo}}</td> + <td>15</td> + <td>7</td> + </tr> + <tr> + <td><code>replace()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("49")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Cecha</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Wsparcie podstawowe</td> + <td>3.0</td> + <td>12</td> + <td>{{CompatGeckoMobile(1.9.2)}}</td> + <td>10<sup>[1]</sup></td> + <td>11.10</td> + <td>5.0</td> + </tr> + <tr> + <td>toggle method's second argument</td> + <td>4.4</td> + <td>12</td> + <td>{{CompatGeckoMobile(24)}}</td> + <td>{{CompatNo}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>7.0</td> + </tr> + <tr> + <td>multiple arguments for <code>add()</code> & <code>remove()</code></td> + <td>4.4</td> + <td>12</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>7.0</td> + </tr> + <tr> + <td><code>replace()</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop("49")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Brak wsparcia dla elementów SVG. Zobacz <a href="https://connect.microsoft.com/IE/feedback/details/1046039/classlist-not-working-on-svg-elements">raport w tej kwestii na stronie Microsoftu</a>.<br> + [2] Internet Explorer nigdy tego nie zimplementował. Zobacz <a href="https://connect.microsoft.com/IE/feedback/details/878564/element-classlist-toggle-does-not-support-second-parameter">raport w tej kwestii na stronie Microsoftu</a>.</p> + +<h2 id="Zobacz_również">Zobacz również</h2> + +<ul> + <li>{{domxref("element.className")}}</li> + <li>{{domxref("DOMTokenList")}}</li> +</ul> 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 +--- +<div> + {{APIRef}}</div> +<div> + </div> +<div> + <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Podsumowanie</span></div> +<p><strong>className </strong> pobiera/ustawia wartość atrybutu <code>class</code> bieżącego elementu.</p> +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> +<pre class="syntaxbox">var <var>nazwaKlasy</var> = referencjaDoWęzłaElementu.className; +referencjaDoWęzłaElementu.className = <var>nazwaKlasy</var>; +</pre> +<ul> + <li><var>nazwaKlasy</var> to łańcuch znaków reprezentujący klasę lub rozdzieloną spacjami listę klas bieżącego elementu.</li> +</ul> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:js">var elementNodeReference = document.getElementById("div1"); + +if (elementNodeReference.className == "fixed") { + // pomiń elementy określonej klasy + goNextElement(); +};</pre> +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> +<p>Dla tej właściwości użyto nazwy <code>className</code>, a nie <code>class</code>, ponieważ "class" jest w wielu językach korzystających z DOM słowem kluczowym.</p> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-95362176">DOM Level 2 HTML: className</a></li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <code>click</code> wywołuje kliknięcie na bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.click() +</pre> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Metoda <code>click</code> 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ń".</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-2651361">click</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.click", "fr": "fr/DOM/element.click" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca wewnętrzną wysokość elementu w pikselach, włączając marginesy wewnętrzne ( + <i> + padding</i> + ), ale bez poziomego paska przewijania, obramowań i marginesów zewnętrznych ( + <i> + margin</i> + ).</p> +<p><code>clientHeight</code> można wyliczyć jako (właśność <code>height</code> CSS) + (<code>padding</code> w CSS) - (wysokość poziomego paska przewijania (jeśli jest)).</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>h</var> = <var>element</var>.clientHeight; +</pre> +<p><var>h</var> to liczba całkowita reprezentująca <code>clientHeight</code> <var>element</var>u w pikselach.</p> +<p><code>clientHeight</code> jest tylko do odczytu.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> + <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> + <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + <p>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.</p> + <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/" rel="freelink">http://www.best-cat-art.com/</a></p> + <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> + </div> + <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -20px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span></div> +<p style="margin-top: 270px;"><img alt="Grafika:clientHeight.png"></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do żadnej ze specyfikacji W3C.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>clientHeight</code> jest niestandardową właściwością, wprowadzoną w modelu obiektowym przeglądarki Internet Explorer.</p> +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientheight.asp?frame=true">MSDN clientHeight definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientHeight.html">Gecko DOM Reference on clientHeight</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.clientHeight", "fr": "fr/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>cloneNode</b> zwraca kopię bieżącego węzła.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">kopiaWęzła = element.cloneNode(<i>głębokość</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>głębokość</code> jest wartością logiczną, oznaczającą, czy kopiowanie ma być głębokie czy nie (zob. uwagi poniżej)</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>p = document.getElementById("para1"); +p_prime = p.cloneNode(true); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Kopia węzła zwrócona przez <b>cloneNode()</b> 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 <code>Text</code>.</p> +<p>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 <code>Text</code>) .</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://w3.org/TR/DOM-Level-2-Core/core.html#ID-3A0ED0A4">DOM Level 2 Core: cloneNode</a></p> +<div class="noinclude"> + </div> +<p>{{ 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" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>clientWidth</b> to wewnętrzna szerokość elementu w pikselach. Zawiera margines wewnętrzny ( + <i> + padding</i> + ), ale pomija pionowy pasek przewijania (jeśli jest obecny lub renderowany), obramowania i margines zewnętrzny ( + <i> + margin</i> + ).</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>w</var> = <var>element</var>.clientWidth; +</pre> +<p><var>w</var> to liczba całkowita odpowiadająca <b>clientWidth</b> <var>element</var>u w pikselach. <b>clientWidth</b> jest tylko do odczytu.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> + <div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> + <p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + <p>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.</p> + <p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + <p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + <p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> + </div> + <span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -24px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span><span class="comment">{{ 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') }}</span></div> +<p style="margin-top: 270px;"><img alt="Image:clientWidth.png"></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie należy do żadnej ze specyfikacji W3C.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><b>clientWidth</b> został wprowadzony w modelu obiektowym DHTML przeglądarki Internet Explorer.</p> +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/clientwidth.asp?frame=true">MSDN clientWidth definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/clientWidth.html">Gecko DOM Reference on clientWidth</a></li> +</ul> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.clientWidth", "fr": "fr/DOM/element.clientWidth" } ) }}</p> 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 +--- +<div> + {{ApiRef}}</div> +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Atrybut <strong>dir</strong> ustawia lub pobiera kierunek pisania tekstu dla zawartości bieżącego elementu.</p> +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> +<pre class="syntaxbox">var <var>bieżącyKierunekPisania</var> = elementNodeReference.dir; +elementNodeReference.dir = <var>nowyKierunekPisania</var>; +</pre> +<p><var>bieżącyKierunekPisania</var> jest łańcuchem reprezentującym kierunek pisania tekstu bieżącego elementu. <var>nowyKierunekPisania</var> to zmienna łańcuchowa, której wartość reprezentuje kierunek pisania tekstu.</p> +<p>Możliwe wartości <strong>dir</strong> to <code>ltr</code> dla "od lewej do prawej" i <code>rtl</code> dla "od prawej do lewej".</p> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:js">var parg = document.getElementById("para1"); + +parg.dir = "rtl"; +// zmienia kierunek tekstu w paragrafie "para1" +</pre> +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> +<p>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 <em>rtl</em>.</p> +<p>Obrazek może mieć atrybut <em>dir</em> ustawiony na <em>rtl</em>. W takim wypadku atrybuty <em>title</em> i <em>alt</em> będą sformatowane i wyświetlona jako <em>rtl</em>.</p> +<p>Jeśli tabela ma kierunek <em>rtl</em>, kolumny porządkowane są od prawej do lewej.</p> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52460740">W3C DOM Level 2 HTML: dir</a></li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Wywołuje zdarzenie w bieżącym elemencie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>bool</em> = <em>element</em>.dispatchEvent(<em>event</em>) +</pre> + +<ul> + <li><code>event</code> to <a href="pl/DOM/event">obiekt zdarzenia</a>, które ma zostać wywołane.</li> + <li>Jeśli któraś z funkcji obsługujących to zdarzenie wywoła <a href="pl/DOM/event.preventDefault">preventDefault</a>, zwracana wartość to <code>false</code>. W przeciwnym przypadku zwracane jest <code>true</code>.</li> +</ul> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Jak pokazuje powyższy przykład, <code>dispatchEvent</code> 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.</p> + +<p>Zdarzenie może zostać utworzone przy użyciu metody <a href="pl/DOM/document.createEvent">document.createEvent</a> i zainicjowane za pomocą <a href="pl/DOM/event.initEvent">initEvent</a> lub innej, bardziej wyspecjalizowanej metody, jak <a href="pl/DOM/event.initMouseEvent">initMouseEvent</a> albo <a href="pl/DOM/event.initUIEvent">initUIEvent</a>.</p> + +<p>Zobacz też dokumentację <a href="pl/DOM/event">obiektu event</a>.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget-dispatchEvent">DOM Level 2 Events: dispatchEvent</a></p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/element.dispatchEvent", "es": "es/DOM/element.dispatchEvent", "fr": "fr/DOM/element.dispatchEvent", "ja": "ja/DOM/element.dispatchEvent" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><strong>firstChild</strong> 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.</p> + +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> + +<pre class="notranslate">var elt = element.firstChild; +</pre> + +<p><var>elt</var> to referencja do pierwszego dziecka elementu, jeśli jest takie - w przeciwnym razie jest to null.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<p>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> + +<pre class="notranslate"><p id="para-01"> + <span>Pierwszy span</span> +</p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> + +<p>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.</p> + +<p>Kolejny węzeł #text jest wstawiany między zamykającymi znacznikami </span> i </p></p> + +<p>Jeśli usunie się białe znaki ze źródła, nie zostaną wstawione węzły tekstowe, a element <code>span</code> stanie się pierwszym dzieckiem paragrafu.</p> + +<pre class="notranslate"><p id="para-01"><span>Pierwszy span</span></p> + +<script type="text/javascript"> + var p01 = document.getElementById('para-01'); + alert(p01.firstChild.nodeName) +</script> +</pre> + +<p>Teraz alert wyświetli 'SPAN'.</p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>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:</p> + +<pre class="notranslate"><!-- 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> +</pre> + +<h4 id="W.C4.99z.C5.82y_bezdzietne" name="W.C4.99z.C5.82y_bezdzietne">Węzły bezdzietne</h4> + +<p>Własność zwraca <code>null</code>, jeśli bieżący węzeł jest bezdzietny.</p> + +<h4 id="Bia.C5.82e_znaki_i_w.C4.99z.C5.82y_dzieci" name="Bia.C5.82e_znaki_i_w.C4.99z.C5.82y_dzieci">Białe znaki i węzły dzieci</h4> + +<p>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.</p> + +<p>Ponieważ węzły #text nie są elementami HTML, białe znaki są tam wstawiane.</p> + +<p><a class="external" href="http://www.w3.org/DOM/faq.html#emptytext">W3C DOM 3 FAQ: Why are some Text nodes empty?</a></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-firstChild">DOM Level 1 Core: firstChild</a></p> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-169727388">DOM Level 2 Core: firstChild</a></p> + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/element.firstChild", "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "zh-cn": "cn/DOM/element.firstChild" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>focus</b> aktywuje bieżący element (ustawia focus).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.focus() +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Wywołanie metody <b>focus()</b> jest równoważne z zaznaczeniem elementu przez użytkownika.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-32130014">focus </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.focus", "fr": "fr/DOM/element.focus" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>getAttribute zwraca wartość atrybutu o podanej nazwie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>atrybut</em> = element.getAttribute(<em>nazwaAtrybutu</em>) +</pre> + +<ul> + <li><code><em>atrybut</em></code> to ciąg zawierający wartość atrybutu o nazwie <code><em>nazwaAtrybutu</em> </code></li> + <li><code><em>nazwaAtrybutu</em></code> jest nazwą atrybutu, który chcesz pobrać</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>var div1 = document.getElementById("div1"); +var a = div1.getAttribute("align"); +alert(a); // pokaże wartość atrybutu "align" dla elementu o id="div1" +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>W zasadzie wszystkie przeglądarki (Firefox, Internet Explorer, nowsze wersje Opery, Safari, Konqueror oraz iCab) zwracają <code>null</code>, 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 <a href="/DOM/element.hasAttribute">hasAttribute</a> aby sprawdzić istnienie atrybutu zanim wywołasz <code>getAttribute</code>.</p> + +<p><code>nazwaAtrybutu</code> jest zazwyczaj zależna od wielkości liter, jednak nie w przypadku elementów HTML - wtedy wielkość liter nie ma znaczenia.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-666EE0F9">DOM Level 2 Core: getAttribute</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-getAttribute">DOM Level 1 Core</a>)</p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/element.getAttribute", "fr": "fr/DOM/element.getAttribute", "ja": "ja/DOM/element.getAttribute" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca określony atrybut elementu jako węzeł typu <code>Attr</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>węzełAtrybutu</i> = element.getAttributeNode(<i>nazwaAtrybutu</i>) +</pre> +<ul> + <li><code>nazwaAtrybutu</code> jest ciągiem zawierającym nazwę atrybutu</li> + <li><code>węzełAtrybutu</code> jest osobnym węzłem typu <code>Attr</code></li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// html: <div id="top" /> +t = document.getElementById("top"); +iNode = t.getAttributeNode("id"); +// iNode.value = "top" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Interfejs węzła <code>Attr</code> dziedziczy ze wspólnego interfejsu węzłów <code>Node</code>, ale węzły atrybutów nie stanowią części drzewa dokumentu. Wpólne atrybuty wszystkich węzłów, takie jak <a href="pl/DOM/element.parentNode">parentNode</a>, <a href="pl/DOM/element.previousSibling">previousSibling</a> i <a href="pl/DOM/element.nextSibling">nextSibling</a> mają w przypadku węzłów <code>Attr</code> wartość <code>null</code>.</p> +<p>Do elementu, do którego należy atrybut, możesz odnosić się wykorzystując właściwość <code>ownerElement</code>.</p> +<p>Do pobrania wartości atrybutu używa się raczej metody <a href="pl/DOM/element.getAttribute">getAttribute</a> niż <code>getAttributeNode</code>.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-217A91B8">getAttributeNode </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.getAttributeNode", "fr": "fr/DOM/element.getAttributeNode", "ja": "ja/DOM/element.getAttributeNode" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca węzeł <code>Attr</code> dla atrybutu z daną przestrzenią nazw i nazwą.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>attributeNode</em> = element.getAttributeNodeNS(<em>namespace</em>,<em>nodeName</em>) +</pre> + +<ul> + <li><code>attributeNode</code> jest węzłem określonego atrybutu.</li> + <li><code>namespace</code> jest łańcuchem znaków określającym przestrzeń nazw atrybutu.</li> + <li><code>nodeName</code> jest łańcuchem znaków określającym nazwę atrybutu.</li> +</ul> + +<p><span class="comment">== Przykład == TBD The example needs to be fixed pre> // html: <div id="top" /> t = document.getElementById("top"); specialNode = t.getAttributeNodeNS( "<a class="external" href="http://www.mozilla.org/ns/specialspace" rel="freelink">http://www.mozilla.org/ns/specialspace</a>", "id"); // iNode.value = "full-top" </pre</span></p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><code>getAttributeNodeNS</code> is more specific than <a href="pl/DOM/element.getAttributeNode">getAttributeNode</a> in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is <a href="pl/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</p> + +<p>{{ DOMAttributeMethods() }}</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAtNodeNS">DOM Level 2 Core: getAttributeNodeNS</a></p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>getAttributeNS</code> zwraca ciąg z wartością atrybutu o podanej nazwie i przestrzeni nazw. Jeśli nie ma atrybutu o takiego atrybutu, zwrócone zostanie <code>null</code> bądź <code>""</code> (pust ciąg) - zob. {{ Anch("Uwagi") }}.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>wartośćAtr</i> =<i>element</i>.getAttributeNS(<i>przestrzeńNazw</i>,<i>nazwa</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code> + <i> + wartośćAtr</i> + </code> to ciąg z wartością podanego atrybutu</li> + <li><code> + <i> + przestrzeńNazw</i> + </code> to przestrzeń nazw atrybutu</li> + <li><code> + <i> + nazwa</i> + </code> to nazwa atrybutu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">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 +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>getAttributeNS</code> różni się od <a href="pl/DOM/element.getAttribute">getAttribute</a> 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".</p> +<p>W zasadzie wszystkie przeglądarki (Firefox, Internet Explorer, nowsze wersje Opery, Safari, Konqueror oraz iCab) zwracają <code>null</code>, 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 <a href="pl/DOM/element.hasAttributeNS">hasAttributeNS</a> aby sprawdzić istnienie atrybutu zanim wywołasz <code>getAttributeNS</code>.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElGetAttrNS">DOM Level 2 Core: getAttributeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.getAttributeNS", "fr": "fr/DOM/element.getAttributeNS", "ja": "ja/DOM/element.getAttributeNS" } ) }}</p> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>Metoda <code><strong>Element.getBoundingClientRect()</strong></code> zwraca rozmiar oraz położenie elementu względem okna widoku (viewport).</p> + +<h2 id="Składnia">Składnia</h2> + +<pre class="syntaxbox"><var>rectObject</var> = <var>object</var>.getBoundingClientRect(); +</pre> + +<h3 id="Wynik">Wynik</h3> + +<p>Zwrócony jest obiekt <a href="/en-US/docs/XPCOM_Interface_Reference/nsIDOMClientRect">DOMRect</a>, wyznaczony z tablicy prostokątów zwróconych przez metodę <code><a href="/en-US/docs/DOM/element.getClientRects">getClientRects()</a></code>, zastosowaną do danego elementu, czyli wyznaczony ze wszystkich pudełek CSS związanych z danym elementem.</p> + +<p>Zwrócony obiekt <code>DOMRect</code> posiada następujące (tylko do odczytu) właściwości: <code>left</code>, <code>top</code>, <code>right</code> and <code>bottom,</code> opisujące parametry otaczającego element pudełka w pikselach. Właściwości <code>top</code> and <code>left</code> oznaczają odległość od górnego-lewego rogu aktualnego okna widoku.</p> + +<div class="note"> +<p><strong>Uwaga:</strong> {{Gecko("1.9.1")}} dodało właściwości <code>width</code> and <code>height</code> do obiektu <code>DOMRect</code>.</p> +</div> + +<p>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 <code>top</code> oraz <code>left </code>dotyczą pierwszego pudełka CSS (w porządku kontekstowym) który zawiera dany element<code>.</code></p> + +<p>Efekt przewijania (scrolling) okna widoku (lub dowolnego innego przewijalnego elementu) jest uwzględniany podczas wyznaczania otaczającego pudełka. Zatem, właściwości <code>top</code> oraz <code>left</code> 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 <code>top </code>oraz <code>left </code>dodać aktualne pozycje przesuwania (scrolling position) (można je uzyskać za pomocą <code>window.scrollX</code> and <code>window.scrollY</code>).</p> + +<p>Skrypty wymagające zgodności z różnymi przeglądarkami mogą korzystać z metod <code>window.pageXOffset</code> oraz <code>window.pageYOffset</code> zamiast <code>window.scrollX</code> oraz <code>window.scrollY.</code> Skrypty które nie mają dostępu do <code>window.pageXOffset</code>, <code>window.pageYOffset</code>, <code>window.scrollX</code> ani <code>window.scrollY</code> mogą stosować następujący kod :</p> + +<pre class="brush:js">// 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 +</pre> + +<h2 id="Przykład">Przykład</h2> + +<pre class="brush:js">// rect jest obiektem DOMRect z sześcioma własnościami: left, top, right, bottom, width, height +var rect = obj.getBoundingClientRect(); +</pre> + +<h2 id="Specyfikacja">Specyfikacja</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Status</th> + <th scope="col">Komentarz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSSOM View", "#the-getclientrects()-and-getboundingclientrect()-methods", "Element.getBoundingClientRect()")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td>definicja początkowa</td> + </tr> + </tbody> +</table> + +<h3 id="Uwagi">Uwagi</h3> + +<p><code>Metoda getBoundingClientRect()</code> została wprowadzona po raz pierwszy w modelu MS IE DHTML.</p> + +<p>Wynik metody <code>getBoundingClientRect()</code> jest obiektem <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">zamrożonym</a>.</p> + +<h2 id="Zgodność_z_przeglądarkami">Zgodność z przeglądarkami</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Właściwość</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Postawowe wsparcie</td> + <td>1.0<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(1.9)}}</td> + <td>4.0<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0</td> + </tr> + <tr> + <td>width/height</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Właściwość</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Postawowe wsparcie</td> + <td>2.0</td> + <td>1.0</td> + <td>{{CompatGeckoMobile(1.9)}}</td> + <td>6.0</td> + <td>{{CompatVersionUnknown}}</td> + <td>4.0</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <a href="http://www.w3.org/TR/SVG11/struct.html#UseElement">specyfikacja CSS dla elementu 'use' </a> 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ż, <a href="http://www.w3.org/TR/SVG11/struct.html#SVGElementWidthAttribute">specyfikacja CSS dla atrybutów width oraz height elementu 'svg'</a> 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 <code>getBoundingClientRect()</code> może zwrócić inny prostokąt w Chrome niż w Firefox.</p> + +<p>[2] W IE8, oraz we wcześniejszych wersjach, obiekt <code>DOMRect</code> zwrócony przez <code>getBoundingClientRect()</code> nie zawiera właściwości <code>height</code> ani <code>width</code>. Żadne dodatkowe właściwości (w tym <code>height</code> oraz <code>width</code>) nie mogą być dodane do tych obiektów <code>DOMRect</code>.</p> + +<p>Począwszy od Gecko 12.0 {{geckoRelease("12.0")}}, efekt <a href="/en-US/docs/CSS/Using_CSS_transforms">transformacji CSS</a> jest uwzględniany w algorytmie wyznaczania otaczającego pudełka (bounding rectangle).</p> + +<h2 id="Patrz_również">Patrz również</h2> + +<ul> + <li><a href="https://msdn.microsoft.com/en-us/library/ms536433%28VS.85%29.aspx?f=255&MSPPError=-2147217396">MSDN <code>getBoundingClientRect</code></a></li> + <li><a href="/en-US/docs/DOM/element.getClientRects"><code>getClientRects()</code></a></li> +</ul> 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 +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca listę elementów o danej nazwie znacznika należącej do danej przestrzeni nazw.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>elements</em> =<em>element</em>.getElementsByTagNameNS(<em>namespace</em>,<em>localName</em>) +</pre> + +<ul> + <li><code>elements</code> jest <code>NodeList</code> znalezionych elementów w kolejności ich występowania w drzewie.</li> + <li><code>element</code> jest elementem startowym. Zauważ, że tylko potomkowie tegoż elementu zawarci są w przeszukiwaniu, ale nie on sam węzeł.</li> + <li><code>namespace</code> jest przestrzenią nazw URI elementów do przeszukania (zobacz <code><a href="pl/DOM/element.namespaceURI">element.namespaceURI</a></code>).</li> + <li><code>name</code> is either the local name of elements to look for or the special value <code>"*"</code>, which matches all elements (see <code><a href="pl/DOM/element.localName">element.localName</a></code>).</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>// 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 + } +} +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><code>element.getElementsByTagNameNS</code> is similar to <a href="pl/DOM/document.getElementsByTagNameNS">document.getElementsByTagNameNS</a>, except that its search is restricted to those elements which are descendants of the specified element.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C90942">DOM Level 2 Core: Element.getElementsByTagNameNS</a></p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>hasAttribute</code> zwraca wartość logiczną oznaczającą, czy element posiada określony atrybut czy nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>wynik</i> = element.hasAttribute(<i>nazwaAtrybutu</i>) +</pre> +<ul> + <li><code>wynik</code> to rezultat sprawdzenia - <code>true</code> lub <code>false</code></li> + <li><code>nazwaAtrybutu</code> jest ciągiem znaków określającym nazwę atrybutu</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// przed ustawieniem wartości sprawdź, czy atrybut istnieje +d = document.getElementById("div1"); +if(d.hasAttribute("align")){ + d.setAttribute("align", "center"); +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttr">DOM Level 2 Core: hasAttribute</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.hasAttribute", "fr": "fr/DOM/element.hasAttribute", "ja": "ja/DOM/element.hasAttribute" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>hasAttributeNS</code> zwraca wartość logiczną oznaczającą, czy bieżący element ma określony atrybut.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>wynik</i> =<i>element</i>.hasAttributeNS(<i>przestrzeńNazw</i>,<i>nazwaLokalna</i>) +</pre> +<ul> + <li><code>wynik</code> to wartość logiczna - <code>true</code> lub <code>false</code>.</li> + <li><code>przestrzeńNazw</code> to ciąg znaków określający przestrzeń nazw atrybutu.</li> + <li><code>nazwaLokalna</code> to nazwa atrybutu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// 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"); +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElHasAttrNS">DOM Level 2 Core: hasAttributeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.hasAttributeNS", "fr": "fr/DOM/element.hasAttributeNS", "ja": "ja/DOM/element.hasAttributeNS" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>hasAttributes</b> zwraca wartość logiczną zależnie od tego, czy element posiada jakiekolwiek atrybuty.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">[ true | false ] = element.hasAttributes +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>t1 = document.getElementById("table-data"); +if ( t1.hasAttributes ) { + // zrób coś z + // t1.attributes +} +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeHasAttrs">hasAttributes</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.hasAttributes", "fr": "fr/DOM/element.hasAttributes", "it": "it/DOM/element.hasAttributes" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>hasChildNodes</b> zwraca wartość logiczną określającą, czy element posiada dzieci czy nie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">[ true | false ] = element.hasChildNodes() +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>t1 = document.getElementById("table-data"); +if ( t1.hasChildNodes() ) { + // tabela ma dzieci } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zauważ, że składnia <code>element.hasChildNodes</code> - bez nawiasów <code>()</code> - jest nieprawidłowa. Takie użycie zawsze zwraca <code>true</code>, oznaczające, że metoda o tej nazwie jest dostępna w obiekcie. Nie daj się nabrać.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-810594187">hasChildNodes </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.hasChildNodes", "fr": "fr/DOM/element.hasChildNodes", "ja": "ja/DOM/element.hasChildNodes" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>id</b> jednoznacznie identyfikuje bieżący element.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>id_str</i> = element.id +element.id =<i>id_str</i> +</pre> +<ul> + <li><code>id_str</code> to ciąg znaków reprezentujący <code>id</code> bieżącego elementu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>if (element.id != "main_loop") + goBack(); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Nie ma ważniejszej własności w dziedzinie konstruowania stron niż + <i> + id</i> + . ID elementu jest tym, czego najczęściej używa się by go wydobyć (np. za pomocą <b><a href="pl/DOM/document.getElementById">getElementById</a></b>) i pozwala ono manipulować węzłami niezależnie od innych węzłów. W HTML-u i w XUL-u <b>id</b> definiowane jest jako atrybut tak:</p> +<pre class="eval"><td id="table-cell2" /> +</pre> +<p>Jeśli zamierzasz używać DOM na swoich stronach dobrze jest przypisać tyle atrybutów <b>id</b> ile tylko będzie potrzebne. Zauważ też, że + <i> + id</i> + używa się również by powiązać reguły stylów CSS z poszczególnymi elementami.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-63534901">id </a></p> +<p>{{ languages( { "en": "en/DOM/element.id", "fr": "fr/DOM/element.id", "ja": "ja/DOM/element.id", "zh-cn": "cn/DOM/element.id" } ) }}</p> 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 +--- +<p>{{ ApiRef}}</p> + +<p>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.</p> + +<p>Różne specyfikacje W3C mają zastosowanie do elementów:</p> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/">DOM Core Specification</a>—opisuje główne interfejsy współdzielone przez większość obiektów DOM w dokumentach HTML i XML</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/">DOM HTML Specification</a>—opisuje interfejsy dla obiektów w dokumentach HTML i XHTML tworzonych na głównej specyfikacji</li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/">DOM Events Specification</a>—opisuje zdarzenia współdzielone przez większość obiektów DOM, tworzone na głównej specyfikacji DOM i specyfikacji <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Views/">Views</a></li> +</ul> + +<p>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.</p> + +<p>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. <code>BODY</code> posiada dodatkowe funkcje i własności, podobnie tabele. W tym rozdziale omówiony jest tylko ten interfejs, jak współdzielą wszystkie elementy.</p> + +<h3 id="W.C5.82asno.C5.9Bci" name="W.C5.82asno.C5.9Bci">Własności</h3> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Nazwa</th> + <th>Opis</th> + <th>Typ</th> + <th>Dostępność</th> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.attributes" title="pl/DOM/element.attributes">attributes</a></code></td> + <td>Zwraca tablicę atrybutów elementu.</td> + <td><code><a href="/pl/DOM/NamedNodeMap" title="pl/DOM/NamedNodeMap">NamedNodeMap</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.childNodes" title="pl/DOM/element.childNodes">childNodes</a></code></td> + <td>Zwraca tablicę węzłów potomnych elementu.</td> + <td><code><a href="/pl/DOM/NodeList" title="pl/DOM/NodeList">NodeList</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.className" title="pl/DOM/element.className">className</a></code></td> + <td>Pobiera/ustawia klasę elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XUL" title="pl/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.clientHeight" title="pl/DOM/element.clientHeight">clientHeight</a></code></td> + <td>Zwraca wewnętrzną wysokość elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.clientWidth" title="pl/DOM/element.clientWidth">clientWidth</a></code></td> + <td>Zwraca wewnętrzną szerokość elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.dir" title="pl/DOM/element.dir">dir</a></code></td> + <td>Ustawia lub pobiera kierunek elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XUL" title="pl/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.firstChild" title="pl/DOM/element.firstChild">firstChild</a></code></td> + <td>Zwraca pierwsze dziecko bieżącego węzła lub <code>null</code>, jeśli ten element nie posiada węzła potomnego.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.id" title="pl/DOM/element.id">id</a></code></td> + <td>Pobiera/ustawia id elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XUL" title="pl/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.innerHTML" title="pl/DOM/element.innerHTML">innerHTML</a></code></td> + <td>Pobiera/ustawia znacznik zawartości elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.lang" title="pl/DOM/element.lang">lang</a></code></td> + <td>Określa język bazowy dla wartość atrybutów i tekstowej zawartości elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.lastChild" title="pl/DOM/element.lastChild">lastChild</a></code></td> + <td>Zwraca ostatnie dziecko bieżącego węzła elementu lub <code>null</code> jeśli ten element nie posiada węzłów potomnych.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.localName" title="pl/DOM/element.localName">localName</a></code></td> + <td>Zwraca lokalną część uściślonej nazwy węzła.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <th>Nazwa</th> + <th>Opis</th> + <th>Typ</th> + <th>Dostępność</th> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.name" title="pl/DOM/element.name">name</a></code></td> + <td>Pobiera lub ustawia atrybut <code>name</code> - dostępne nie dla wszystkich elementów.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.namespaceURI" title="pl/DOM/element.namespaceURI">namespaceURI</a></code></td> + <td>URI przestrzeni nazw węzła lub <code>null</code>, jeśli jest bliżej nieokreślony.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.nextSibling" title="pl/DOM/element.nextSibling">nextSibling</a></code></td> + <td>Węzeł bezpośrednio następny w drzewie dokumentu lub <code>null</code> jeżeli takiego nie ma.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.nodeName" title="pl/DOM/element.nodeName">nodeName</a></code></td> + <td>Nazwa węzła.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.nodeType" title="pl/DOM/element.nodeType">nodeType</a></code></td> + <td>Cyfra reprezentująca typ węzła. <code>1</code> oznacza element DOM.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.nodeValue" title="pl/DOM/element.nodeValue">nodeValue</a></code></td> + <td>Wartość węzła atrybutu, zawartość węzła tekstowego lub <code>null</code> dla elementu DOM.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetHeight" title="pl/DOM/element.offsetHeight">offsetHeight</a></code></td> + <td>Wysokość elementu, odnosząca się do układu strony.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetLeft" title="pl/DOM/element.offsetLeft">offsetLeft</a></code></td> + <td>Odległość pomiędzy lewą krawędzią elementu, a jego <code>offsetParent</code> lewej krawędzi.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetParent" title="pl/DOM/element.offsetParent">offsetParent</a></code></td> + <td>Element, od którego obliczane są wszystkie przesunięcia.</td> + <td><code><a href="/pl/DOM/element" title="pl/DOM/element">Element</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetTop" title="pl/DOM/element.offsetTop">offsetTop</a></code></td> + <td>Odległość pomiędzy górną krawędzią elementu, a jego <code>offsetParent</code> górnej krawędzi.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.offsetWidth" title="pl/DOM/element.offsetWidth">offsetWidth</a></code></td> + <td>Szerokość elementu, odnosząca się do układu strony.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.ownerDocument" title="pl/DOM/element.ownerDocument">ownerDocument</a></code></td> + <td>Dokument, którego węzeł jest w lub <code>null</code> jeśli węzeł nie znajduje się wewnątrz.</td> + <td><code><a href="/pl/DOM/document" title="pl/DOM/document">Document</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <th>Nazwa</th> + <th>Opis</th> + <th>Typ</th> + <th>Dostępność</th> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.parentNode" title="pl/DOM/element.parentNode">parentNode</a></code></td> + <td>Element nadrzędny bieżącego węzła lub <code>null</code> jeżeli węzeł nie znajduje się wewnątrz dokumentu DOM.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.prefix" title="pl/DOM/element.prefix">prefix</a></code></td> + <td>Prefiks przestrzeni nazw węzła lub <code>null</code> jeżeli nie określono prefiksa.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.previousSibling" title="pl/DOM/element.previousSibling">previousSibling</a></code></td> + <td>Węzeł bezpośrednio poprzedni w drzewie dokumentu lub <code>null</code> jeżeli takiego nie ma.</td> + <td><code><a href="/pl/DOM/Node" title="pl/DOM/Node">Node</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.scrollHeight" title="pl/DOM/element.scrollHeight">scrollHeight</a></code></td> + <td>The scroll view height of an element.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.scrollLeft" title="pl/DOM/element.scrollLeft">scrollLeft</a></code></td> + <td>Pobiera/Ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.scrollTop" title="pl/DOM/element.scrollTop">scrollTop</a></code></td> + <td>Pobiera/Ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.scrollWidth" title="pl/DOM/element.scrollWidth">scrollWidth</a></code></td> + <td>Zwraca szerokość zawartości elementu w pikselach lub szerokość samego elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.style" title="pl/DOM/element.style">style</a></code></td> + <td>Obiekt reprezentujący deklaracje stylów elementu.</td> + <td><code><a href="/pl/DOM/CSSStyleDeclaration" title="pl/DOM/CSSStyleDeclaration">CSSStyle</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a>, <a href="/pl/XUL" title="pl/XUL">XUL</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.tabIndex" title="pl/DOM/element.tabIndex">tabIndex</a></code></td> + <td>Pobiera lub ustawia pozycję elementu w kolejności przechodzenia tabulatorem.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/Number" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/Number">Number</a></code></td> + <td><small><a href="/pl/HTML" title="pl/HTML">HTML</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.tagName" title="pl/DOM/element.tagName">tagName</a></code></td> + <td>Nazwa znacznika HTML danego elementu.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + <tr> + <td><code><a href="/pl/DOM/element.textContent" title="pl/DOM/element.textContent">textContent</a></code></td> + <td>Pobiera bądź ustawia tekstową treść elementu i jego potomków.</td> + <td><code><a href="/pl/Dokumentacja_j%C4%99zyka_JavaScript_1.5/Obiekty/String" title="pl/Dokumentacja_języka_JavaScript_1.5/Obiekty/String">String</a></code></td> + <td><small><a href="/pl/DOM" title="pl/DOM">Wszystkie</a></small></td> + </tr> + </tbody> +</table> + +<p> </p> + +<dl> + <dt><a href="/pl/DOM/element.attributes" title="pl/DOM/element.attributes">attributes</a></dt> + <dd>Zwraca tablicę atrybutów elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.childNodes" title="pl/DOM/element.childNodes">childNodes</a></dt> + <dd>Zwraca tablicę węzłów potomnych elementu</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.className" title="pl/DOM/element.className">className</a></dt> + <dd>Pobiera/ustawia klasę elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.clientHeight" title="pl/DOM/element.clientHeight">clientHeight</a></dt> + <dd>Własność DHTML-a, reprezentuje wewnętrzną wysokość elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.clientLeft" title="pl/DOM/element.clientLeft">clientLeft</a></dt> + <dd>Długość od lewego obramowania elementu wyrażona w pikselach. <em>Aktualnie nie obsługiwana.</em></dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.clientTop" title="pl/DOM/element.clientTop">clientTop</a></dt> + <dd>Długość od górnego obramowania elementu wyrażona w pikselach. <em>Aktualnie nie obsługiwana.</em></dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.clientWidth" title="pl/DOM/element.clientWidth">clientWidth</a></dt> + <dd>Własność DHTML-a, reprezentuje wewnętrzną szerokość elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.dir" title="pl/DOM/element.dir">dir</a></dt> + <dd>Pobiera/ustawia kierunkowość (ang. <em>directionality</em>) elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.firstChild" title="pl/DOM/element.firstChild">firstChild</a></dt> + <dd>Zwraca pierwsze dziecko bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.id" title="pl/DOM/element.id">id</a></dt> + <dd>Pobiera/ustawia id elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.innerHTML" title="pl/DOM/element.innerHTML">innerHTML</a></dt> + <dd>innerHTML zwraca całą zawartość elementu wraz ze znacznikami.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.lang" title="pl/DOM/element.lang">lang</a></dt> + <dd>Określa język bazowy dla wartość atrybutów i tekstowej zawartości elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.lastChild" title="pl/DOM/element.lastChild">lastChild</a></dt> + <dd>Zwraca ostatnie dziecko bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.length" title="pl/DOM/element.length">length</a></dt> + <dd>Zwraca ilość elementów listy (np. childNodes).</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.localName" title="pl/DOM/element.localName">localName</a></dt> + <dd>Zwraca lokalną część uściślonej nazwy węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.name" title="pl/DOM/element.name">name</a></dt> + <dd>Pobiera lub ustawia atrybut <code>name</code> - dostępne nie dla wszystkich elementów.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.namespaceURI" title="pl/DOM/element.namespaceURI">namespaceURI</a></dt> + <dd>URI przestrzeni nazw węzła lub NULL, jeśli nie określono przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.nextSibling" title="pl/DOM/element.nextSibling">nextSibling</a></dt> + <dd>Zwraca węzeł bezpośrednio następny w drzewie dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.nodeName" title="pl/DOM/element.nodeName">nodeName</a></dt> + <dd>Zwraca nazwę biężącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.nodeType" title="pl/DOM/element.nodeType">nodeType</a></dt> + <dd>Zwraca typ bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.nodeValue" title="pl/DOM/element.nodeValue">nodeValue</a></dt> + <dd>Zwraca wartość bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetHeight" title="pl/DOM/element.offsetHeight">offsetHeight</a></dt> + <dd>offsetHeight jest własnością DHTML-a, zwracającą wysokość elementu względem układu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetLeft" title="pl/DOM/element.offsetLeft">offsetLeft</a></dt> + <dd>offsetLeft pobiera/ustawia ilość pikseli, jaka dzieli element od lewej strony wewnątrz węzła offsetParent.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetParent" title="pl/DOM/element.offsetParent">offsetParent</a></dt> + <dd>offsetParent zwraca referencję do obiektu, w którym obecny element się znajduje (tj. rodzica).</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetTop" title="pl/DOM/element.offsetTop">offsetTop</a></dt> + <dd>offsetTop zwraca pozycję obecnego elementu względem góry węzła offsetParent.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.offsetWidth" title="pl/DOM/element.offsetWidth">offsetWidth</a></dt> + <dd>offsetWidth jest własnością DHTML-a, zwracającą szerokość elementu względem układu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.ownerDocument" title="pl/DOM/element.ownerDocument">ownerDocument</a></dt> + <dd>Zwraca dokument, w którym znajduje się bieżący węzeł.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.parentNode" title="pl/DOM/element.parentNode">parentNode</a></dt> + <dd>Zwraca rodzica bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.prefix" title="pl/DOM/element.prefix">prefix</a></dt> + <dd>Zwraca prefiks przestrzeni nazw obecnego węzła bądź NULL, jeśli nie określono przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.previousSibling" title="pl/DOM/element.previousSibling">previousSibling</a></dt> + <dd>Zwraca węzeł bezpośrednio poprzedni w drzewie dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.scrollHeight" title="pl/DOM/element.scrollHeight">scrollHeight</a></dt> + <dd>Własność DHTML-a, zwraca wysokość zawartości elementu z paskiem przewijania.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.scrollLeft" title="pl/DOM/element.scrollLeft">scrollLeft</a></dt> + <dd>pobiera bądź ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu. Kierunek przewijania odbywa się w lewo.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.scrollTop" title="pl/DOM/element.scrollTop">scrollTop</a></dt> + <dd>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.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.scrollWidth" title="pl/DOM/element.scrollWidth">scrollWidth</a></dt> + <dd>Zwraca the width of the scroll view of an element.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.style" title="pl/DOM/element.style">style</a></dt> + <dd>Zwraca blok reguł stylów dla elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.tabIndex" title="pl/DOM/element.tabIndex">tabIndex</a></dt> + <dd>Pobiera/ustawia pozycję elementu w porządku tabulacji.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.tagName" title="pl/DOM/element.tagName">tagName</a></dt> + <dd>Zwraca nazwę elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.textContent" title="pl/DOM/element.textContent">textContent</a></dt> + <dd>Pobiera/ustawia zawartość tekstu elementu włączając jego potomków.</dd> +</dl> + +<h3 id="Metody" name="Metody">Metody</h3> + +<dl> + <dt><a href="/pl/DOM/element.addEventListener" title="pl/DOM/element.addEventListener">addEventListener</a></dt> + <dd>Pozwala zarejestrować obserwatora zdarzeń dla celu zdarzenia.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.appendChild" title="pl/DOM/element.appendChild">appendChild</a></dt> + <dd>Wstawia określony węzeł do listy węzłów dokumentu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.blur" title="pl/DOM/element.blur">blur</a></dt> + <dd>Dezaktywuje bieżący element.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.click" title="pl/DOM/element.click">click</a></dt> + <dd>Wywołuje kliknięcie na elemencie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.cloneNode" title="pl/DOM/element.cloneNode">cloneNode</a></dt> + <dd>Zwraca kopię bieżącego węzła.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.dispatchEvent" title="pl/DOM/element.dispatchEvent">dispatchEvent</a></dt> + <dd>Pozwala przekazać wywołania zdarzeń do modelu zdarzeń w implementacji DOM.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.focus" title="pl/DOM/element.focus">focus</a></dt> + <dd>Aktywuje bieżący element.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.getAttribute" title="pl/DOM/element.getAttribute">getAttribute</a></dt> + <dd>Zwraca wartość atrybutu o podanej nazwie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.getAttributeNS" title="pl/DOM/element.getAttributeNS">getAttributeNS</a></dt> + <dd>Zwraca wartość atrybutu o podanej nazwie i przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.getAttributeNode" title="pl/DOM/element.getAttributeNode">getAttributeNode</a></dt> + <dd>Zwraca atrybut elementu jako osobny węzeł.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.getElementsByTagName" title="pl/DOM/element.getElementsByTagName">getElementsByTagName</a></dt> + <dd>Zwraca elementy o podanej nazwie będące potomkami bieżącego elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.hasAttribute" title="pl/DOM/element.hasAttribute">hasAttribute</a></dt> + <dd>Zwraca wartość logiczną zależnie od tego, czy element posiada atrybut o podanej nazwie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.hasAttributeNS" title="pl/DOM/element.hasAttributeNS">hasAttributeNS</a></dt> + <dd>Zwraca wartość logiczną zależnie od tego, czy element posiada atrybut o podanej nazwie i przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.hasAttributes" title="pl/DOM/element.hasAttributes">hasAttributes</a></dt> + <dd>Zwraca wartość logiczną zależnie od tego, czy element posiada jakiekolwiek atrybuty.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.hasChildNodes" title="pl/DOM/element.hasChildNodes">hasChildNodes</a></dt> + <dd>Zwraca wartość logiczną zależnie od tego, czy element posiada dzieci.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.insertBefore" title="pl/DOM/element.insertBefore">insertBefore</a></dt> + <dd>Metoda pozwala wstawić węzeł przed bieżącym elementem w DOM.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.item" title="pl/DOM/element.item">item</a></dt> + <dd>Zwraca węzeł z drzewa wg podanego indeksu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.normalize" title="pl/DOM/element.normalize">normalize</a></dt> + <dd>Metoda zapisuje bieżący węzeł i całe drzewo znajdujące się wewnątrz w "znormalizowanej" formie.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.removeAttribute" title="pl/DOM/element.removeAttribute">removeAttribute</a></dt> + <dd>Usuwa atrybut elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.removeAttributeNode" title="pl/DOM/element.removeAttributeNode">removeAttributeNode</a></dt> + <dd>Usuwa określony atrybut elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.removeChild" title="pl/DOM/element.removeChild">removeChild</a></dt> + <dd>Usuwa węzeł potomny bieżącego elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.removeEventListener" title="pl/DOM/element.removeEventListener">removeEventListener</a></dt> + <dd>Pozwala usunąć obserwatora zdarzeń z celu zdarzenia.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.replaceChild" title="pl/DOM/element.replaceChild">replaceChild</a></dt> + <dd>Metoda replaceChild() zastępuje węzeł potomny bieżącego elementu innym węzłem.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.setAttribute" title="pl/DOM/element.setAttribute">setAttribute</a></dt> + <dd>Dodaje nowy atrybut bądź zmienia wartość atrybutu bieżącego elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.setAttributeNS" title="pl/DOM/element.setAttributeNS">setAttributeNS</a></dt> + <dd>Dodaje nowy atrybut bądź zmienia wartość atrybutu bieżącego elementu, wg podanej nazwy i przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.setAttributeNode" title="pl/DOM/element.setAttributeNode">setAttributeNode</a></dt> + <dd>Dodaje nowy węzeł atrybutu do bieżącego elementu.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.setAttributeNodeNS" title="pl/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a></dt> + <dd>Dodaje nowy węzeł atrybutu do bieżącego elementu wg podanej nazwy i przestrzeni nazw.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.supports" title="pl/DOM/element.supports">supports</a></dt> + <dd>Sprawdza, czy implementacja DOM pozwala na wykorzystanie konkretnej możliwości.</dd> +</dl> + +<h3 id="Uchwyty_zdarze.C5.84" name="Uchwyty_zdarze.C5.84">Uchwyty zdarzeń</h3> + +<p>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.</p> + +<p><strong>Są to właściwości odnoszące się do HTML dla atrybutów zdarzeń 'on'.</strong></p> + +<p><strong>W przeciwieństwie do odpowiadających atrybutów, wartości tych właściwość są funkcjami lub jakimkolwiek innym obiektem implementowanym przez <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener">EventListener</a> interfejs. Przypisanie atrybutu zdarzenia w HTML powoduje utworzenie funkcji opakowującej funkcji dla określonego kodu. Np. podając następujący HTML:</strong></p> + +<pre><div onclick="foo();">click me!</div> +</pre> + +<p><strong>Jeżeli <code>element</code> jest referencją do <code><div></code>, wartość <code>element.onclick</code> wynosi faktycznie:</strong></p> + +<pre>function onclick(event) { + foo(); +} +</pre> + +<p><strong>Note how the <a href="/pl/DOM/event" title="pl/DOM/event">event</a> object is passed as parameter <code>event</code> to this wrapper function.</strong></p> + +<dl> + <dt><a href="/pl/DOM/element.onblur" title="pl/DOM/element.onblur">onblur</a></dt> + <dd>Zwraca kod obsługi zdarzenia blur.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onclick" title="pl/DOM/element.onclick">onclick</a></dt> + <dd>Zwraca kod obsługi zdarzenia onclick.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.ondblclick" title="pl/DOM/element.ondblclick">ondblclick</a></dt> + <dd>Zwraca kod obsługi zdarzenia dblclick.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onfocus" title="pl/DOM/element.onfocus">onfocus</a></dt> + <dd>Zwraca kod obsługi zdarzenia focus.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onkeydown" title="pl/DOM/element.onkeydown">onkeydown</a></dt> + <dd>Zwraca kod obsługi zdarzenia keydown.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onkeypress" title="pl/DOM/element.onkeypress">onkeypress</a></dt> + <dd>Zwraca kod obsługi zdarzenia keypress.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onkeyup" title="pl/DOM/element.onkeyup">onkeyup</a></dt> + <dd>Zwraca kod obsługi zdarzenia keyup.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmousedown" title="pl/DOM/element.onmousedown">onmousedown</a></dt> + <dd>Zwraca kod obsługi zdarzenia mousedown.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmousemove" title="pl/DOM/element.onmousemove">onmousemove</a></dt> + <dd>Zwraca kod obsługi zdarzenia mousemove.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmouseout" title="pl/DOM/element.onmouseout">onmouseout</a></dt> + <dd>Zwraca kod obsługi zdarzenia mouseout.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmouseover" title="pl/DOM/element.onmouseover">onmouseover</a></dt> + <dd>Zwraca kod obsługi zdarzenia mouseover.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onmouseup" title="pl/DOM/element.onmouseup">onmouseup</a></dt> + <dd>Zwraca kod obsługi zdarzenia mouseup.</dd> +</dl> + +<dl> + <dt><a href="/pl/DOM/element.onresize" title="pl/DOM/element.onresize">onresize</a></dt> + <dd>Zwraca kod obsługi zdarzenia resize.</dd> +</dl> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p><strong>innerHTML</strong> ustawia lub pobiera zbiór zawartych w danym elemencie znaczników razem z ich treścią.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var <em>markup</em> = element.innerHTML; +element.innerHTML = <em>markup</em>; +</pre> + +<ul> + <li><code>markup</code> to ciąg znaków z zawartością elementu (w tym elementami potomnymi) jako zwykły HTML. Na przykład: <code>"<p>Jakiś tekst</p>"</code>.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>// 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 +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>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:</p> + +<pre class="eval">document.body.innerHTML = ""; // Zawartość body zostaje zastąpiona pustym ciągiem +</pre> + +<p>Własność innerHTML różnych elementów, w tym <code>BODY</code> i <code>HTML</code> może zostać pobrana czy zastąpiona. Można jej użyć, by wyświetlić źródło zmodyfikowanej dynamicznie strony:</p> + +<pre>// 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; +</pre> + +<p>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 <code>value</code> elementu <code>INPUT</code> w <code>innerHTML</code>, a przeglądarki oparte o Gecko - nie.</p> + +<p>Własności tej nigdy nie powinno się używać do zapisu części tabeli - zamiast niej należy skorzystać z metod W3C DOM. <code>innerHTML</code> można jednak użyć, by zapisać całą tabelę lub zmodyfikować zawartość pojedynczych komórek.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>{{ DOM0() }}</p> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp">MSDN innerHTML</a></p> + +<p>{{ languages( { "en": "en/DOM/element.innerHTML", "fr": "fr/DOM/element.innerHTML", "ja": "ja/DOM/element.innerHTML" } ) }}</p> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>insertAdjacentHTML()</code></strong> 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.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>element</em>.insertAdjacentHTML(<em>position</em>, <em>text</em>);</pre> + +<h3 id="Parametry">Parametry</h3> + +<dl> + <dt><code>position</code></dt> + <dd>A {{domxref("DOMString")}} reprezentuje pozycję relatywną <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">element</span></font>-u musi być must be jeden z następujących ciągów: + <ul> + <li><code style="color: red;">'beforebegin'</code>: przed <code>element</code> -em.</li> + <li><code style="color: green;">'afterbegin'</code>: W środku <code>element</code>-u przed jego pierwszym dzieckiem.</li> + <li><code style="color: blue;">'beforeend'</code>: W środku elementu po jego ostatnim dziecku.</li> + <li><code style="color: magenta;">'afterend'</code>: Po <code>element</code>-cie </li> + </ul> + </dd> + <dt><code>text</code></dt> + <dd>string analizuje HTML albo XML i włącza w drzewo.</dd> +</dl> + +<h3 id="Visualization_of_position_names">Visualization of position names</h3> + +<pre><!-- <strong><code style="color: red;">beforebegin</code></strong> --> +<code style="font-weight: bold;"><p></code> + <!-- <strong><code style="color: green;">afterbegin</code></strong> --> + foo + <!-- <strong><code style="color: blue;">beforeend</code></strong> --> +<code style="font-weight: bold;"></p></code> +<!-- <strong><code style="color: magenta;">afterend</code></strong> --></pre> + +<div class="note"><strong>Note: </strong><code>beforebegin</code> i <code>afterend</code> pozycja działa tylko jeśli node jest w drzewie DOM i ma rodzica elementu.</div> + +<h2 id="Przykład">Przykład:</h2> + +<pre class="brush: js">// <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></pre> + +<h2 id="Notes">Notes</h2> + +<h3 id="Security_considerations">Security considerations</h3> + +<p>When inserting HTML into a page by using <code>insertAdjacentHTML()</code>, be careful not to use user input that hasn't been escaped.</p> + +<p>It is not recommended you use <code>insertAdjacentHTML()</code> 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.</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}</td> + <td>{{ Spec2('DOM Parsing') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.Element.insertAdjacentHTML")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("Element.insertAdjacentText()")}}</li> + <li>{{domxref("XMLSerializer")}}: Construct a DOM representation of XML text</li> + <li><a class="external" href="https://hacks.mozilla.org/2011/11/insertadjacenthtml-enables-faster-html-snippet-injection/">hacks.mozilla.org guest post</a><span class="external"> by Henri Sivonen including benchmark showing that insertAdjacentHTML can be way faster in some cases.</span></li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Wstawia określony węzeł przed danym elementem jako dziecko aktualnego węzła.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">var <em>wstawionyElement</em> =<em>elementRodzic</em>.insertBefore(<em>nowyElement</em>,<em>danyElement</em>) +</pre> + +<p>Jeżeli <var>danyElement</var> ma wartość <code>null</code>, <var>nowyElement</var> jest wstawiany na końcu listy węzłów potomnych.</p> + +<ul> + <li><code>nowyElement</code> Węzeł do wstawienia.</li> + <li><code>danyElement</code> Węzeł przed którym <code>nowyElement</code> ma zostać wstawiony.</li> + <li><code>elementRodzic</code> Rodzic nowo wstawianego elementu.</li> + <li><code>wstawionyElement</code> Węzeł, który jest wstawiany, czyli <code>nowyElement</code>.</li> +</ul> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre> <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> +</pre> + +<p>Nie istnieje metoda <code>insertAfter</code>, jednak można ją emulować poprzez kombinację <code>insertBefore</code> oraz <code><a href="pl/DOM/element.nextSibling">nextSibling</a></code>.</p> + +<p>W powyższym przykładzie, <code>sp1</code> może zostać wstawiona za <code>sp2</code> przy użyciu:</p> + +<pre class="eval">parentDiv.insertBefore(sp1, sp2.nextSibling); +</pre> + +<p>Jeżeli <code>sp2</code> nie posiada następnego rodzeństwa i musi być ostatnim potomnym —<code>sp2.nextSibling</code> to zwróci <code>null</code> więc <code>sp1</code> będzie wstawione na końcu listy węzłów potomnych (np. natychmiast po <code>sp2</code>).</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-952280727">insertBefore</a></p> + +<p> </p> + +<div class="noinclude"> </div> + +<p>{{ languages( { "en": "en/DOM/element.insertBefore", "fr": "fr/DOM/element.insertBefore", "ja": "ja/DOM/element.insertBefore", "pt": "pt/DOM/element.insertBefore" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność ta pozwala pobrać lub ustawić język bazowy wartości atrybutów i treści elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>languageUsed</var> = elementNodeReference.lang; +elementNodeReference.lang = <var>NewLanguage</var>; +</pre> +<ul> + <li><var>languageUsed</var> to zmienna (ciąg znaków) do której przypisany zostanie aktualny język elementu.</li> + <li><var>NewLanguage</var> to zmienna której wartość będzie użyta jako nowy język elementu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// 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"; + }; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Kod języka zwracany przez w/w właściwość zgodny jest z kodami zdefiniowanymi w dokumencie <a class="external" href="http://tools.ietf.org/html/rfc1766" title="http://tools.ietf.org/html/rfc1766">RFC 1766</a>. Przykładowo: "en" dla języka angielskiego, "ja" dla japońskiego, "es" dla hiszpańskiego itd. Domyślna wartość atrybutu to <code>unknown</code>. Wartość tego atrybutu ustawiana jest zwykle dla podstawowego (najwyższego) elementu dokumentu.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807">W3C DOM Level 2 HTML: lang</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.lang", "fr": "fr/DOM/element.lang", "ja": "ja/DOM/element.lang" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>lastChild</b> zwraca ostatnie dziecko węzła.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>ostatnieDziecko</i> = element.lastChild +</pre> +<p><code>ostatnieDziecko</code> to węzeł. Jeśli jego rodzicem jest element, dzieckiem jest na ogół węzeł elementu, komentarza lub węzeł tekstowy.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>tr = document.getElementById("row1"); +td_róg = tr.lastChild; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeżeli nie ma węzłów potomnych, zwracane jest <code>null</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-61AD09FB">lastChild </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.lastChild", "fr": "fr/DOM/element.lastChild", "ja": "ja/DOM/element.lastChild" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>length</b> zwraca liczbę elementów listy.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>liczbaElementów</i> = nodeList.length +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>liczbaElementów</code> to liczba całkowita reprezentująca liczbę elementów listy.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// 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 + } +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Właściwość <b>length</b> 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.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-203510337">length </a></p> +<p>{{ languages( { "en": "en/DOM/element.length", "ja": "ja/DOM/element.length" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>localName</b> zwraca lokalną część uściślonej nazwy węzła.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>nazwa</i> = element.localName +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>nazwa</code> to ciąg z lokalną nazwą węzła (zobacz {{ Anch("Uwagi") }} poniżej, aby dowiedzieć się więcej)</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>(Musi obsługiwać treść XML typu, jak <tt>text/xml</tt> lub <tt>application/xhtml+xml</tt>.)</p> +<pre class="eval"><html xmlns="<span class="nowiki">http://www.w3.org/1999/xhtml</span>" + xmlns:svg="<span class="nowiki">http://www.w3.org/2000/svg</span>"> +<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> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Dla węzłów typu innego niż <code>ELEMENT_NODE</code> i <code>ATTRIBUTE_NODE</code> oraz dla węzłów utworzonych za pomocą metod DOM Level 1, jak na przykład <code><a href="pl/DOM/document.createElement">document.createElement</a></code>, własność ta ma zawsze wartość <code>NULL</code>.</p> +<p><b>localname</b> 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.</p> +<pre><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> +</pre> +<p>Prefiks - w tym wypadku "ecomm" - określa przestrzeń nazw, w której można użyć nazwy lokalnej.</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p><a href="pl/DOM/element.namespaceURI">element.namespaceURI</a></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSLocalN">localName </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.localName", "fr": "fr/DOM/element.localName", "ja": "ja/DOM/element.localName" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><strong>name</strong> pobiera lub ustawia atrybut <code>name</code> 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.</p> +<p><strong>name</strong> można wykorzystać w metodzie <a href="/pl/DOM/document.getElementsByName" title="pl/DOM/document.getElementsByName">getElementsByName</a>, w obiekcie <a href="/pl/DOM/form" title="pl/DOM/form">form</a> i w kolekcji <a href="/pl/DOM/form.elements" title="pl/DOM/form.elements">elements</a>. Jeśli zostanie użyta dla formularza lub kolekcji elementów, właściwość tak może zwrócić jeden element lub ich kolekcję.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; +var elName = <em>HTMLElement</em>.name; + +var kontrolka = <em>HTMLFormElement</em>.<em>nazwaElementu</em>; +var kolekcjaKontrolek = <em>HTMLFormElement</em>.elements.<em>nazwaElementu</em>; +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval"><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> +</pre> +<h3 id="uwagi" name="uwagi">uwagi</h3> +<p>W przeglądarce Internet Explorer (IE) nie można modyfikować właściwości <code>name</code> obiektów DOM utworzonych za pomocą <code><a href="/pl/DOM/document.createElement" title="pl/DOM/document.createElement">createElement</a></code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Specyfikacja W3C DOM 2 HTML:</p> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> +</ul> +<p>{{ languages( { "en": "en/DOM/element.name", "ja": "ja/DOM/element.name", "fr": "fr/DOM/element.name" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca URI przestrzeni nazw tego węzła lub NULL, jeśli jej nie określono.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>przestrzeńNazw</i> = element.namespaceURI +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>przestrzeńNazw</code> to ciąg znaków reprezentujący URI przestrzeni nazw bieżącego węzła.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>W poniższym wycinku kodu sprawdzane są <code>localName</code> i <code>namespaceURI</code> węzła. Jeśli <code>namespaceURI</code> jest zgodny ze zmienną zawierającą przestrzeń nazw dla XUL, węzeł jest uznawany za widget <browser /> w języku XUL.</p> +<pre>if (node.localName == "browser" + && node.namespaceURI == kXULNSURI) { +// xul browser +this.viewee = node.webNavigation.document; +//... +} +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>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.</p> +<p>Dla węzłow typów innych niż <code>ELEMENT_NODE</code> i <code>ATTRIBUTE_NODE</code> oraz węzłów utworzonych metodami DOM Level 1, jak <a href="pl/DOM/document.createElement">document.createElement</a>, wartość tej właściwości to zawsze NULL.</p> +<p>Zgodnie ze specyfikacją <a class="external" href="http://www.w3.org/TR/REC-xml-names">Namespaces in XML</a> 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.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSname">namespaceURI</a></p> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#Namespaces-Considerations">Przestrzenie nazw XML</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.namespaceURI", "fr": "fr/DOM/element.namespaceURI", "ja": "ja/DOM/element.namespaceURI" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca węzeł znajdujący się w drzewie bezpośrednio za węzłem bieżącym.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>następnyElement</i> = element.nextSibling +</pre> +<p><code>następnyElement</code> to węzeł bezpośrednio następny w liście rodzeństwa (np. liście dzieci węzła <code>parentNode</code>). Następnym węzłem jest na ogół węzeł elementu, komentarza lub węzeł tekstowy.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><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 +**************************************************/ +</pre> +<p>Węzły tekstowe - <code>#text</code> - 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 <code>document.write</code>.</p> +<p>Poniższy przykład pokazuje, jak białe znaki wpływają na sąsiednie węzły komórek tabeli:</p> +<pre><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> +</pre> +<p><code>nextSibling</code> <code>cell1</code> to węzeł tekstowy. Między komórkami drugiego rzędu tabeli nie ma białych znaków, dlatego rodzeństwo <code>cell3</code> to tylko <code>cell4</code>. Podczas przechodzenia przez model dokumentu za pomocą <code>nextSibling</code> należy liczyć się z możliwością wystąpienia węzłów tekstowych.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zwraca <code>null</code>, kiedy nie ma już więcej węzłów.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-6AC54C2F">nextSibling </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.nextSibling", "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca nazwę węzła jako ciąg znaków.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>nazwa</i> = element.nodeName +</pre> +<p> + <i> + nazwa</i> + to ciąg znaków reprezentujący nazwę bieżącego elementu. <code>nodeName</code> to atrybut tylko do odczytu.</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Poniżej przedstawione są wartości zwracane dla różnych typów węzłów:</p> +<table class="standard-table"> + <tbody> + <tr> + <th class="header" style="text-align: center;">Interfejs</th> + <th class="header" style="text-align: center;">nodeName</th> + </tr> + <tr> + <td><a href="pl/DOM/Attr">Attr</a></td> + <td>tak samo jak <code><a href="pl/DOM/Attr.name">Attr.name</a></code></td> + </tr> + <tr> + <td><a href="pl/DOM/CDATASection">CDATASection</a></td> + <td>"#cdata-section"</td> + </tr> + <tr> + <td><a href="pl/DOM/Comment">Comment</a></td> + <td>"#comment"</td> + </tr> + <tr> + <td><a href="pl/DOM/Document">Document</a></td> + <td>"#document"</td> + </tr> + <tr> + <td><a href="pl/DOM/DocumentFragment">DocumentFragment</a></td> + <td>"#document-fragment"</td> + </tr> + <tr> + <td><a href="pl/DOM/DocumentType">DocumentType</a></td> + <td>tak samo jak <code><a href="pl/DOM/DocumentType.name">DocumentType.name</a></code></td> + </tr> + <tr> + <td><a href="pl/DOM/Element">Element</a></td> + <td>tak samo jak <code><a href="pl/DOM/element.tagName">Element.tagName</a></code></td> + </tr> + <tr> + <td><a href="pl/DOM/Entity">Entity</a></td> + <td>nazwa encji</td> + </tr> + <tr> + <td><a href="pl/DOM/EntityReference">EntityReference</a></td> + <td>nazwa refernecji do encji</td> + </tr> + <tr> + <td><a href="pl/DOM/Notation">Notation</a></td> + <td>nazwa notacji</td> + </tr> + <tr> + <td><a href="pl/DOM/ProcessingInstruction">ProcessingInstruction</a></td> + <td>tak samo jak <code><a href="pl/DOM/ProcessingInstruction.target">ProcessingInstruction.target</a></code></td> + </tr> + <tr> + <td>Text</td> + <td>"#text"</td> + </tr> + </tbody> +</table> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>Dane są poniższe znaczniki</p> +<pre><div id="d1">hello world</div> +<input type="text" id="t"/> +</pre> +<p>i taki skrypt:</p> +<pre>var div1 = document.getElementById("d1"); +var poleTekstowe = document.getElementById("t"); +poleTekstowe.value = div1.nodeName; +</pre> +<p>W XHTML-u (lub innym formacie XML) wartość pola tekstowego to "div". W HTML wartość ta to "DIV".</p> +<p>Zauważ, że można było użyć właściwości <code><a href="pl/DOM/element.tagName">tagName</a></code>, ponieważ dla elementów <code>nodeName</code> ma taką samą wartość jak <code>tagName</code>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68D095">W3C DOM Level 2 Core: nodeName</a></p> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-F68D095">W3C DOM Level 3 Core: nodeName</a></p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ 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" } ) }}</p> 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 +--- +<div> + {{ApiRef}}</div> +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Zwraca kod reprezentujący typ węzła.</p> +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> +<pre class="syntaxbox"><var>typ</var> = document.nodeType +</pre> +<p><code>typ</code> jest zmienną liczbową typu <code>unsigned short</code> o jednej z poniższych wartości:</p> +<ul> + <li>Node.ELEMENT_NODE == 1</li> + <li>Node.ATTRIBUTE_NODE == 2</li> + <li>Node.TEXT_NODE == 3</li> + <li>Node.CDATA_SECTION_NODE == 4</li> + <li>Node.ENTITY_REFERENCE_NODE == 5</li> + <li>Node.ENTITY_NODE == 6</li> + <li>Node.PROCESSING_INSTRUCTION_NODE == 7</li> + <li>Node.COMMENT_NODE == 8</li> + <li>Node.DOCUMENT_NODE == 9</li> + <li>Node.DOCUMENT_TYPE_NODE == 10</li> + <li>Node.DOCUMENT_FRAGMENT_NODE == 11</li> + <li>Node.NOTATION_NODE == 12</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>Ten przykład sprawdza czy pierwszy węzeł wewnątrz elementu document jest comment node, i jeśli nie jest, wyświetli wiadomość.</p> +<pre class="brush:js">var node = document.documentElement.firstChild; + +if(node.nodeType != Node.COMMENT_NODE) + alert("You should comment your code well!"); +</pre> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-111237558">DOM Level 2 Core: nodeType</a></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-111237558">DOM Level 3 Core: nodeType</a></li> +</ul> 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 +--- +<div> + {{APIRef}}</div> +<div> + </div> +<div> + <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Podsumowanie</span></div> +<p>Zwraca wartość bieżącego węzła.</p> +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> +<pre class="syntaxbox"><var>wartość</var> = document.nodeValue +</pre> +<p><code>wartość</code> to ciąg znaków reprezentujący wartość elementu, jeśli taka istnieje.</p> +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> +<p>Dla dokumentu <code>nodeValue</code> zwraca <code>null</code>. Dla węzłów tekstowych, komentarzy i CDATA <code>nodeValue</code> zwraca zawartość węzła. Dla węzłów atrybutów, zwracana jest wartość atrybutu.</p> +<p>Poniższa tabela przedstawia wartości zwracane dla różnych interfejsów:</p> +<table class="standard-table"> + <tbody> + <tr> + <th class="header" style="text-align: center;">Interfejs</th> + <th class="header" style="text-align: center;">nodeValue</th> + </tr> + <tr> + <td>Attr</td> + <td>wartość atrybutu</td> + </tr> + <tr> + <td>CDATASection</td> + <td>treść sekcji CDATA</td> + </tr> + <tr> + <td>Comment</td> + <td>treść komentarza</td> + </tr> + <tr> + <td>Document</td> + <td>null</td> + </tr> + <tr> + <td>DocumentFragment</td> + <td>null</td> + </tr> + <tr> + <td>DocumentType</td> + <td>null</td> + </tr> + <tr> + <td>Element</td> + <td>null</td> + </tr> + <tr> + <td>NamedNodeMap</td> + <td>null</td> + </tr> + <tr> + <td>EntityReference</td> + <td>null</td> + </tr> + <tr> + <td>Notation</td> + <td>null</td> + </tr> + <tr> + <td>ProcessingInstruction</td> + <td>cała treść, wyłączając cel</td> + </tr> + <tr> + <td>Text</td> + <td>treść węzła tekstowego</td> + </tr> + </tbody> +</table> +<p>Jeśli <code>nodeValue</code> z definicji ma wartość <code>null</code>, ustawianie tej właściwości nie będzie mieć efektu.</p> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-F68D080">nodeValue </a></li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>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.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.normalize() +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-normalize">DOM Level 2 Core: Node.normalize</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.normalize", "fr": "fr/DOM/element.normalize" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="offsetHeight" name="offsetHeight">offsetHeight</h3> + +<p>Własność DHTML (Dynamic HyperText Markup Language), która daje wysokość relatywnego elementu do układu strony.</p> + +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> + +<pre class="eval">var<em>intElemOffsetHeight</em> = document.getElementById(<em>id_attribute_value</em>).offsetHeight; +</pre> + +<p><em>intElemOffsetHeight</em>is a variable storing an integer corresponding to the offsetHeight pixel value of the element. offsetHeight is a read-only property.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Typically, an element's <strong>offsetHeight</strong> 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.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>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.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ 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') }}</span></div> + +<p style="margin-top: 270px;"><img alt="grafika:offsetHeight.png"></p> + +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> + +<p>offsetHeight is part of the MSIE's DHTML object model. offsetHeight is not part of any W3C specification or technical recommendation.</p> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>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.</p> + +<h2 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true">MSDN's Definicja offsetHeight</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/dom_el_ref18.html">Gecko DOM Reference on offsetHeight</a></li> +</ul> 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 +--- +<p>{{ ApiRef("HTML DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca ilość pikseli, jaką dzieli<em>górny lewy róg</em> bieżącego elementu od lewej strony wewnątrz węzła <code><a href="pl/DOM/element.offsetParent">offsetParent</a></code>.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>left</em> =<em>element</em>.offsetLeft; +</pre> + +<p><code>left</code> jest liczbą całkowitą reprezentująca przesunięcie od lewej strony podane w pikselach.</p> + +<h3 id="Uwaga" name="Uwaga">Uwaga</h3> + +<p><code>offsetLeft</code> 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 <strong>span</strong>) 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 <code>offsetLeft</code> 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 <code>offsetLeft, offsetTop, offsetWidth</code> and <code>offsetHeight</code> 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.)</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>var colorTable = document.getElementById("t1"); +var tOLeft = colorTable.offsetLeft; + +if (tOLeft > 5) { + // duże lewe przesunięcie: zrób coś tutaj +} +</pre> + +<h3 id="Przyk.C5.82ad_2" name="Przyk.C5.82ad_2">Przykład</h3> + +<p>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.</p> + +<p><img alt="Image:offsetLeft.jpg"></p> + +<p><small><font color="gray">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.</font></small></p> + +<pre><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> +</pre> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><code><a href="pl/DOM/element.offsetParent">offsetParent</a></code>, <code><a href="pl/DOM/element.offsetTop">offsetTop</a></code>, <code><a href="pl/DOM/element.offsetWidth">offsetWidth</a></code>, <code><a href="pl/DOM/element.offsetHeight">offsetHeight</a></code></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Niestandardowa własność.</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>offsetParent</b> zwraca referencję do obiektu, który jest najbliższym (w hierarchii zawierania się elementów) pozycjonowanym elementem. Jeżeli element nie jest pozycjonowany, <b>offsetParent</b> jest wówczas korzeń dokumentu (html w trybie zgodności ze standardami; body w trybie przybliżonym).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>parentObj</i> = element.offsetParent +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>parentObj</code> jest referencją do obiektu, względem którego przesunięty jest bieżący element.</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. + <i> + Nie jest częścią specyfikacji.</i> +</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.offsetParent", "fr": "fr/DOM/element.offsetParent" } ) }}</p> 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 +--- +<p>{{ APIRef("HTML DOM") }}</p> + +<h3 id="offsetWidth" name="offsetWidth">offsetWidth</h3> + +<p>właściwość <abbr title="Dynamic HyperText Markup Language">DHTML</abbr>, która podaje szerokość elementu, odnosząca się do układu strony.</p> + +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> + +<pre class="eval">var <em>intElemOffsetWidth</em> = document.getElementById(<em>id_attribute_value</em>).offsetWidth; +</pre> + +<p><code>intElemOffsetWidth</code> jest zmienną przechowującą liczbę całkowitą odpowiadającą wartości <strong><code>offsetWidth</code></strong> elementu i wyrażoną w pikselach. <strong><code>offsetWidth</code></strong> jest właściwością tylko do odczytu.</p> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Zazwyczaj <strong><code>offsetWidth</code></strong> elementu obejmuje jego obramowanie, wewnętrzny margines (padding), pionowy pasek przewijania (jeśli jest obecny lub renderowany) i szerokość CSS elementu.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>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.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/2210/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ 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') }}</span></div> + +<p style="margin-top: 270px;"><img alt="Image:offsetWidth.png" class="internal" src="/@api/deki/files/2468/=OffsetWidth.png"></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><span id="result_box" lang="pl"><strong><code>offsetWidth</code></strong> jest częścią modelu obiektowego MSIE <abbr title="Dynamic HyperText Markup Language">DHTML</abbr>. <strong><code>offsetWidth</code></strong> nie jest częścią żadnej specyfikacji W3C ani rekomendacji technicznej.</span></p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><strong><code>offsetWidth</code></strong> jest własnością modelu obiektowego <span id="result_box" lang="pl"><abbr title="Dynamic HyperText Markup Language">DHTML</abbr></span>, który został wprowadzony przez MSIE. Czasem określany jest jako fizyczny/graficzny wymiar elementu lub jako szerokość pudełka elementu.</p> + +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true">MSDN's offsetWidth definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> +</ul> + +<div class="noinclude"> +<h3 id="Dokumentacja" name="Dokumentacja">Zobacz również</h3> +</div> + +<ul> + <li><a href="/fr/DOM/element.offsetHeight" title="element.offsetHeight">element.offsetHeight</a></li> + <li><a href="/pl/DOM/element.clientWidth" title="element.clientWidth">element.clientWidth</a></li> + <li><a href="/cn/DOM/element.clientHeight" title="element.clientHeight">element.clientHeight</a></li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Właściwość <strong>onclick</strong> zwraca kod obsługi zdarzenia <em>onClick</em> w bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><em>element</em>.onclick = <em>refDoFunkcji</em>; +</pre> +<p>gdzie <em>refDoFunkcji</em> to nazwa funkcji zadeklarowanej gdzie indziej bądź <em>wyrażenie funkcyjne</em>. <span class="comment">Zob. <a href="/pl/Dokumentacja_języka_JavaScript_1.5/Funkcje">Funkcje</a>. - tego rodzialu jeszcze nie ma, a pod nazwa Funkcje jest cos innego</span></p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><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> +</pre> +<p>Można również użyć funkcji bezimiennej jak poniżej:</p> +<pre>p.onclick = function() { alert("moot!"); }; +</pre> +<p><span class="comment">Not going to confuse poor readers with this. You could also use a the Function constructor: <pre> p.onclick = Function( "alert('moot!')" ); </pre></span></p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie <em>click</em> jest wywoływane, kiedy użytkownik kliknie na element. Zdarzenie to występuje po <em>mousedown</em> i <em>mouseup</em>.</p> +<p>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 <a href="/pl/DOM/element.addEventListener" title="pl/DOM/element.addEventListener"> addEventListener</a> - jest bardziej elastyczna i stanowi część specyfikacji DOM Events.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<p>{{ languages( { "en": "en/DOM/element.onclick", "fr": "fr/DOM/element.onclick" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Właściwość <b>onkeypress</b> zawiera kod obsługi zdarzenia onKeyPress dla bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.onkeypress = kod obsługi zdarzenia +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie keydown wywoływane jest, gdy użytkownik naciska klawisz na klawiaturze.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Właściwość <b>onkeyup</b> zawiera kod obsługi zdarzenia <code>keyup</code> dla bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">kod obsługi zdarzenia = element.onkeyup +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie <code>keyup</code> wywoływane jest, gdy użytkownik zwalnia naciśnięty klawisz na klawiaturze.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>{{ DOM0() }}</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.onkeyup", "fr": "fr/DOM/element.onkeyup" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>onmousedown</b> zwraca kod obsługi zdarzenia onMouseDown w bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">event handling code = element.onMouseDown +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zdarzenie <code>mousedown</code> jest wywołane kiedy użytkownik naciśnie lewy przycisk.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.onmousedown", "fr": "fr/DOM/element.onmousedown" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Właściwość <strong>onmousemove</strong> zwraca kod obsługi zdarzenia <code>mousemove</code> w bieżącym elemencie.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval">event handling code = element.onMouseMove +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Zdarzenie <code>mousemove</code> jest wywoływane, kiedy użytkownik przesunie kursor myszy.</p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>DOM Level 0. Nie jest częścią specyfikacji.</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>ownerDocument</b> zwraca obiekt najwyższego poziomu - dokument, w którym znajduje się bieżący węzeł.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>dokument</i> = element.ownerDocument +</pre> +<p><code>dokument</code> to obiekt <code>document</code>, będący rodzicem bieżącego elementu.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// dla danego elementu "p" znajdź element HTML najwyższego poziomu +d = p.ownerDocument; +html = d.documentElement; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Obiekt <code>document</code> 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 <code>NULL</code></p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#node-ownerDoc">ownerDocument </a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.ownerDocument", "fr": "fr/DOM/element.ownerDocument", "ja": "ja/DOM/element.ownerDocument" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność <b>parentNode</b> zwraca rodzica bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>rodzic</i> = element.parentNode +</pre> +<p><code>rodzic</code> jest rodzicem bieżącego węzła. Rodzicem elementu jest węzeł typu <code>Element</code>, <code>Document</code> lub <code>DocumentFragment</code>.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>text_field = document.getElementById("t"); +if ( div1.parentNode == document ){ + text_field.setAttribute("value", "top-level"); + // pole tekstowe wyświetli tekst "top-level" } +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p><code>parentNode</code> zwraca <code>null</code> dla poniższych typów węzłów: <code>Attr</code>, <code>Document</code>, <code>DocumentFragment</code>, <code>Entity</code> i <code>Notation</code>.</p> +<p><code>null</code> zwracane jest także, gdy węzeł został utworzony, ale nie przypisano go jeszcze do drzewa.</p> +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> +<p>{{ Domxref("element.firstChild") }}, {{ Domxref("element.lastChild") }}, {{ Domxref("element.childNodes") }}, {{ Domxref("element.nextSibling") }}, {{ Domxref("element.previousSibling") }}.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1060184317">DOM Level 2 Core: Node.parentNode</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.parentNode", "fr": "fr/DOM/element.parentNode", "it": "it/DOM/element.parentNode", "ja": "ja/DOM/element.parentNode" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>prefix</code> zwraca prefiks przestrzeni nazw węzła lub <code>null</code>, jeśli nie określono prefiksu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>string</i> = element.prefix +element.prefix =<i>string</i> +</pre> +<h3 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h3> +<pre class="eval"><x:div onclick="alert(this.prefix)"/> +</pre> +<p>Wyświetlone zostanie "x".</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>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.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-NodeNSPrefix">Node.prefix</a> (wprowadzona w DOM2)</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.prefix", "fr": "fr/DOM/element.prefix", "it": "it/DOM/element.prefix", "ja": "ja/DOM/element.prefix" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zwraca węzeł bezpośrednio poprzedzający bieżący węzeł w drzewie.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval"><i>pNode</i> = elementNode.previousSibling +</pre> +<p><code>pNode</code> 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.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>var n1 = n2.previousSibling; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Zwraca <code>null</code>, jeśli nie ma poprzedzających węzłów.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#attribute-previousSibling">DOM Level 1 Core: previousSibling</a></p> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-640FB3C8">DOM Level 2 Core: previousSibling</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.previousSibling", "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling" } ) }}</p> 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 +--- +<div>{{APIRef("DOM")}}</div> + +<p>Returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>element</var> = <em>baseElement</em>.querySelector(<em>selector</em>s); +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>selectors</code></dt> + <dd>A group of <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors">selectors</a> to match the descendant elements of the {{domxref("Element")}} <code>baseElement</code> against; this must be valid CSS syntax, or a <code>SyntaxError</code> exception will occur. The first element found which matches this group of selectors is returned.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>The first descendant element of <code>baseElement</code> which matches the specified group of <code>selectors</code>. The entire hierarchy of elements is considered when matching, including those outside the set of elements including <code>baseElement</code> and its descendants; in other words, <code>selectors</code> is first applied to the whole document, not the <code>baseElement</code>, to generate an initial list of potential elements. The resulting elements are then examined to see if they are descendants of <code>baseElement</code>. The first match of those remaining elements is returned by the <code>querySelector()</code> method.</p> + +<p>If no matches are found, the returned value is <code>null</code>.</p> + +<h3 id="Exceptions">Exceptions</h3> + +<dl> + <dt><code>SyntaxError</code></dt> + <dd>The specified <code>selectors</code> are invalid.</dd> +</dl> + +<h2 id="Examples">Examples</h2> + +<p>Let's consider a few examples.</p> + +<h3 id="Find_a_specific_element_with_specific_values_of_an_attribute">Find a specific element with specific values of an attribute</h3> + +<p>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:</p> + +<pre class="brush:js">var el = document.body.querySelector("style[type='text/css'], style:not([type])"); +</pre> + +<h3 id="The_entire_hierarchy_counts">The entire hierarchy counts</h3> + +<p>The next example, below, demonstrates that the hierarchy of the entire document is considered when applying <code>selectors</code>, so that levels which are outside the specified <code>baseElement</code> are still considered when locating matches.</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: 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></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">var baseElement = document.querySelector("p"); +document.getElementById("output").innerHTML = + (baseElement.querySelector("div span").innerHTML);</pre> + +<h4 id="Result">Result</h4> + +<p>The result looks like this:</p> + +<p>{{ EmbedLiveSample('The_entire_hierarchy_counts', 600, 160) }}</p> + +<p>Notice how the <code>"div span"</code> selector still matches the {{HTMLElement("span")}} element, even though the <code>baseElement</code> excludes the {{domxref("div")}} element which is part of the specified selector.</p> + +<p>The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement.</p> + +<h3 id="More_examples">More examples</h3> + +<p>See {{domxref("Document.querySelector()")}} for additional examples of the proper format for the <code>selectors</code>.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll()')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll()')}}</td> + <td>{{Spec2('Selectors API Level 2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll()')}}</td> + <td>{{Spec2('Selectors API Level 1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(1)}}</td> + <td>12</td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>9<sup>[1][2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] <code>querySelector()</code> is supported in IE8, but only for CSS 2.1 selectors.<br> + [2] in IE8 and iE9 document must be in HTML5 mode (HTML5 doctype declaration present)</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("element.querySelectorAll()")}}</li> + <li>{{domxref("document.querySelector()")}}</li> + <li>{{domxref("document.querySelectorAll()")}}</li> + <li><a href="/en-US/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>removeAttribute</code> usuwa atrybut bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>element</i>.removeAttribute(<i>nazwaAtrybutu</i>) +</pre> +<ul> + <li><code>nazwaAtrybutu</code> to ciąg znaków określający nazwę atrybutu elementu + <i> + element</i> + , który to atrybut ma zostać usunięty</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <div align="left" width="200px"> +document.getElementById("div1").removeAttribute("align"); +// teraz: <div width="200px"> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Aby usunąć atrybut, powinieneś używać metody <code>removeAttribute</code>, a nie ustawiać wartość atrybutu na <code>null</code> za pomocą <a href="pl/DOM/element.setAttribute">setAttribute</a>.</p> +<p>Próba usunięcia nieistniejącego atrybutu elementu nie wyrzuca wyjątku.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-6D6AC0F9">DOM Level 2 Core: removeAttribute</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttribute">DOM Level 1 Core</a>)</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.removeAttribute", "fr": "fr/DOM/element.removeAttribute", "ja": "ja/DOM/element.removeAttribute" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>removeAttributeNode</code> usuwa określony atrybut z bieżącego elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>usuniętyAtr</i> =<i>element</i>.removeAttributeNode(<i>węzełAtrybutu</i>) +</pre> +<ul> + <li><code>węzełAtrybutu</code> to węzeł typu <code>Attr</code>, który ma zostać usunięty</li> + <li><code>removedAttr</code> to usunięty węzeł <code>Attr</code>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <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" /> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>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ł.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198">DOM Level 2 Core: removeAttributeNode</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-removeAttributeNode">DOM Level 1 Core</a>)</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.removeAttributeNode", "fr": "fr/DOM/element.removeAttributeNode", "ja": "ja/DOM/element.removeAttributeNode" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>removeAttributeNS</code> usuwa określony atrybut elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>element</i>.removeAttributeNS(<i>przestrzeńNazw</i>,<i>nazwaAtrybutu</i>); +</pre> +<ul> + <li><code>przestrzeńNazw</code> to ciąg znaków określający przestrzeń nazw atrybutu.</li> + <li><code>nazwaAtrybutu</code> to ciąg znaków z nazwą atrybutu do usunięcia.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <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" /> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElRemAtNS">DOM Level 2 Core: removeAttributeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.removeAttributeNS", "fr": "fr/DOM/element.removeAttributeNS", "ja": "ja/DOM/element.removeAttributeNS" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <b>removeChild</b> usuwa węzeł potomny elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>stareDziecko</i> =<i>element</i>.removeChild(<i>dziecko</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>dziecko</code> jest usuwanym węzłem potomnym.</li> + <li><code>element</code> jest węzłem nadrzędnym węzła <code>dziecko</code>.</li> + <li><code>stareDziecko</code> jest referencją do usuwanego węzła <code>dziecko</code>. <code>stareDziecko == dziecko.</code></li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <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); +</pre> +<p> </p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1734834066">removeChild </a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.removeChild", "fr": "fr/DOM/element.removeChild", "ja": "ja/DOM/element.removeChild" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Zastępuje dziecko węzła innym węzłem.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>węzełZastąpiony</i> =<i>węzełRodzic</i>.replaceChild(<i>noweDziecko</i>,<i>stareDziecko</i>); +</pre> +<ul> + <li><code>noweDziecko</code> to nowy węzeł, który ma zastąpić <code>stareDziecko</code>. Jeśli węzeł ten istnieje już gdzieś indziej w DOM, najpierw jest stamtąd usuwany.</li> + <li><code>stareDziecko</code> to istniejące dziecko, które ma zostać zastąpione.</li> + <li><code>węzełZastąpiony</code> to węzeł, który został zastąpiony. Jest to ten sam węzeł, co <code>stareDziecko</code>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <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); + +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-replaceChild">DOM Level 1 Core: replaceChild</a></p> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-785887307">DOM Level 2 Core: replaceChild</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.replaceChild", "fr": "fr/DOM/element.replaceChild", "ja": "ja/DOM/element.replaceChild" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>scrollLeft </b> pobiera bądź ustawia liczbę pikseli, o którą zostanie przewinięta zawartość dokumentu. Kierunek przewijania odbywa się w lewo.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">// Pobierz wartość przewinięcia w pikselach +var <var>sLeft</var> = <var>element</var>.scrollLeft; +</pre> +<p><var>sLeft</var> jest wartością liczbową reprezentującą ilość pikseli, o które <var>element</var> został przewinięty w lewo.</p> +<pre class="eval">// Ustaw wartość przewinięcia w pikselach +<var>element</var>.scrollLeft = 10; +</pre> +<p><b>scrollLeft</b> może przyjąć dowolną wartość liczbową, jednakże:</p> +<ul> + <li>Jeżeli element nie może być przewijany (nie posiada atrybutu overflow), scrollLeft jest równe 0.</li> + <li>Jeżeli ustawiana wartość jest mniejsza niż 0, scrollLeft jest równe 0.</li> + <li>Jeżeli ustawiana wartość jest większa od wartości maksymalnej, o którą zawartość dokumentu może być przewijana, scrollLeft jest równe wartości maksymalnej.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><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);" +> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>To nie jest żadna część specyfikacji W3C.</p> +<h3 id="Powi.C4.85zania" name="Powi.C4.85zania">Powiązania</h3> +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollleft.asp">MSDN scrollLeft</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.scrollLeft", "fr": "fr/DOM/element.scrollLeft" } ) }}</p> 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 +--- +<p>{{APIRef}}</p> + +<p><strong><code>scrollTop</code></strong> pobiera bądź ustawia liczbę pikseli, o którą ma zostać przewinięta w górę zawartość elementu.</p> + +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> + +<pre class="eval">// Pobierz wartość przewinięcia w pikselach +var <var> intElemScrollTop</var> = <var>element</var>.scrollTop; +</pre> + +<p><var>intElemScrollTop</var> jest liczbą całkowitą reprezentującą ilość pikseli, o które <var>element</var> został przewinięty w górę.</p> + +<pre class="eval">// Ustaw wartość przewinięcia w pikselach +<var>element</var>.scrollTop = <var>intValue</var>; +</pre> + +<p><strong><code>scrollTop</code></strong> może przyjąć dowolną wartość liczbową, jednakże:</p> + +<ul> + <li>Jeżeli element nie może być przewijany (gdy np. nie posiada własności overflow), scrollTop jest równe 0.</li> + <li>Jeżeli ustawiona wartość jest mniejsza niż 0, <code>scrollTop</code> jest równe 0.</li> + <li>Jeżeli ustawiona wartość jest większa od wartości maksymalnej, o którą zawartość elementu może być przewinięta, <code>scrollTop</code> jest równe wartości maksymalnej.</li> +</ul> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Element <strong><code>scrollTop</code></strong> jest miarą odległości od góry elementu do najwyższej krawędzi jego widzialnej zawartości.</p> + +<p>Kiedy zawartość elementu nie powoduje powstania pionowego paska przewijania, wartość <code>scrollTop</code> jest domyślnie ustawiona na 0.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>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.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ 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') }}</span></div> + +<p style="margin-top: 270px;"><img alt="Image:scrollTop.png"></p> + +<p>Nie mamy interaktywnej demonstracji jak ma to miejsce w dokumentacji Gecko DOM.</p> + +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> + +<p><code>scrollTop</code> jest częścią obiektowego modelu MSIE. <code>scrollTop</code> nie jest częścią żadnej specyfikacji W3C lub rekomendacji technicznej.</p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>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.</p> + +<h2 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrolltop.asp?frame=true">MSDN's scrollTop definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/scrollTop.html">Gecko DOM Reference on scrollTop</a></li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>scrollWidth</b> 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.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>xScrollWidth</var> = <var>element</var>.scrollWidth; +</pre> +<p><var>xScrollWidth</var> jest szerokością zawartości elementu <var>element</var> w pikselach.</p> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre><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);"> +</pre> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>Nie ma specyfikacji W3C dla <b>scrollWidth</b>.</p> +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> +<p><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/scrollwidth.asp">MSDN scrollWidth reference</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.scrollWidth", "fr": "fr/DOM/element.scrollWidth" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>setAttribute</code> dodaje nowy lub zmienia wartość atrybutu w bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.setAttribute(<i>nazwa</i>,<i>wartość</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>nazwa</code> to łańcuch znaków z nazwą nowego atrybutu,</li> + <li><code>wartość</code> to żądana wartość nowego atrybutu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>d = document.getElementById("d1"); +d.setAttribute("align", "center"); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeśli istnieje już atrybut o danej nazwie, jego wartość zostaje zmieniona na wartość podaną w wywołaniu <b>setAttribute</b>. Jeśli nie istnieje taki atrybut, zostanie on utworzony.</p> +<p>Pomimo, że <a href="pl/DOM/element.getAttribute">getAttribute</a> zwraca <code>null</code> jeśli atrybut nie istnieje, do usuwania atrybutów powinieneś używać metody <a href="pl/DOM/element.removeAttribute">removeAttribute</a>, a nie <code>element.setAttribute(attr, null)</code>.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082">DOM Level 2 Core: setAttribute</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttribute">DOM Level 1 Core</a>)</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.setAttribute", "fr": "fr/DOM/element.setAttribute", "ja": "ja/DOM/element.setAttribute" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>setAttributeNode</code> dodaje do elementu nowy węzeł typu <code>Attr</code>.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>zastąpionyAtr</i> = element.setAttributeNode(<i>atrybut</i>) +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>atrybut</code> jest węzłem typu <code>Attr</code></li> + <li><code>zastąpionyAtr</code> jest węzłem zastąpionego atrybutu - jeśli był taki - zwróconym przez tę metodę</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <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" +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeżeli istnieje już atrybut o danej nazwie, zostanie on zastąpiony nowym atrybutem i zwrócony jako wynik funkcji.</p> +<p>Tej metody używa się rzadko - do zmiany atrybutów elementu zwykle wykorzystywana jest metoda <a href="pl/DOM/element.setAttribute">setAttribute</a>.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154">DOM Level 2 Core: setAttributeNode</a> (wprowadzono w <a class="external" href="http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode">DOM Level 1 Core</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.setAttributeNode", "fr": "fr/DOM/element.setAttributeNode", "ja": "ja/DOM/element.setAttributeNode" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>setAttributeNodeNS</code> dodaje nowy węzeł atrybutu z określoną nazwą i przestrzenią nazw.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>replacedAttr</i> = element.setAttributeNodeNS(<i>namespace</i>,<i>attributeNode</i>) +</pre> +<ul> + <li><code>replacedAttr</code> jest zastąpionym węzłem atrybutu (jeśli istnieje), zwracanym przez tę funkcję.</li> + <li><code>attributeNode</code> jest węzłem <code>Attr</code>.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// <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' +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Jeśli określony atrybut istnieje dla elementu, to jest on zastępowany nowym i zwracany.</p> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAtNodeNS">DOM Level 2 Core: setAttributeNodeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.setAttributeNodeNS", "fr": "fr/DOM/element.setAttributeNodeNS", "ja": "ja/DOM/element.setAttributeNodeNS" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><code>setAttributeNS</code> dodaje nowy lub zmienia wartość istniejącego atrybutu o podanej nazwie i przestrzeni nazw.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>element</i>.setAttributeNS(<i>przestrzeńNazw</i>,<i>nazwa</i>,<i>wartość</i>) +</pre> +<ul> + <li><code>przestrzeńNazw</code> to ciąg znaków określajacy przestrzeń nazw atrybutu.</li> + <li><code>nazwa</code> to ciąg znaków określający nazwę atrybutu do ustawienia.</li> + <li><code>wartość</code> to żądana wartość atrybutu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">var d = document.getElementById("d1"); +d.setAttributeNS("<span class="nowiki">http://www.mozilla.org/ns/specialspace</span>", "align", "center"); +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>{{ DOMAttributeMethods() }}</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-ElSetAttrNS">DOM Level 2 Core: setAttributeNS</a></p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.setAttributeNS", "fr": "fr/DOM/element.setAttributeNS", "ja": "ja/DOM/element.setAttributeNS" } ) }}</p> 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 +--- +<p>{{ ApiRef("DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca obiekt reprezentujący atrybut <code>style</code> elementu.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre class="eval">var div = document.getElementById("div1"); +div.style.marginTop = ".25in"; +</pre> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p>Ponieważ własność <code>style</code> reprezentuje atrybut <code>style</code>, 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 <code>style</code>, a nie od reguł stylów określonych gdziekolwiek indziej. Możesz użyć <code><a href="/pl/DOM/window.getComputedStyle" title="pl/DOM/window.getComputedStyle">window.getComputedStyle</a></code>, by sprawdzić styl elementu.</p> + +<p>Zobacz listę <a href="/pl/DOM/CSS" title="pl/DOM/CSS">własności CSS dostępnych w DOM</a>, gdzie znajdziesz też dodatkowe uwagi o zastosowaniu własności <code>style</code>.</p> + +<p>Ogólnie rzecz biorąc, lepiej jest użyć własność <code>style </code>zamiast <code>elt.setAttribute('style', '...')</code>, ponieważ użycie <code>style</code> nie nadpisze innych własności CSS, które mogły być wcześniej określone atrybutem <code>style</code>.</p> + +<p>Styli nie można ustawiać poprzez przekazywania łańcucha znaków do atrybutu <code>style</code> (tylko odczyt), np. <code>elt.style = "color: blue;"</code>. Jest to niemożliwe ponieważ atrybut stylu zwraca obiekt <code>CSSStyleDeclaration</code> . Zamiast tego, możesz ustawić poszczególne własności atrybutu <code>style</code> w ten sposób:</p> + +<pre class="eval">elt.style.color = "blue"; // Directly + +var st = elt.style; +st.color = "blue"; // Indirectly +</pre> + +<p>Poniższy kod wyświetli nazwy wszystkich własności stylu, wartości ustawione dla elementu <code>elt</code> oraz dziedziczone 'przeliczone'' wartości:</p> + +<pre class="eval">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"; +</pre> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle">DOM Level 2 Style: ElementCSSInlineStyle.style</a></p> 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 +--- +<div> + {{APIRef}}</div> +<div> + </div> +<div> + <span style="font-size: 2.14285714285714rem; font-weight: 700; letter-spacing: -1px; line-height: 30px;">Podsumowanie</span></div> +<p>Pobiera/ustawia kolejność tabulacji dla bieżącego elementu.</p> +<h2 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h2> +<pre class="syntaxbox">element.tabIndex = <em>indeks</em> +</pre> +<ul> + <li><code>indeks</code> to liczba</li> +</ul> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:js">var b1 = document.getElementById("button1"); + +b1.tabIndex = 1;</pre> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-40676705">tabIndex </a></li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>tagName</b> zwraca nazwę elementu.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>nazwaElementu</i> = element.tagName +</pre> +<ul> + <li><code>nazwaElementu</code> to ciąg zawierający nazwę bieżącego elementu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<p>Dane są takie znaczniki:</p> +<pre class="eval"><span id="born">Kiedy przyszedłem na świat...</span> +</pre> +<p>i taki skrypt:</p> +<pre class="eval">var span = document.getElementById("born"); +alert(span.tagName); +</pre> +<p>W XHTML-u (lub innym formacie XML) wyświetlone zostanie "span", a w HTML - "SPAN".</p> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>W XML-u <code>tagName</code> zachowuje wielkość liter. W HTML-u <code>tagName</code> zwraca nazwę elementu w formie kanonicznej - wielkimi literami. Wartość <code>tagName</code> jest taka sama jak wartość <a href="pl/DOM/element.nodeName">nodeName</a>.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-104682815">tagName </a></p> +<p> </p> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.tagName", "es": "es/DOM/element.tagName", "fr": "fr/DOM/element.tagName", "ja": "ja/DOM/element.tagName" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Pobiera lub ustawia zawartość tekstową węzła i jego potomków.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>tekst</i> = element.textContent +element.textContent = "przykładowy tekst" +</pre> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre class="eval">// 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> +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<ul> + <li><code>textContent</code> zwraca <code>null</code> jeśli węzeł to dokument, węzeł <code>DocumentType</code> lub <code>Notation</code></li> + <li>Jeśli węzeł to sekcja CDATA, komentarz, instrukcja przetwarzania lub węzeł tekstowy, <code>textContent</code> zwraca tekst wewnątrz tego węzła (<a href="pl/DOM/element.nodeValue">nodeValue</a>).</li> + <li>Dla innych typów węzłow <code>textContent</code> zwraca połączenie wartości <code>textContent</code> każdego dziecka, wyłączając węzły komentarzy i instrukcji przetwarzania. Jeśli element nie ma dzieci, jest to pusty ciąg.</li> + <li>Ustawianie tej właściwości dla węzła usuwa wszystkie jego dzieci i zastępuje je jednym węzłem tekstowym o zadanej wartości.</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#Node3-textContent">textContent</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.textContent", "fr": "fr/DOM/element.textContent", "it": "it/DOM/element.textContent" } ) }}</p> |