Video: HTML Crash Course For Absolute Beginners 2024
Door John Paul Mueller
JavaScript gebruikt objecten op grote schaal. Weten welke objecten te gebruiken en wanneer zijn belangrijke onderdelen van het werken met JavaScript. Door de Browser-, Core Document Object Model (DOM) en HTML DOM-objecten te kennen, kunt u een aanzienlijk deel van elke standaardtoepassing (en veel eenvoudige toepassingen) bouwen. Dit zijn de meest gebruikte JavaScript-objecten, dus houd ze binnen handbereik.
JavaScript-browserobjecten gebruiken om de toepassingsomgeving te beheren
JavaScript-browserobjecten maken het mogelijk om de toepassingsomgeving te ontdekken en te wijzigen. Door te weten waar de gebruiker heen is gegaan, waar de gebruiker zich nu bevindt en waar u de gebruiker naartoe kunt nemen, kunt u effectief de applicatiestroom regelen. Natuurlijk is het belangrijk om te weten welk schermformaat de gebruiker heeft, zodat u gegevens kunt presenteren op een manier die de fysieke eigenschappen van het apparaat van de gebruiker weerspiegelt.
De volgende tabel bevat een aantal van de interessantere JavaScript-browseropties.
| Object | Beschrijving |
|---|---|
| geschiedenis | biedt de mogelijkheid om URL's die zijn opgeslagen
in de geschiedenis van de browser te onderzoeken en te verplaatsen. U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / obj_history. adder. |
| locatie | Bevat informatie over de huidige URL. Dit object bevat ook
biedt de mogelijkheid om taken uit te voeren zoals het laden van een nieuwe pagina of het opnieuw laden van de huidige pagina. U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / obj_location. adder. |
| navigator | Bevat informatie over de huidige browser. Als u bijvoorbeeld
gebruikt, kunt u het browsertype bepalen en aangeven of de browser cookies heeft ingeschakeld. U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / obj_navigator. adder. |
| scherm | Specificeert de fysieke kenmerken van het apparaat dat wordt gebruikt om
de pagina weer te geven, inclusief paginahoogte, breedte en kleurdiepte. U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / obj_screen. adder. |
| venster | Biedt toegang tot het browservenster zodat u
taken kunt uitvoeren zoals het weergeven van berichtvakken. Wanneer u werkt met pagina's die frames bevatten, maakt de browser een venster voor het gehele HTML-document en een ander venster voor elk frame.U kunt een complete lijst zien van de methoden en eigenschappen die aan dit -object zijn gekoppeld op www. w3schools. com / jsref / obj_window. adder. |
Core DOM-objecten gebruiken om toepassingsinhoud te beheren
Het doel van elke JavaScript-toepassing is inhoud beheren. Dit betekent het toevoegen, verwijderen en bewerken van het HTML-document dat de verschillende elementen bevat die de inhoud structureren en ondersteunen. Deze objecten bieden toegang tot alle documentdetails met betrekking tot inhoud.
| Object | Beschrijving |
|---|---|
| Attr | Biedt toegang tot afzonderlijke kenmerken in het document.
U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_attr. adder. |
| document | Geeft toegang tot het volledige document. U kunt dit object
gebruiken om elk deel van het document te openen. Bovendien kunt u met dit object informatie direct op de pagina weergeven en andere taken met betrekking tot de gebruikersinterface uitvoeren. U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_core_document. adder. |
| Element | Bevat een afzonderlijk documentelement van elk type dat
wordt ondersteund als XML. Dit object biedt toegang tot kenmerken via het Attr-object en eigenschappen via het knooppuntobject. U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_element. adder. |
| Evenementen | Ondersteunt toegang tot bestaande evenementen en het maken van nieuwe.
U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_event. adder. |
| HTMLElement | Bevat een afzonderlijk HTML-documentelement, zoals een
-paragraaf of een besturingselement. Gebruik de Element - en knooppuntobjecten om toegang te krijgen tot elementkenmerken en -eigenschappen. U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_all. adder. |
| Knooppunt | Bepaalt de bijzonderheden van een gegeven knooppunt, waaronder
het document als geheel, een element in het document en een -kenmerk dat wordt geleverd als onderdeel van een element, tekst en opmerkingen. U ziet een complete lijst van de methoden en eigenschappen die bij dit object horen op www. w3schools. com / jsref / dom_obj_node. adder. |
| NodeFilter | Geeft aan welke knooppunten worden weergegeven als onderdeel van een NodeIterator die wordt gebruikt om de lijst met knooppunten
in een document te doorlopen. U kunt een volledige lijst met de methoden en eigenschappen van dit object bekijken op // developer. mozilla. org / en-US / docs / DOM / NodeFilter. |
| NodeIterator | Biedt een methode voor het verkrijgen van een lijst met knooppunten binnen een
-document. Als u de lijst met knooppunten doorloopt, kunt u specifieke knooppunten vinden en ermee communiceren. U vindt bijvoorbeeld alle de tag-knooppunten en voegt een bepaald attribuut toe. U kunt een volledige lijst van de methoden en eigenschappen van dit object bekijken op // developer.mozilla. org / en-US / docs / DOM / NodeIterator. |
| NodeList | Bevat een geordende lijst van alle knooppunten in het document
of in een bepaald gebied van het document. U kunt een volledige lijst met de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_nodelist. adder. |
| NamedNodeMap | Bevat een ongeordende lijst van alle knooppunten in het document
of in een bepaald gebied van het document. U kunt een volledige lijst met de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_namednodemap. adder. |
HTML-DOM-objecten gebruiken om structuur te beheren
Het organiseren van de informatie die de gebruiker op het scherm ziet in een samenhangende presentatie met JavaScript, is belangrijk. De gebruiker zou de HTML-documentstructuur moeten zien, maar de structuur zou de inhoud moeten ondersteunen - het zou geen aandacht naar zichzelf moeten vragen. Wanneer u met een pagina werkt, omvat de structuur alles, van tabellen tot bedieningselementen die worden gebruikt om te communiceren met en de inhoud te beheren die de gebruiker het meest geïnteresseerd is. De volgende HTML DOM-objecten helpen u bij het uitvoeren van deze taak bij het werken met JavaScript.
| Object | Beschrijving |
|---|---|
| Document | Biedt toegang tot alle elementen van een volledige pagina. Elke
pagina die in een browser wordt geladen, wordt een Document-object dat u opent met het trefwoord document. U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_document. adder. |
| Gebeurtenis | Hiermee wordt interactie mogelijk met de gebeurtenissen en gebeurtenishandlers
die aan een pagina zijn gekoppeld. Aan elk elementtype zijn specifieke gebeurtenissen gekoppeld, zoals de klikgebeurtenis die is gekoppeld aan het -knoopobject. U kunt een volledige lijst met de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_event. adder. |
| HTMLElement | Biedt een basisklasse waaruit alle HTML-elementen zijn afgeleid.
Deze basisklasse definieert de eigenschappen en methoden die alle HTML -elementen bieden. U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_all. adder. |
| Anker | Vertegenwoordigt een HTML-hyperlink. U kunt een volledige lijst van
de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_anchor. adder. |
| Area | Definieert het gebied binnen een HTML image map die wordt gebruikt om aan te maken voor een grafisch element. U kunt een volledige lijst met de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_area. adder. |
| Base | Specificeert het standaardadres of een standaarddoel voor alle links
op een pagina. U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_base. adder. |
| Tekst | staat voor het gedeelte
van een pagina, inclusief alle elementen in die tag . U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www.w3schools. com / jsref / dom_obj_body. adder. |
| Knop | vertegenwoordigt een knop op een pagina. Dit object is specifiek
gekoppeld aan de tag, in plaats van de tagvorm van . U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_pushbutton. adder. |
| Formulier | Vertegenwoordigt een formulier en bevat alle elementen binnen dat formulier
. U kunt een volledige lijst van de methoden en eigenschappen zien die aan dit object zijn gekoppeld op www. w3schools. com / jsref / dom_obj_form. adder. |
| Frame en IFrame | Vertegenwoordigt een frame (de
tag) of een inline frame (de |