Reprezentacja dokumentu HTML w przeglądarce internetowej jest traktowana jako drzewo html DOM. Jest to seria obiektów i definiuje strukturę strony internetowej.
Przegląd
Witamy w innym ekscytującym poście na blogu z serii programowania JavaScript. W tym artykule dotkniemy bardzo podstawowej, ale niezbędnej koncepcji tworzenia stron internetowych. Tak, zamierzamy omówić model Document Obiekt w JavaScript. W przeszłości opublikowaliśmy samouczki JavaScript, które są obowiązkowe do rozpoczęcia rozwoju za pomocą języka JavaScript. Dlatego sugerujemy dokładnie przeczytanie tego postu na blogu, aby nie przegapić niczego związanego z tą ważną koncepcją. Rozpocznijmy ten przewodnik i dowiedz się What Is Dom w JavaScript , DOM właściwości i jak możesz z nim interakcja programatycznie. W tym przewodniku JavaScript omówimy następujące tematy:
- Co to jest model obiektu dokumentu (DOM)?
- poziomy DOM
- Jakie są właściwości DOM i jak uzyskać do nich dostęp?
Co to jest Model Object Document (DOM)?
DOM oznacza? Model obiektu Dokument (DOM) to reprezentacja strony internetowej w przeglądarce internetowej. Po prostu hierarchiczna reprezentacja elementów dokumentu HTML w przeglądarce jest znana jako model obiektu dokumentu. Powstaje w kształcie drzewa, który jest faktycznie generowany przez przeglądarkę internetową. Składa się z różnych węzłów, które są ze sobą połączone, tworząc kształt drzewa. Ponadto elementy DOM mają do nich atrybuty i zdarzenia. W rzeczywistości DOM to interfejs programowania, który formułuje logiczną strukturę strony internetowej i decyduje o sposobu dostępu do elementów strony. Zasadniczo JavaScript nie rozpoznaje znaczników HTML, takich jak tytuł, H1 i itp. Dlatego po załadowaniu dokumentu HTML do przeglądarki internetowej utworzono DOM, co pozwala JavaScript zrozumieć elementy dokumentu.
Poziomy DOM
W tej sekcji pokazuje różne poziomy DOM. Po pierwsze, w przeglądarce znajduje się obiekt okienny, który jest zawsze na górze, a następnie jest węzeł dokumentów. Rzućmy okiem na obraz poniżej:
Cóż, możesz zobaczyć elementy DOM na powyższym zdjęciu. Okno i dokument to najwyższe obiekty przeglądarki, a następnie mamy element HTML jako root. Idąc dalej, mamy węzły głowy i ciała, węzeł tytułowy należy do węzła głowy, a węzeł ciała zawiera wszystkie węzły, które są renderowane i widoczne w przeglądarce internetowej. Ponadto elementy ciała zawierają atrybuty, które możemy zobaczyć na obrazie, takie jak znacznik kotwicy zawierający atrybut „HREF”. Podobnie inne węzły DOM zawierają różne atrybuty, takie jak IMG, meta i wiele innych.
Jakie są właściwości DOM i jak uzyskać do nich dostęp?
Do tej pory wymyśliliśmy odpowiedź na poziomy DOM na poziomie JavaScript i DOM, a także przeszliśmy przez węzły DOM. W tej sekcji przejdziemy przez właściwości DOM i zobaczymy, jak możemy z nimi oddziaływać. Każdy element DOM ma połączoną wartość, taką jak znacznik „P”, ma właściwość tekstową, znacznik IMG ma obraz i tak dalej. Metody JavaScript są używane do dostępu do wartości węzłów. Ponadto możesz dodać/usunąć słuchaczy zdarzeń do elementów DOM. Możesz znaleźć następujące właściwości DOM : InnerHtml : Ta właściwość służy do ustawiania lub pobierania zawartości HTML węzła DOM.
let htmlContent = document.getElementById("customID").innerHTML;
Innertext : Użyj tej właściwości DOM, aby uzyskać dostęp lub ustawić treść tekstu elementu HTML.
let textualContent = document.getElementById("customID").innerText;
Paretellement : Możesz użyć tej właściwości, aby uzyskać dostęp do węzła nadrzędnego elementu.
let parentNode = document.getElementById("customID").parentElement.nodeName;
Styl : Zaktualizuj atrybut stylu elementu.
let styleAttr = document.getElementById("customID").style.color = "red";
Tytuł : Użyj tej właściwości, aby zaktualizować element tytułowy DOM.
document.getElementById("customID").title= "this is a web page";
Poniżej przedstawiono niektóre metody, które możemy użyć do interakcji z JavaScript DOM: addEventListener () : Ta metoda DOM służy do podłączenia obsługi zdarzeń do elementu.
document.getElementById("customID").addEventListener("click", customFunction);
getAttribute () : Ta metoda DOM służy do przymocowania obsługi zdarzeń do elementu.
document.getElementById("customID").addEventListener("click", customFunction);
getElementById () : Metoda uzyskania określonego elementu z podanym „id”.
let element = document.getElementById("myID");
QuerySelelect () : Użyj tej metody, aby uzyskać pierwszy element dziecięcy, który jest dopasowany do selektora CSS.
document.getElementById("myID").querySelector(".first").innerHTML = "change the value";
ToString () : Możesz użyć tej metody do konwersji elementu na ciąg. Podobnie istnieje wiele innych metod i właściwości, które można zbadać.
Wniosek
Kończymy ten samouczek JavaSxcript tutaj z nadzieją, że dobrze rozumiesz What Is Dom w JavaScript . Przeszliśmy również przez DOM, poziomy DOM, HTML DOM Tree i właściwości DOM . Ten post na blogu jest wysoce niezbędny dla początkujących, którzy chcą mieć silny przyczepność do koncepcji JavaScrit. Ponadto istnieją inne istotne artykuły, które można znaleźć w sekcji „patrz także”.
Połącz się z nami
Wreszcie Containerize.com oferuje trwające samouczki JavaScript na różne ekscytujące tematy. Możesz pozostać w pętli, obserwując nas na naszych platformach społecznościowych, w tym Facebook, LinkedIn i Twitter.
Zadać pytanie
Możesz poinformować nas o swoich pytaniach lub zapytaniach na naszym forum.
FAQ
Czego jest używane w JavaScript? Możesz odwiedzić ten link, aby uzyskać szczegółową odpowiedź na to pytanie.
Zobacz też
- Co jest obiecujące w JavaScript? |. Samouczek JavaScript
- Co to jest obliczenia bez serwera? |. Architektura bez serwera
- Co to jest wielokrotność? |. Dlaczego podejście wielozadaniowe?
- Co to jest AI | Generatywna sztuczna inteligencja
- Czego czeka async w JavaScript? |. Przewodnik JavaScript
- Jak korzystać z Chatgpt w VSCode | Kod rozszerzenia VSCode GPT
- Co to jest Openai Chatbot GPT-3 | Chatgpt an AI Revolution
- Wprowadzenie do sztucznej inteligencji | Co to jest AI?