JavaScript - DOM Document

Właściwości Document

właściwość	opis
`activeElement`	Zwraca aktualnie używany element w dokumencie.
`characterSet`	Zwraca kodowanie znaków dokumentu.
`domain`	Zwraca nazwę domeny serwera.
`lastModified`	Zwraca datę i godzinę ostatniej modyfikacji dokumentu.
`title`	Zwraca tytuł dokumentu.
`URL`	Zwraca adres URL dokumentu HTML.

activeElement


<body onclick="myFunction()">



<p>Kliknij w input albo button aby wyświetlić aktywny element:</p>

<input type="text">

<button>Przycisk</button>

<p id="wynikSkryptu"> </p>



<script type="text/javascript">

function myFunction() {

      const activeElement = document.activeElement.tagName;

      document.getElementById("wynikSkryptu").innerHTML = activeElement;

}

</script>



</body>

wynik skryptu

Kliknij w input albo button aby wyświetlić aktywny element:

characterSet


<script type="text/javascript">

var characterSet = document.characterSet;

document.write('kodowanie znaków dokumentu: ' + characterSet);

</script>

wynik skryptu

domain


<script type="text/javascript">

var domain = document.domain;

document.write('domena: ' + domain);

</script>

wynik skryptu

lastModified


<script type="text/javascript">

var lastModified = document.lastModified;

document.write('data ostatniej modyfikacji dokumentu: ' + lastModified);

</script>

wynik skryptu

title


<script type="text/javascript">

var title = document.title;

document.write('tytuł dokumentu: ' + title);

</script>

wynik skryptu

URL


<script type="text/javascript">

var URL = document.URL;

document.write('adres URL: ' + URL);

</script>

wynik skryptu

Metody Document

metoda	opis
`addEventListener()`	Dołącza procedurę obsługi zdarzeń do dokumentu.
`close()`	Zamyka strumień wyjściowy otwarty wcześniej za pomocą document.open().
`getElementById()`	Zwraca element, który ma atrybut ID o określonej wartości.
`getElementsByName()`	Zwraca aktywną listę węzłów zawierającą wszystkie elementy o określonej nazwie.
`getElementsByClassName()`	Zwraca element HTMLCollection zawierający wszystkie elementy o podanej nazwie klasy.
`getElementsByTagName()`	Zwraca obiekt HTMLCollection zawierający wszystkie elementy o podanej nazwie znacznika.
`open()`	Otwiera strumień wyjściowy HTML w celu zebrania danych wyjściowych z document.write().
`querySelector()`	Zwraca pierwszy element pasujący do określonych selektorów CSS w dokumencie.
`querySelectorAll()`	Zwraca wszystkie elementy pasujące do określonych selektorów CSS w dokumencie.
`removeEventListener()`	Usuwa procedurę obsługi zdarzeń z dokumentu, która została dołączona za pomocą metody addEventListener().
`write()`	Umożliwia wstawianie tekstu.

addEventListener()


<script>

document.addEventListener("click", function(){

  	    document.body.style.backgroundColor = "gold";

});

</script>

wyświetl przykład


<p id="wynik">&nbsp;</p>



<script>

document.addEventListener("click", function(){

  	    document.getElementById("wynik").innerHTML = "Koko koko!";

});

</script>

wyświetl przykład


<p id="wynik">&nbsp;</p>



<script>

document.addEventListener("click", myFunction);



function myFunction() {

	    document.getElementById("wynik").innerHTML = "Koko koko Euro spoko.";

};

</script>

wyświetl przykład


<p id="wynik">&nbsp;</p>



<script>

document.addEventListener("click", firstFunction);

document.addEventListener("dblclick", secondFunction);



function firstFunction() {

  	    document.getElementById("wynik").innerHTML = "Koko dżambo!";

};

function secondFunction() {

  	    document.getElementById("wynik").innerHTML = "Koko dżambo i do przodu.";

};

</script>

wyświetl przykład


<button onclick="wyswietl()">wyświetl</button>

<button onclick="skasuj()">skasuj</button>

<p id="wynik">&nbsp;</p>



<script>

function wyswietl() {

	    const liczba = 5;

  	    document.getElementById("wynik").innerHTML = liczba;

}

function skasuj() {

	    const liczba = '&nbsp;';

  	    document.getElementById("wynik").innerHTML = liczba;

}

</script>

wynik skryptu


<button id="wyswietl01">wyświetl</button>

<button id="skasuj01">skasuj</button>

<p id="wynik01">&nbsp;</p>



<script>

const button01 = document.getElementById('wyswietl01');

const button02 = document.getElementById('skasuj01');

const wynik01 = document.getElementById('wynik01');



button01.addEventListener('click', () => {

	    const liczba = 10;

  	    wynik01.innerHTML = liczba;

});

button02.addEventListener('click', () => {

	    const liczba = '&nbsp;';

  	    wynik01.innerHTML = liczba;

});

</script>

wynik skryptu


<button id="wyswietl03">wyświetl</button>

<button id="skasuj03">skasuj</button>

<p id="wynik03">&nbsp;</p>



<script>

const button03 = document.querySelector('#wyswietl03');

const button04 = document.querySelector('#skasuj03');

const wynik03 = document.querySelector('#wynik03');



button03.addEventListener('click', () => {

	    const liczba = 15;

  	    wynik03.innerHTML = liczba;

});

button04.addEventListener('click', () => {

	    const liczba = '&nbsp;';

  	    wynik03.innerHTML = liczba;

});

</script>

wynik skryptu


<button onclick="kolorTekstu01()">niebieski kolor tekstu</button>

<button onclick="kolorTekstu02()">usunięcie koloru tekstu</button><br />

<button onclick="kolorTlaTekstu01()">złoty kolor tła tekstu</button>

<button onclick="kolorTlaTekstu02()">usunięcie koloru tła tekstu</button><br />

<button onclick="kolorTlaStrony01()">srebrny kolor tła strony</button>

<button onclick="kolorTlaStrony02()">usunięcie koloru tła strony</button>

<h1 id="wynikX">przykładowy tekst</h1>



<script>

function kolorTekstu01() {

  	    document.getElementById("wynikX").style.color = "blue";

}

function kolorTekstu02() {

	    document.getElementById("wynikX").style.color = "";

}

function kolorTlaTekstu01() {

  	    document.getElementById("wynikX").style.backgroundColor = "gold";

}

function kolorTlaTekstu02() {

	    document.getElementById("wynikX").style.backgroundColor = "";

}

function kolorTlaStrony01() {

  	    document.body.style.backgroundColor = "silver";

}

function kolorTlaStrony02() {

	    document.body.style.backgroundColor = "";

}

</script>

wynik skryptu

przykładowy tekst


<button id="kolorTekstu01">niebieski kolor tekstu</button>

<button id="kolorTekstu02">usunięcie koloru tekstu</button><br />

<button id="kolorTlaTekstu01">złoty kolor tła tekstu</button>

<button id="kolorTlaTekstu02">usunięcie koloru tła tekstu</button><br />

<button id="kolorTlaStrony01">srebrny kolor tła strony</button>

<button id="kolorTlaStrony02">usunięcie koloru tła strony</button>

<h1 id="wynikY">przykładowy tekst</h1>



<script>

const buttonY1 = document.getElementById('kolorTekstu01');

const buttonY2 = document.getElementById('kolorTekstu02');

const buttonY3 = document.getElementById('kolorTlaTekstu01');

const buttonY4 = document.getElementById('kolorTlaTekstu02');

const buttonY5 = document.getElementById('kolorTlaStrony01');

const buttonY6 = document.getElementById('kolorTlaStrony02');

const wynikY1 = document.getElementById('wynikY');



buttonY1.addEventListener('click', () => {

	    wynikY1.style.color = "blue";

});

buttonY2.addEventListener('click', () => {

	    wynikY1.style.color = "";

});

buttonY3.addEventListener('click', () => {

	    wynikY1.style.backgroundColor = "gold";

});

buttonY4.addEventListener('click', () => {

	    wynikY1.style.backgroundColor = "";

});

buttonY5.addEventListener('click', () => {

	    document.body.style.backgroundColor = "silver";

});

buttonY6.addEventListener('click', () => {

	    document.body.style.backgroundColor = "";

});

</script>

wynik skryptu

przykładowy tekst


<button id="klik">Kliknij w ten przycisk</button>



<script type="text/javascript">

function myFunction01() {

        alert('Przycisk został kliknięty.');

}



var el = document.getElementById('klik');

el.addEventListener('click', myFunction01, false);

</script>

wynik skryptu

close()


<button onclick="myFunction02()">Otwórz</button>



<script>

function myFunction02() {

  	    document.open();

  	    document.write("<h1>Siema siema!</h1>");

  	    document.write("<p>Koko dżambo i do przodu.</p>");

  	    document.close();

}

</script>

wynik skryptu

getElementById()


<p id="wynik04"></p>



<script>

document.getElementById("wynik04").innerHTML = "Koko dżambo!";

</script>

wynik skryptu


<p id="wynik05"></p>



<script>

const kokoDzambo = document.getElementById("wynik05");

kokoDzambo.innerHTML = "<b>Koko dżambo i do przodu!</b>";

</script>

wynik skryptu


<h3 id="wynik06">Obiekt dokumentu</h3>



<script>

document.getElementById("wynik06").style.color = "purple";

</script>

wynik skryptu

Obiekt dokumentu


<h3 id="wynik07">Obiekt dokumentu</h3>



<script>

const kokoDzamboX = document.getElementById("wynik07");

kokoDzamboX.style.color = "#CC66CC";

</script>

wynik skryptu

Obiekt dokumentu

getElementsByName()


<table>

   <tr>

      <td>imię : </td>

      <td><input name="firstname" type="text" value="Emilia" /></td>

   </tr>

   <tr>

      <td>nazwisko: </td>

      <td><input name="lastname" type="text" value="Emilewska" /></td>

   </tr>

   <tr>

      <td>wiek: </td>

      <td><input name="age" type="number" value="55" /></td>

   </tr>

</table>

<p id="wynik08"> </p>



<script>

let elements = document.getElementsByName("firstname");

document.getElementById("wynik08").innerHTML = elements[0].tagName;

</script>

wynik skryptu

imię :
nazwisko:
wiek:

getElementsByClassName()


<table>

   <tr>

      <td class="klasa1">jakiś tekst</td>

      <td class="klasa1">jakiś tekst</td>

   </tr>

   <tr>

      <td class="klasa2">jakiś tekst</td>

      <td class="klasa2">jakiś tekst</td>

   </tr>

</table>



<br />

<b style="color: green;">wynik skryptu</b><br />

<script>

const kolor = document.getElementsByClassName("klasa1");

kolor[0].style.backgroundColor = "yellow";



const kolor2 = document.getElementsByClassName("klasa2");

kolor2[1].style.backgroundColor = "pink";

</script>

wynik skryptu

jakiś tekst	jakiś tekst
jakiś tekst	jakiś tekst


<table>

   <tr>

      <td class="klasa3">jakiś tekst</td>

      <td class="klasa3">jakiś tekst</td>

      <td class="klasa3">jakiś tekst</td>	

   </tr>

   <tr>

      <td class="klasa3">jakiś tekst</td>

      <td class="klasa3">jakiś tekst</td>

      <td class="klasa3">jakiś tekst</td>	

   </tr>

   <tr>

      <td class="klasa3">jakiś tekst</td>

      <td class="klasa3">jakiś tekst</td>

      <td class="klasa3">jakiś tekst</td>	

   </tr>

</table>



<script>

const kolor3 = document.getElementsByClassName("klasa3");

for (let i = 0; i < kolor3.length; i+=2) {

      kolor3[i].style.backgroundColor = "gold";

}

</script>

wynik skryptu

jakiś tekst	jakiś tekst	jakiś tekst
jakiś tekst	jakiś tekst	jakiś tekst
jakiś tekst	jakiś tekst	jakiś tekst

getElementsByTagName()


<p>owoce:

      <i>jabłko</i>

      <i>gruszka</i>

      <i>śliwka</i>

      <i>malina</i>

</p>



<p>czwarty element listy owoców: <b id="wynik09"></b></p>



<script>

const owoce = document.getElementsByTagName("i");

document.getElementById("wynik09").innerHTML = owoce[3].innerHTML;

</script>



<p>ilość owoców: <b id="wynik10"></b></p>



<script>

const owoce02 = document.getElementsByTagName("i");

document.getElementById("wynik10").innerHTML = owoce02.length;

</script>

wynik skryptu

owoce: jabłko gruszka śliwka malina

czwarty element listy owoców:

ilość owoców:

open()


<button onclick="myFunction03()">Otwórz stronę w nowym oknie</button>



<script>

function myFunction03() {

	    document.open("https://hedonskate.com/", "", "noopener=true");

}

</script>

wynik skryptu

querySelector()


<h4>jakiś tekst</h4>

<h5>jakiś tekst</h5>

<h6>jakiś tekst</h6>



<script>

document.querySelector("h4").style.color = "gole";

</script>

wynik skryptu

jakiś tekst


<h4 id="yellowID">jakiś tekst</h4>

<h4 id="orangeID">jakiś tekst</h4>

<h4 id="redID">jakiś tekst</h4>



<script>

document.querySelector("#orangeID").style.color = "orange";

</script>

wynik skryptu

jakiś tekst


<h4 class="yellowCLASS">jakiś tekst</h4>

<h4 class="orangeCLASS">jakiś tekst</h4>

<h4 class="redCLASS">jakiś tekst</h4>



<script>

document.querySelector(".redCLASS").style.color = "red";

</script>

wynik skryptu

jakiś tekst

querySelectorAll()


<h3 class="auta">Audi</h3>

<h3 class="auta">BMW</h3>

<h3 class="auta">Mercedes</h3>



<script>

const nodeList = document.querySelectorAll(".auta");

nodeList[0].style.color = "SkyBlue";

nodeList[1].style.color = "DodgerBlue";

nodeList[2].style.color = "Blue";

</script>

wynik skryptu

Audi

BMW

Mercedes


<h3 class="motory">Kawasaki</h3>

<h3 class="motory">Suzuki</h3>

<h3 class="motory">Yamaha</h3>



<script>

const nodeListX = document.querySelectorAll(".motory");

for (let i = 0; i < nodeListX.length; i++) {

      nodeListX[i].style.color = "purple";

}

</script>

wynik skryptu

Kawasaki

Suzuki

Yamaha


<b class="owoce">jabłka</b>

<b class="owoce">gruszki</b>

<b class="warzywa">pomidory</b>

<b class="warzywa">ogórki</b>



<script>

const nodeListY = document.querySelectorAll(".warzywa");

for (let i = 0; i < nodeListY.length; i++) {

      nodeListY[i].style.border = "7px solid green";

}

</script>

wynik skryptu
jabłka gruszki pomidory ogórki

write()


<script>

document.write("Koko dżambo i do przodu.");

document.write("<br />");

document.write("<b>Koko dżambo i do przodu.</b>");

document.write("<br />");

document.write("<b style=\"color: red\">Koko dżambo i do przodu.</b>");

</script>

wynik skryptu