Manipulacja elementami HTML przez JavaScript
W tym spisie omówi Manipulowanie elementami HTML Poprzez JavaScript. Wyjaśnimy również procedurę dodawania elementów HTML, dołączania elementów HTML, zmiany zawartości elementów HTML, znajdowania i uzyskiwania elementów HTML oraz usuwania elementów HTML i ich węzłów dziecięcych. Ponadto przykłady związane z appendChild (), insertBefore (), właściwość InnerHtml, getElementById (), getElementByClassName (), QuerySelectorAll (), resuń () i revoveeChild () będą. A więc zacznijmy!
Jak dodać elementy HTML za pośrednictwem JavaScript za pomocą metody appendChild ()
Metoda JavaScript appendChild () jest wykorzystywana do dodawania elementu HTML jako dziecka określonego węzła nadrzędnego. Ta metoda służy do przenoszenia elementów HTML.
Składnia metody appendChild ()
ParentNode.appendchild (childNode);Tutaj ParentNode jest elementem HTML, który chcemy ogłosić jako rodzic, podczas gdy Childnode jest nowo utworzony element HTML dodany do węzła nadrzędnego.
Przykład: Jak dodać elementy HTML za pośrednictwem JavaScript za pomocą metody appendChild ()
W tym przykładzie pokażemy, jak korzystać z „appendChild ()”Metoda dodawania elementów HTML przez JavaScript. Przede wszystkim dodamy nagłówek i akapit za pomocą
I
Elementy HTML:
To jest Linuxhint.com
Dodawanie elementów HTML przez JavaScript.
To jest główny akapit.
To jest drugi akapit.
W następnym kroku stworzymy nowy
element "ustęp”, Wykorzystując„createElement ()„Metoda obiektu dokumentu:
Wykonaj powyższy program w swoim ulubionym edytorze kodu lub dowolnej piaskownicy kodowania online; Jednak w tym celu wykorzystamy JSBin:
Jak widać z poniżej podanego wyjścia, dodaje się nowy element HTML o treści tekstowej „To jest nowy węzeł”:
Jak dołączyć elementy HTML za pośrednictwem JavaScript za pomocą metody insertBefore ()
Jeśli chcesz dołączyć element HTML jako węzeł dziecięcy przed określonym węzłem, możesz wywołać „insertBefore ()„Metoda JavaScript.
Składnia metody insertMethod ()
ParentNode.insertBefore (newNode, IsteingNode);Tutaj "newNode”To nowo utworzony element HTML, który chcesz dodać,„IsteingNode”To element, przed którym wstawisz swój element HTML i„ParentNode”Jest elementem HTML, który określiłeś jako węzeł nadrzędny.
Przykład: Jak dołączyć elementy HTML za pośrednictwem JavaScript za pomocą metody insertBefore ()
W poprzednim przykładzie wykorzystaliśmy metodę Dodawanie nowego elementu HTML jako ostatnie dziecko macierzystego HTML. Możesz jednak również użyć JavaScript „insertBefore ()”Metoda dodania elementu HTML przed określonym elementem. Poniższy przykład nauczyłeś cię użycia „insertBefore ()" metoda.
Po pierwsze, dodamy nagłówek i niektóre akapity w następujący sposób:
To jest Linuxhint.com
Dodawanie elementów HTML przez JavaScript.
To jest główny akapit.
To jest drugi akapit.
Następnie utworzymy nowy element „ustęp„Element HTML, a następnie zdefiniuj dla niego węzeł tekstowy:
Wykonanie powyższego programu doda „ustęp„HTML przed„P1”:
Jak zmień zawartość elementów HTML za pośrednictwem JavaScript za pomocą właściwości InnerHTML
HTML DOM pozwala na zmianę zawartości HTML, wykorzystując „InnerHtml" nieruchomość. „„InnerHtml”Jest zwykle używane na stronach internetowych do generowania dynamicznych treści HTML, takich jak formularze komentarzy, formularze rejestracyjne i linki.
Składnia właściwości JavaScript InnerHtml
element.innerHtml = wartośćTutaj, "element”To element HTML, który wybrałeś, aby zmienić jego treść i„ ”wartość”To treść, którą ustawimy.
Przykład 1: Zmiana zawartości elementów HTML za pośrednictwem JavaScript
Ten przykład pokaże, jak korzystać z „InnerHtml”Właściwość JavaScript w celu zmodyfikowania treści elementu HTML. Po pierwsze, dodamy element nagłówka do
nagłówek i akapit z
Tag HTML:
Zmień elementy HTML za pomocą JavaScript
Ciąg testowy
Teraz chcemy zmienić treść „„Element mający identyfikator”P1". Aby to zrobić, użyjemy „dokumentu.metoda getelementById () ”, aby uzyskać określony element. Następnie ustawimy treść naszej
Element do „To jest Linuxhint.com”:
Zmieniliśmy treść powyższego akapitu
Sprawdź poniżej podane dane wyjściowe, które otrzymaliśmy od wykonania powyższego programu:
Jak znaleźć i zdobyć elementy HTML za pomocą ID za pośrednictwem JavaScript
Większość programistów JavaScript wykorzystywała getElementById () metoda znalezienia i uzyskiwania elementów HTML o unikalnych identyfikatorach. Jeśli zdałeś identyfikator, który nie należy do żadnego elementu HTML, metoda getElementById () wyświetli wartość zerową.
Składnia metody getElementById ()
dokument.getElementById (elementId)Tutaj "ElementId”Reprezentuje unikalny identyfikator elementu HTML, który chcesz znaleźć i uzyskać w kodzie JavaScript.
Przykład: Znajdź i zdobądź elementy HTML według ID przez JavaScript
W poniższym przykładzie dodamy elementy HTML, takie jak nagłówek z
tag i trzy elementy akapitu z
etykietka. Zauważ, że dodaliśmy również „IDS„Z elementami akapitu:
To jest Linuxhint.com
Znajdź i zdobądź elementy HTML według ID w JavaScript
To jest program JavaScript, który wykorzystuje metodę „getElementSById”
W następnym kroku znajdziemy i otrzymamy element o identyfikatorze „P1”Za pomocą„dokument.getElementById ()" metoda. Po ding zmieniemy zawartość odzyskanego elementu HTML:
Jak znaleźć i zdobyć elementy HTML według klasowej nazwy za pośrednictwem JavaScript
„„getElementsByClassName ()”Metoda jest stosowana do znajdowania i uzyskiwania elementów HTML o tej samej klasie. Kiedy spróbujesz uzyskać element HTML, wykorzystując nazwę klasy, interpreter JavaScript zwróci wszystkie obiekty należące do tej samej klasy. Następnie możesz wykonywać określone operacje na tych elementach HTML.
Składnia metody getelementsBassName ()
dokument.getElementsByClassName (klasę)Tutaj "Nazwa klasy”Reprezentuje nazwę klasy elementów HTML, które musisz znaleźć i zdobyć w swoim programie.
Przykład: Znajdź i zdobądź elementy HTML według nazwy klasy za pośrednictwem JavaScript
W poniższym przykładzie dodaliśmy nagłówek i niektóre elementy akapitu do nazwy klasowej „C1”:
To jest Linuxhint.com
Znajdź i zdobądź elementy HTML według nazwy klasy w JavaScript
tekst w pierwszym Paragrpah
tekst w drugim akapicie
Następnie szukamy elementów HTML, które mają „C1„Jako ich klasa za pomocą metody getEntsBassName () i będzie przechowywać kolekcje obiektów w„A”:
Oto dane wyjściowe, które otrzymaliśmy od wykonywania powyższego programu JavaScript:
Jak znaleźć i zdobyć elementy HTML przez selektor CSS za pośrednictwem JavaScript
W html, QuerySelelection () Metoda zwraca statyczny obiekt nodelisty, który zawiera zbiór elementów dziecięcych elementu dopasowanego do określonych selektorów CSS. Liczby indeksu służą do znalezienia i uzyskania węzłów, zaczynając od 0.
Składnia metody QuerySelelectorAll ()
element.querySelelectionAll (selektory)Metoda QuerySelectorAll () przyjmuje „Selektory„Jako argument; Ciąg DOM obejmuje jeden lub więcej prawidłowych selektorów CSS.
Przykład: Znajdź i zdobądź elementy HTML według selektora CSS za pośrednictwem JavaScript
W podgryzanym programie JavaScript zastosowaliśmy metodę QuerySeLelectall () do znalezienia i uzyskania akapitu elementów HTML o „mających” „C1„Jak nazwa ich klasy:
To jest Linuxhint.com
Znajdź i zdobądź elementy HTML według nazwy klasy w JavaScript
tekst w pierwszym Paragrpah
tekst w drugim akapicie
Sprawdź wyjście metody JavaScript QuerySelectorall ():
Wykonanie powyższego programu JavaScript wyświetli następujące dane wyjściowe:
Jak usunąć elementy HTML za pomocą JavaScript za pomocą metody remove ()
JavaScript „usunąć()„Metoda jest stosowana do usunięcia określonego elementu HTML z modelu obiektu Dokument (DOM).
Składnia metody remove ()
węzeł.usunąć()Tutaj, "węzeł”Reprezentuje element HTML, który chcesz usunąć przez JavaScript.
Przykład: Usuń elementy HTML za pomocą JavaScript za pomocą metody remove ()
W poniższym daniu dodaliśmy nagłówkowy element HTML, akapit
oraz element, który obejmuje dwa akapity i jako węzły dziecięce:
To jest Linuxhint.com
Dodawanie elementów HTML przez JavaScript.
To jest główny akapit.
To jest drugi akapit.
Następnie dodamy przycisk i dołączymy „na kliknięcie”Handler zdarzeń. Zgodnie z następującym kodem, kiedy klikniemy „Usuń element”Przycisk wywoła„myFunction ()" metoda:
W "myFunction ()„Metoda, po pierwsze, używamy„dokument.GetElementById„Aby znaleźć element, który chcemy usunąć, określając jego„ID”Następnie wywołamy„usunąć()" metoda:
Poniższe dane wyjściowe oznacza, że „P1„HTML jest usuwany z naszego programu JavaScript z pomocą„usunąć()”Funkcja:
Jak usunąć elementy HTML dziecięce za pomocą JavaScript za pomocą metody revelakeChild ()
W JavaScript „The„revunchild ()”Jest wykorzystywany do usunięcia określonego węzła HTML dziecka z elementu HTML.
Składnia metody resvechild ()
ParentNode.RevelSchild (ChildNode)W tym przypadku nadrzędny jest elementem HTML, który określliśmy jako „rodzic„Węzeł, a ChildNode to element HTML, który chcemy usunąć z elementu nadrzędnego.
Usuń dziecięce elementy HTML za pomocą JavaScript za pomocą metody revundechild ()
W tym przykładzie postaramy się usunąć element dziecka naszego zdefiniowanego elementu HTML:
To jest Linuxhint.com
Dodawanie elementów HTML przez JavaScript.
To jest główny akapit.
To jest drugi akapit.
Aby usunąć element dziecięcy, przede wszystkim musisz stworzyć „rodzic”Element HTML i określ element HTML działający jako rodzic w kodzie JavaScript. W naszym przypadku dodaliśmy „div1”:
Jak widać, że element dziecięcy elementu HTML jest pomyślnie usuwany:
Wniosek
Model Object Document (DOM) w JavaScript to interfejs programisty, który pozwala manipulować projektem, strukturą i treścią elementów HTML Twojej witryny. W tym spisie omówiono manipulowanie elementami HTML za pośrednictwem JavaScript. Wyjaśniliśmy również procedurę dodawania elementów HTML, dołączania elementów HTML, zmiany zawartości elementów HTML, znalezienia i uzyskiwania elementów HTML oraz usuwania elementów HTML i ich węzłów dziecięcych. Ponadto, przedstawiono również przykłady związane z appendChild (), insertBefore (), właściwość innerHTML, getElementById (), getElementsByClassName (), querySelectorAll (), usuń () i resveechild ().