To czwarta część postów poświęcona natywnym odpowiednikom metod jQuery. Możesz przeczytać i zanim będziesz kontynuować.

W tym artykule przyjrzymy się sposobom tworzenia, wstawiania, przenoszenia i usuwania elementów. Chociaż jQuery zawiera już wiele przydatnych metod, zdziwisz się, gdy dowiesz się, że wszystko to można łatwo zrobić przy użyciu metod natywnych.

Manipulowanie kodem HTML elementów jQuery // get var html = $(elem).html(); // set $(elem).html("Nowy HTML"); Natywny JS // get var html = elem.innerHTML; // set elem.innerHTML = "Nowy HTML"; Manipulacja tekstem elementu jQuery // pobierz var tekst = $(elem).text(); // set $(elem).text("Nowy tekst"); Natywny JS // pobierz var tekst = elem.textContent; // set elem.textContent = "Nowy tekst"; Tworzenie elementu jQuery $(""); Natywny dokument JS.createElement("div"); Dołącza treść na końcu elementów jQuery $(parentNode).append(newNode); Natywny JS parentNode.appendChild(newNode); Dodaje treść na początek elementów jQuery $(referenceNode).prepend(newNode); Natywny Node JS referenceNode.insertBefore(newNode, referenceNode.firstElementChild); // lub referenceNode.insertAdjacentElement("afterbegin", newNode); // FF 48.0+, IE8+ Wstaw bezpośrednio przed elementem jQuery $(referenceNode).before(newNode); Natywny Node JS referenceNode.parentNode.insertBefore(newNode, referenceNode); // lub referenceNode.insertAdjacentElement("beforebegin", newNode); // FF 48.0+, IE8+ Wstaw bezpośrednio po elemencie jQuery $(referenceNode).after(newNode); Natywny Node JS referenceNode.parentNode.insertBefore(newNode, referenceNode.nextElementChild); // lub referenceNode.insertAdjacentElement("afterend", newNode); // FF 48.0+, IE8+

Uwaga: „beforebegin” i „afterend” będą działać tylko wtedy, gdy węzeł referencyjny znajduje się w drzewie DOM i ma element nadrzędny.

Spójrz na poniższe:

ReferenceNode.insertAdjacentElement(pozycja, węzeł);

Metoda wstawAdjacentElement przyjmuje dwa parametry:

• pozycja - pozycja względem węzła referencyjnego, musi mieć jedną z poniższych wartości:
  • „beforebegin” – przed samym elementem.
  • „afterbegin” — wewnątrz elementu, przed pierwszym dzieckiem.
  • „beforeend” – wewnątrz elementu, po ostatnim dziecku.
  • „afterend” – po samym elemencie.
• węzeł - węzeł do wstawienia

treść tekstu

Jakiś tekst Jakiś tekst var elem1 = document.getElementById("elem1"); var elem2 = document.getElementById("elem2"); elem1.insertAdjacentElement("przed końcem", elem2); // wynik Jakiś tekstJakiś tekst

Metoda wstawAdjacentElement jest czystsza i bardziej intuicyjna niż metoda wstawBefore, ale ta druga jest lepiej obsługiwana w starszych przeglądarkach.

Dodawanie elementów wiele razy

Warto również zauważyć, że dodanie elementu do węzła znajdującego się w drzewie DOM spowoduje przerysowanie. Nie jest to zbyt dobre, ponieważ przeglądarka musi ponownie obliczyć rozmiar i położenie nowego elementu, co spowoduje również zmianę jego dzieci, przodków i elementów pojawiających się po nim w DOM. Jeśli dodajesz wiele elementów do DOM, może to chwilę potrwać.

Aby tego uniknąć, możesz dodać za pomocą DocumentFragment. Fragment dokumentu to obiekt dokumentu, który istnieje tylko w pamięci, więc dołączenie do niego nie spowoduje żadnych przepływów.

Powiedzmy, że musimy dodać 100 elementów li do elementu ul obecnego w drzewie DOM:

// Pobierz element, który będzie zawierał nasze elementy var ul = document.querySelector("ul"); // utwórz 100 elementów listy dla (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the ul element ul.appendChild(li); }

W powyższym przykładzie elementy li są dodawane bezpośrednio do elementu ul, który znajduje się w drzewie DOM, co powoduje przerysowanie przy każdej iteracji - to 100 zmian!

Znajdźmy najlepszy sposób.

// Pobierz element, który będzie zawierał nasze elementy var ul = document.querySelector("ul"); // utwórz fragment dokumentu, aby dołączyć elementy listy do var docFrag = document.createDocumentFragment(); // utwórz 100 elementów listy dla (var i = 1; i< 100; i++) { var li = document.createElement("li"); // append the new list element to the fragment docFrag.appendChild(li); } // append the fragment to the ul element ul.appendChild(docFrag);

W tym samym przykładzie elementy li są dodawane do fragmentu dokumentu znajdującego się w pamięci, tak że ponowne przepływ zostanie wywołane, gdy fragment zostanie dodany do elementu ul. Ta metoda zmniejszy liczbę przerysowań ze 100 do 1.

Usuwanie elementu jQuery $(referenceNode).remove(); Natywny referencja JS.parentNode.removeChild(referenceNode); // lub referenceNode.remove(); // FF 23.0+, 23.0+, Edge (bez obsługi IE)

W tym poście chcę Ci powiedzieć jak dodać lub usunąć element z obiektu w JavaScript. To bardzo proste, ale wielu początkujących, jak ja wcześniej, często jest przez to zdezorientowanych.

Utwórz przykładowy obiekt var obj = ( nazwa: „alex”, nazwisko: „petrov”, strona internetowa: „site”, );

Mamy prosty obiekt, wewnątrz którego znajdują się dane takie jak imię (imię), nazwisko (nazwisko) oraz strona internetowa (strona internetowa). Dane mogą dotyczyć absolutnie wszystkiego, ale na potrzeby tego rekordu będą to tylko te dane.

Dodanie nowego elementu obj.country = "ru"; // dodaje do obiektu nowy klucz "kraj" o wartości "ru" obj["miasto"] = "Moskwa"; // doda także nowy klucz, tylko „miasto” o wartości „Moskwa”

Powyższy kod jest przejrzysty, jednak dla jasności można dodać nowe wartości do obiektu w składni obiektu za pomocą „.” i klucz lub zwykły format tablicy. Jeśli zadeklarujesz to jako tablicę, obj nadal będzie obiektem, ponieważ wcześniej go tak oznaczyłeś dzięki () .

Utwórz obiekt wewnątrz obiektu obj.other_obj = (); // utwórz nową wartość other_obj w obj i uczyń ją obiektem

Teraz dodajmy tam trochę danych:

Obj.other_obj.first = "pierwszy klucz nowego obiektu"; obj.other_obj.sekunda = "drugi";

Stworzyliśmy dwie nowe wartości pierwszą i drugą wewnątrz other_obj .

Usuwanie elementu usuń obj.name; // zwraca wartość true

Możesz użyć usuwania , które może usuwać elementy z obiektów. Nie możesz w ten sposób usunąć całego obiektu, ale jeśli tego potrzebujesz, możesz to zrobić w ten sposób:

obiekt = (); // Spraw, aby obiekt znów był pusty

To wszystko, jeśli nadal masz pytania dotyczące obiektów w JavaScript, napisz komentarz poniżej, postaram się Ci pomóc.

Ostatnia aktualizacja: 1.11.2015

Obiekt dokumentu posiada następujące metody tworzenia elementów:

createElement(elementName): Tworzy element HTML, którego znacznik jest przekazywany jako parametr. Zwraca utworzony element

createTextNode(text) : Tworzy i zwraca węzeł tekstowy. Tekst węzła jest przekazywany jako parametr.

varelem = document.createElement("div"); var elemText = document.createTextNode("Hello World");

Zatem zmienna elem będzie przechowywać odniesienie do elementu div. Jednak samo utworzenie elementów nie wystarczy, należy je jeszcze dodać do strony internetowej.

Aby dodać elementy możemy skorzystać z jednej z metod obiektu Node:

appendChild(newNode): dodaje nowy węzeł newNode na końcu kolekcji węzłów podrzędnych

wstawBefore(newNode, referenceNode): wstawia nowy węzeł newNode przed węzłem referencyjnym

Używamy metody appendChild:

Tytuł artykułu

Pierwszy paragraf

Akapit drugi

var artykułDiv = document.querySelector("div.article"); // utwórz element var elem = document.createElement("h2"); // utwórz dla niego tekst var elemText = document.createTextNode("Hello world"); // dodaj tekst do elementu jako element podrzędny elem.appendChild(elemText); // dodaj element do div artykułDiv.appendChild(elem);

Najpierw tworzymy zwykły element nagłówka h2 i węzeł tekstowy. Następnie do elementu nagłówka dodawany jest węzeł tekstowy. Następnie dodajemy tytuł do jednego z elementów strony internetowej:

Nie musimy jednak tworzyć dodatkowego węzła tekstowego, aby zdefiniować tekst wewnątrz elementu, ponieważ możemy skorzystać z właściwości textContent i bezpośrednio przypisać do niego tekst:

Varelem = document.createElement("h2"); elem.textContent = "Witaj, świecie";

W takim przypadku węzeł tekstowy zostanie utworzony domyślnie podczas ustawiania tekstu.

Zastanów się teraz, jak dodać podobny element na początek kolekcji węzłów potomnych bloku div:

Var artykułDiv = document.querySelector("div.article"); // utwórz element var elem = document.createElement("h2"); // utwórz dla niego tekst var elemText = document.createTextNode("Hello world"); // dodaj tekst do elementu jako element podrzędny elem.appendChild(elemText); // pobierz pierwszy element, który ma zostać dodany przed var FirstElem = artykułDiv.firstChild.nextSibling; // dodaj element do elementu div przed pierwszym węzłem artykułDiv.insertBefore(elem, pierwszyElem);

Jeśli chcemy wstawić nowy węzeł w drugim, trzecim lub innym miejscu, to musimy znaleźć węzeł, przed którym chcemy wstawić, korzystając z kombinacji właściwości FirstChild/lastChild i nextSibling/previousSibling.

Kopiowanie elementu

Czasami elementy mają dość złożoną kompozycję i znacznie łatwiej jest je skopiować, niż tworzyć treść z oddzielnych wywołań. Aby skopiować istniejące węzły z obiektu Node, możesz użyć metody cloneNode():

Var artykułDiv = document.querySelector("div.article"); // sklonuj element artykułuDiv var newArticleDiv = artykułDiv.cloneNode(true); // dołącz na końcu elementu treści document.body.appendChild(newArticleDiv);

Do metody cloneNode() przekazywana jest wartość logiczna jako parametr: jeśli zostanie przekazana wartość true, element zostanie skopiowany ze wszystkimi węzłami potomnymi; jeśli zostanie przekazana wartość false, zostanie ona skopiowana bez węzłów podrzędnych. Oznacza to, że w tym przypadku kopiujemy węzeł z całą jego zawartością i następnie dodajemy go na końcu elementu body.

Usuwanie elementu

Aby usunąć element, wywoływana jest metoda usuwaniaChild() obiektu Node. Ta metoda usuwa jeden z węzłów podrzędnych:

Var artykułDiv = document.querySelector("div.article"); // znajdź węzeł do usunięcia - pierwszy akapit var usuwalnyNode = document.querySelectorAll("div.article p"); // usuń węzeł artykułDiv.removeChild(removableNode);

W takim przypadku pierwszy akapit zostanie usunięty z bloku div.

Wymiana elementu

Aby zastąpić element, należy użyć metody zamianyChild(newNode, oldNode) obiektu Node. Metoda ta przyjmuje nowy element jako pierwszy parametr, który zastępuje stary element oldNode przekazany jako drugi parametr.

Var artykułDiv = document.querySelector("div.article"); // znajdź węzeł do zastąpienia - pierwszy akapit var oldNode = document.querySelectorAll("div.article p"); // utwórz element var newNode = document.createElement("h2"); // utwórz dla niego tekst var elemText = document.createTextNode("Hello world"); // dodaj tekst do elementu jako dziecko newNode.appendChild(elemText); // zastąp stary węzeł nowym artykułDiv.replaceChild(newNode, oldNode);

W takim przypadku zastąp pierwszy akapit nagłówkiem h2.

Na tej lekcji nauczymy się tworzyć węzły elementów (createElement) i węzły tekstowe (createTextNode). Rozważ także metody dodawania węzłów do drzewa (appendChild, wstawBefore) i usuwania węzłów z drzewa (removeChild).

Dodawanie węzłów do drzewa

Dodanie nowego węzła do drzewa zwykle odbywa się w 2 krokach:

Utwórz wymagany węzeł, korzystając z jednej z następujących metod:

• createElement() - tworzy element (węzeł) o podanej nazwie (znacznik). Metoda createElement(element) posiada jeden wymagany parametr (element), którym jest string zawierający nazwę elementu (tagu), który ma zostać utworzony. Nazwę elementu (tagu) w parametrze należy podać wielkimi literami. W rezultacie ta metoda zwraca element, który został utworzony.
• createTextNode() - tworzy węzeł tekstowy z określonym tekstem. Metoda createTextNode(text) posiada jeden wymagany parametr (text), którym jest string zawierający tekst węzła tekstowego. W rezultacie ta metoda zwraca utworzony węzeł tekstowy.

Określ lokalizację w drzewie, w której chcesz wstawić węzeł. Aby to zrobić, użyj jednej z następujących metod:

• appendChild() - Dodaje węzeł jako ostatni węzeł potomny elementu, dla którego wywoływana jest ta metoda. Metoda appendChild(node) ma jeden wymagany parametr — węzeł, który chcesz dodać. W rezultacie ta metoda zwraca dodany węzeł.
• wstawBefore() - Wstawia węzeł jako węzeł podrzędny elementu, dla którego wywoływana jest ta metoda. Metoda wstawka(newNode,existingNode) posiada dwa parametry: newNode (wymagane) - węzeł, który chcesz dodać, istniejącyNode (opcjonalnie) - węzeł potomny elementu, przed którym chcesz wstawić węzeł. Jeśli drugi parametr (existingNode) nie zostanie podany, to metoda wstawi go na końcu, tj. jako ostatni węzeł podrzędny elementu, dla którego wywoływana jest ta metoda. W rezultacie metoda wstawkaBefore() zwraca wstawiony węzeł.

Na przykład:

• Komputer
• Laptop
• Tablet

Spójrzmy na bardziej złożony przykład, w którym dodajemy węzeł LI do drzewa zawierającego węzeł tekstowy z tekstem „Smartfon” na końcu listy ul.

Aby to zrobić, wykonaj następujące czynności:

Utwórz element (węzeł) LI .

Utwórz węzeł tekstowy zawierający tekst „Smartfon”.

Dodaj nowo utworzony węzeł tekstowy jako ostatni węzeł podrzędny nowo utworzonego elementu LI

Dodaj nowo utworzony węzeł LI jako ostatni węzeł podrzędny elementu ul

//utwórz element (węzeł) li var elementLI = document.createElement("li"); //utwórz węzeł tekstowy zawierający tekst „Smartfon” var textSmart= document.createTextNode("Smartphone"); //dołącz utworzony węzeł tekstowy jako ostatnie dziecko nowo utworzonego elementu LI elementLI.appendChild(textSmart); //pobierz element, do którego utworzony węzeł li zostanie dodany jako element potomny var elementUL = document.getElementById("list"); //dołącz utworzony element li jako ostatni element podrzędny do UL za pomocą id="list" elementUL.appendChild(elementLI);

appendChild() i wstawBefore() podczas pracy z istniejącymi węzłami

Praca z istniejącymi węzłami przy użyciu metod appendChild() i wstawBefore() również odbywa się dwuetapowo:

Pobierz istniejący węzeł w drzewie.

Określ, gdzie wstawić węzeł, korzystając z metody appendChild() lub wstawBefore(). Spowoduje to usunięcie węzła z jego poprzedniej lokalizacji.

Na przykład dodaj istniejący element li zawierający tekst „Tablet” na górę listy (spowoduje to usunięcie go z poprzedniej pozycji):

//pobierz element UL zawierający listę według jego identyfikatora var elementUL = document.getElementById("list"); //pobierz element li zawierający węzeł tekstowy „Tablet” var elementLI = elementUL.childNodes; //dodaj element na początek listy //spowoduje to usunięcie go z pierwotnej lokalizacji elementUL.insertBefore(elementLI,elementUL.firstChild);

Ćwiczenia

• W dokumencie znajdują się dwie listy. Musisz przenieść elementy z drugiej listy do pierwszej.
• Utwórz listę, pole tekstowe i 2 przyciski. Napisz kod JavaScript, który w zależności od naciśniętego przycisku doda tekst w polu tekstowym na początek lub na koniec listy.

Usuwanie węzłów

Usunięcie węzła z drzewa odbywa się w 2 etapach:

Zdobądź (znajdź) ten węzeł w drzewie. Ta akcja jest zwykle wykonywana za pomocą jednej z następujących metod: getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() lub querySelectorAll() .

Wywołaj metodę usuwaniaChild() na węźle nadrzędnym, przekazując jako parametr węzeł, który chcemy z niego usunąć.
Metoda RemoveChild() zwraca usunięty węzeł jako jego wartość lub null, jeśli węzeł, który chcieliśmy usunąć, nie istniał.

//znajdź węzeł, który chcemy usunąć var ​​findElement = document.getElementById("notebook"); //wywołaj metodę usuwaniaChild w węźle nadrzędnym //i przekaż jej znaleziony węzeł jako parametr findElement.parentNode.removeChild(findElement);

Na przykład usuń ostatnie dziecko elementu za pomocą id="myID" :

//pobierz element z id="myID" var myID = document.getElementById("myID"); //pobierz ostatni węzeł potomny elementu myID var lastNode = myID.lastChild; //ponieważ nie wiemy, czy ostatni węzeł potomny elementu jest elementem, //użyj pętli while, aby znaleźć ostatnie dziecko elementu myID //o ile element ma węzeł i jego typ nie jest równy 1 (tzn. to nie jest element) wykonaj while (lastNode && lastNode.nodeType!=1) ( //przejdź do poprzedniego węzła lastNode = lastNode.previousSibling; ) //jeśli znaleźliśmy element w węźle myID if (lastNode) ( // następnie należy go usunąć lastNode.parentNode.removeChild( lastNode); )

Na przykład usuń wszystkie węzły podrzędne z elementu za pomocą id="myQuestion" :

//pobierz element, z którego chcemy usunąć wszystkie jego węzły podrzędne var elementQuestion = document.getElementById("myQuestion"); //podczas gdy istnieje pierwszy element while (elementQuestion.firstElement) ( //usuń go elementQuestion.removeChild(element.firstChild); )

Ćwiczenia

Napisz funkcję, która usuwa wszystkie węzły tekstowe z elementu.

Istnieją 2 listy (), napisz kod JavaScript, który usunie wszystkie elementy z list 1 i 2.