0

Operacje na drzewie DOM

Pobieranie referencji do elementu DOM – metody

Do pobierania elementów z drzewka DOM używamy dwóch metod:

document.querySelector(selectorCSS) – funkcja przyjmuje argument selector CSS ( odnosimy sie w ten sam sposób jak w pliku css ), przeszukuje drzewko DOM od góry oraz znajduje pierwszy zgadzający się z selectorem element, i zwraca nam referencje do niego. Jeśli nie uda mu się odnaleźć elementu pasującego do selector’a, zwróci nam null.

document.querySelectorAll(selectorCSS) –  tak samo jak .querySelector() jako argument przyjmuje selector CSS, przeszukuje DOM jednak pobiera referencje do wszystkich elementów spełniajacych kryteria selectora. Co ważne! w przypadku gdy tylko jeden element zostanie pobrany, querySelectorAll() zwróci go jako tablice.

.querySelector(selectorCss) oraz .querySelectorAll(selectorCSS) – działają nie tylko na document, lecz możemy ich użyć na każdym elemencie HTML . Przeszukiwanie występuje tylko wewnątrz elementu.

Selectory

Type selector

Type selector – jest to nazwa (tag!) elementu znajdującego się w drzewie DOM, przykładem może być h1, p, div, article, body, header, html.  Przykładowym wywołaniem naszego query selector’a może być:

// get first paragraph
var firstParagraph = document.querySelector('p'); 

//get all paragraphs
var allParagraphs = document.querySelectorAll('p');

Attribute selectors

Selectorem css może być rownież atrybut danego elementu , istnieje kilka możliwości które oferuje nam pobieranie po atrybucie:

attr – jest to nazwa atrybutu  np. type, href, data-id ( atrybuty z data- nie są natywne, generowane przez użytkownika )

[attr] – w nawiasach kwadratowych podajemy nazwe atrybutu, w tym przypadku nie ważne jaką wartość  posiada dany attr, liczy się tylko jego wystąpienie w elemencie.

[attr=value] – reprezentuje element który posiada atrybut z wartością równą ‚value’.

[attr~=value] – reprezentuje element których jedna z wartości atrybutu ( odzielonego spacjami ) jest równa value.

[attr^=value] – reprezentuje element którego wartość atrybutu rozpoczyna się (prefix) od wartości value.

[attr$=value] – reprezentuje element którego wartość atrybutu kończy się (sufix) wartością value.

[attr*=value] – reprezentuje element którego wartość atrybutu zawiera w sobie ( występuje przynajmniej raz ), wartość podaną w value.

przykłady:

// Get all images objects

var images = document.querySelectorAll([type^="image/"]);

// Get all external links with extension .zip

var archivedFiles = document.querySelectorAll(a[href$=".zip"]);

// Get All paragraphs who's title contains "maniak"

var paragraphs = document.querySelectorAll(p[title*="maniak"]);

Class Selector

Atrybut class w elemencie HTML określa jedną lub więcej nazw classy elementu. Classa w htmlu służy zwykle do stylowania elementu poprzez css lub do interakcji za pomocą javascript.

.classname – Selector class rozpoczyna się „.” a następnie nazwa classy, działa analogicznie do selektora [attr~=value]. Co oznacza że przynajmniej jedna z wartości atrybutu class w elemencie (oddzielone spacjami) musi być dokładnie taka sama jak wartość po kropce.

Id Selector

Atrybut id w elemencie HTML nadaje mu unikalny identyfikator (id musi byc unikalne wzgledem całego dokumentu html ). W jednym elemencie nie może występować więcej id niż jedno.

#id – Selektor id rozpoczynamy znakiem # a następnie jego nazwa. Nazwa musi być identyczna jak wartość po #.

Pseudoclassy

W selektorach css ( a takie przyjmuje .querySelector() oraz .querySelectorAll() występują pseudoclassy. Przykładami pseudoclass mogą być np. :checked, :empty, :first :nth-child(), :last-child, :first-child etc.

:required – działa na 3 typach elementów: input, textarea oraz select. Reprezentuje te które mają ustawionjy atrybut required. Np możemy pobrać wszystkie te elementy które wymagają wypełnienia.

// get all required form elements

var requiredInputs = document.querySelectorAll('form input:required, form select:required, form textarea:required');

( przecinek w selectorach css służy do stworzenia grupy, należu pamietać o tym że każdy musi mieć pełna poprawną scieżkę )

:checked – działa na 3 rodzaje elementów: input o typie radio (<input type=”radio”> oraz checkbox  <input type=”checkbox”> oraz select (<select> <option value=”1″>1</option> <option value=”2″>2</option> </select> ), reprezentuje on stan „włączenia/wybrania”.

// Get all chcecked checkbox

var chcecked = document.querySelectorAll('[type="checkbox"]:checked);

 

Należy pamiętać o tym że  queryselector nie działa to reaktywnie ( realtime ), tylko wybiera nam elementy spełniające selektor css w momencie wywołania funkcji!

:first-child – reprezentuje pierwszy element spośród grupy sąsiadujących elementów.

// color first task of tasks list

var firstTaskTodo = document.querySelector('.task-list li:first-child');
firstTaskTodo.style.backgroundColor = "#9b59b6";

:last-child – reprezentuje ostatni element pośród grupy sąsiadujących elementów.

// color last task of tasks list

var firstTaskTodo = document.querySelector('.task-list li:last-child');
firstTaskTodo.style.backgroundColor = "#2c3e50";

:nth-child() – Reprezentuje element/y bazując na pozycji pośród grupy sąsiadujących elementów. Tutaj występuje kilka możliwości:

-pozycji elementu pośród grupy sąsiadujących elementów ( pozycja jest liczona od 1 ) np:

// color second task of tasks list

var firstTaskTodo = document.querySelector('.task-list li:nth-child(2)');
firstTaskTodo.style.backgroundColor = "#f1c40f";

– Zdefinowane przez ccs wartości których możemy użyć:

odd – elementy o nieparzystej pozycji pozycji: np. 1, 3, 5, 7 etc.

// color odd tasks of list

var oddPositionTask = document.querySelectorAll('.task-list li:nth-child(odd)');

for( var i=0; i<oddPositionTask.length;i++)
{
   oddPositionTask[i].style.backgroundColor = "#16a085";
}

even – elementy o nieparzystej pozycji pozycji: 2,4,6,8,10 etc.

// color even tasks of list

var evenPositionTask = document.querySelectorAll('.task-list li:nth-child(even)');

for( var i=0; i<oddPositionTask.length;i++)
{
    evenPositionTask[i].style.backgroundColor = "#27ae60";
}

:nth-of-type() – Działa w ten sam sposób jak nth-child(), z tym wyjątkiem że zlicza tylko elementy danego typu, sąsiedzi którzy mają inny typ nie są zliczani do pozycji. np:

// color even paragraphs in article

var evenParagraphs = document.querySelectorAll('article p:nth-of-type(even)');

for( var i = 0; i<evenParagraphs.length; i++ )
{
   evenParagraphs[i].style.color = "#2ecc71";
}

 

 

Notacja funkcyjna:

Reprezentuje elementy których pozycja w grupie sąsiadujących elementów spełniających wzór An+B, dla każdego pozytywnego n, lub równego 0.  Pierwszą wartością jaką przyjmuje n jest 0. Wartość A oraz B muszą być integerami (liczbami całkowitymi). A więc przykłady:

// Get every sixth task

var everySixthTasks = document.querySelectorAll('.task-list li:nth-child(6n)');

// So: no element [6x0], 6 [6x1], 12 [6x2]
// no element with position 0
// this will get task with position: 6, 12 etc.



// function notation:

var notationTasks = document.querySelectorAll('.task-list li:nth-child(2n+1)');

// So: 1 [2x0 + 1], 3 [2x1 + 1], 5 [2x2 + 1] etc.

:not( selectorCss ) – pseudo classa :not przyjmuje jako argument  selector css ( a jakby inaczej! ), i reprezentuje elementy które nie spełniają tego selectora. Bardzo ważne aby pamietać że :not dotyczy tylko jedno elementu ( nie ma wpływu na dzieci, nie zostaną wykluczone ) Wariacji z :not może być mnóstwo, a więc kilka przykładów:

// get all elements from body except paragraphs
var notParagraph = document.querySelectorAll( 'body :not(p)' );

// get all list items that dont have a class named "done"
var todoTasks = document.querySelectorAll( '.task-list > li:not(.done)' );


//get all elements from body except div with class .do-not-touch 
var elements = document.querySelectorAll( 'body :not(div.do-not-touch)' ); 
//!Warning! :not applies to only one element, you can't exclude children of this element.
// So if div with a class "do-not-touch", have inside of it a paragraph.  paragraph will be geted by this //query.

:only-child – reprezentuje element który nie posiada sąsiadów, jest jednym dzieckiem rodzica. Inny sposób zapisu :only-child, to: :first-child:last-child lub :nth-child(1):nth-last-child(1).  Np:

// return paragraph from article, where its only one paragraph nothing more. 

var lonelyParagraphs = document.querySelectorAll('article p:only-child');

:only-of-type – reprezentuje element, który posiada unikalny typ ( tag: div,article,img etc. ) wśród swoich sąsiadów. Na przykład możemy pobrać artykuł który posiada tylko jedno zdjęcie w sobie ( do pobrania artykułu będziemy musieli wykorzystać jedną dodatkową metodę, która działa na elementach. element.parentElement – zwraca referencje do d0 r0dzica elementu. W CSS nie można, poruszać się z dziecka, w stronę rodzica ( wymagało by to ponownego renderowania strony ) ):

// return articles with only one image

var articles = document.querySelectorAll('article img:only-of-type').parentElement;

:empty – reprezentuje element który nie ma w sobie żadnych dzieci. Dotyczy to zarówno elementów, tekstu jak również białych znaków. Aby usunąć element, musimy posiadać referencje do jego rodzica. I na nim użyć metody removeChild( child ), która jako argument przyjmuje swoje dziecko.

// remove all empty elements
var emptyElements = document.querySelectorAll(:empty);

for( var i=0; i<emptyElements.length;i++)
{
  var el = emptyElements[i];
  el.parentElement.removeChild( el );
}

 

Selectory dzieci

Descendant selector

W tłumaczeniu dosłownym oznacza selector potomka. Jest on najczęsciej używanym selectorem który łapie elementy, które znajdują się wewnątrz innego elementu. Przeszukuje on nie tylko dzieci, ale również wnuki etc.. danego elementu ( całe wnętrze ). Elementy odzielamy spacją, np: „.main-article .article-header h1”. Jak będzie działać ten selector? Najpierw odszuka elementu o classie „main-article”, następnie w jego potomkach ( nie tylko dzieciach ), zacznie wyszukiwać elementu o classie ‚article-header’. Aby na końcu w potomkach elementu o classie ‚article-header’ wyszukać elementu o typie h1.

// Get h1 from header from article with class .main-header

var articleHeader = document.querySelector('.main-article .article-header h1');

Direct Child Selector

Czasem selector potomka nie wystarcza, możemy pobrać nie te elementy które chcemy ( za dużo ). W tedy z pomocą przychodzi nam direct child selector. Przeszukuje on tylko dzieci, nie szuka wewnątrz nich. Składnia tego selectora to „parentElementSelector > childElementSelector”. Np:

// Get only direct images from article with class main-article

var articleImages = document.querySelectorAll('.main-article > img');

Powyższy kod przeszuka tylko dzieci, elementu o classie .main-article i wyszuka w nich elementy img. Jeśli w artykule będzie znajdował się element div, a w nim img. Nie zostanie wyszukany poprzez ten selector.

Siblings Selector

General sibling selector

General sibling selector – pozwala na wybranie elementów które posiadają tego samego rodzica. Taki selector tworzymy za pomocą tyldy: „~” pomiędzy dwoma elementami. Pierwszy element określa miejsce po którym ma zacząć wyszukiwać sąsiadów, natomiast drugi określa jakich sąsiadów ma pobrać, a więc:

<aside> </aside>
<section>
  <p>...</p>
  <img src="./img.jpeg">
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
    <span> </span>
  </div>
  <p>This paragraph will be selected</p>
</section>

 

// select siblings paragraphs of img, after img element. And change color of these to red.
var siblingsParagraphs = document.querySelectorAll('img ~ p');

for( var i = 0; i < siblingsParagraphs.length; i++ )
{
   siblingsParagraphs[i].style.color = "red"
}

Adjacent Sibling Selector

Adjacent sibling selector – Reprezentuje tylko tych sąsiadów, którzy występują odrazu po danym elemencie. Ten selector tworzymy za pomocą plusa: ‚+’ pomiędzy dwoma elementami. Pierwszy selector określa element po którym ma wyszukiwać sąsiadów (muszą spełniać konwencje i być odrazu za tym elementem), natomiast drugi, jakie elementy to mają być. Tak samo jak w przypadaku general sibling selector muszą posiadać tego samego rodzica.

<aside> </aside>
<section>
  <p>...</p>
  <img src="./img.jpeg">
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
    <span>...</span>
  </div>
  <p>.../p>
</section>
// select siblings paragraphs of img (just right after img element), after img element. And change color of these to green.
var siblingsParagraphs = document.querySelectorAll('img + p');

for( var i = 0; i < siblingsParagraphs.length; i++ )
{
   siblingsParagraphs[i].style.color = "green";
}

 

 

admin