Een document-object vertegenwoordigt het document dat in dat venster wordt weergegeven. Het Document-object heeft verschillende eigenschappen die verwijzen naar andere objecten die toegang tot en wijziging van documentinhoud mogelijk maken. In dit artikel zullen we HTML DOM begrijpen.
- HTML DOM-concept
- Wat de HTML DOM is
- Wat de HTML DOM NIET is
- Waar de DOM vandaan kwam
- Eigenschappen van HTML DOM
- HTML-elementen zoeken
HTML DOM-concept
De manier waarop een gedocumenteerde inhoud wordt geopend en gewijzigd, wordt de Document Object Model of DOM. De objecten zijn hiërarchisch georganiseerd. Deze hiërarchische structuur is van toepassing op de organisatie van objecten in een webdocument.
- Vensterobject & min Top van de hiërarchie. Het is het uiterste element van de objecthiërarchie.
- Documentobject & minus Elk HTML-document dat in een venster wordt geladen, wordt een documentobject. Het document bevat de inhoud van de pagina.
- Formulierobject & min Alles ingesloten in de… -tags stelt het formulierobject in.
- Formulierbesturingselementen & minus Het formulierobject bevat alle elementen die voor dat object zijn gedefinieerd, zoals tekstvelden, knoppen, keuzerondjes en selectievakjes.
Wat de HTML DOM is
Het Document Object Model is een programmeer-API voor documenten. Het objectmodel zelf lijkt sterk op de structuur van de documenten die het modelleert. Beschouw bijvoorbeeld deze tabel, afkomstig uit een HTML-document:
| Schaduwrijke Grove | Eolisch |
| Over de rivier, Charlie | Dorian |
Wat de HTML DOM NIET is
Dit gedeelte is bedoeld om een nauwkeuriger begrip van het documentobjectmodel te geven door het te onderscheiden van andere systemen die er misschien op lijken.
Hoewel het documentobjectmodel sterk werd beïnvloed door dynamische HTML, implementeert het in niveau 1 niet alle dynamische HTML. Met name evenementen zijn nog niet gedefinieerd. Niveau 1 is ontworpen om een stevige basis te leggen voor dit soort functionaliteit door een robuust, flexibel model van het document zelf te bieden.
Het documentobjectmodel is geen binaire specificatie. Document Object Model-programma's die in dezelfde taal zijn geschreven, zijn compatibel met broncode op alle platforms, maar het Document Object Model definieert geen enkele vorm van binaire interoperabiliteit.
Het Document Object Model is geen manier om objecten in XML of HTML te behouden. In plaats van te specificeren hoe objecten in XML kunnen worden weergegeven, specificeert het documentobjectmodel hoe XML- en HTML-documenten worden weergegeven als objecten, zodat ze kunnen worden gebruikt in objectgeoriënteerde programma's.
Het Document Object Model is geen set datastructuren, het is een objectmodel dat interfaces specificeert. Hoewel dit document diagrammen bevat die ouder / kind-relaties tonen, zijn dit logische relaties die zijn gedefinieerd door de programmeerinterfaces, geen representaties van bepaalde interne gegevensstructuren.
Het documentobjectmodel definieert niet 'de ware innerlijke semantiek' van XML of HTML. De semantiek van die talen wordt bepaald door de talen zelf.
pass by value pass door referentie java
Het Document Object Model is een programmeermodel dat is ontworpen om deze semantiek te respecteren. Het documentobjectmodel heeft geen gevolgen voor de manier waarop u XML- en HTML-documenten schrijft. Elk document dat in deze talen kan worden geschreven, kan in het documentobjectmodel worden weergegeven.
Het Document Object Model is, ondanks zijn naam, geen concurrent van het Component Object Model (COM). COM is, net als CORBA, een taalonafhankelijke manier om interfaces en objecten te specificeren. Het Document Object Model is een set interfaces en objecten die zijn ontworpen voor het beheren van HTML- en XML-documenten. De DOM kan zijngeïmplementeerd met behulp van taalonafhankelijke systemen zoals COM of CORBA het kan ook worden geïmplementeerd met behulp van taalspecifieke bindingen zoals de Java- of ECMAScript-bindingen die in dit document worden gespecificeerd.
Waar het documentobjectmodel vandaan kwam
Het Document Object Model is ontstaan als een specificatie waarmee JavaScript-scripts en Java-programma's kunnen worden overgedragen tussen webbrowsers. Dynamische HTML was de directe voorloper van het Document Object Model, en er werd oorspronkelijk grotendeels aan gedacht in termen van browsers.
Toen de Werkgroep Document Object Model werd gevormd, werd deze echter ook vergezeld door leveranciers in andere domeinen, waaronder HTML- of XML-editors en documentopslagplaatsen. Verschillende van deze leveranciers hadden met SGML gewerkt voordat XML als resultaat werd ontwikkeld. Het Document Object Model is beïnvloed door SGML Groves en de HyTime-standaard. Sommige van deze leveranciers hadden ook hun eigen objectmodellen ontwikkeld om documenten te verstrekkenprogrammeer-API's voor SGML / XML-editors of documentopslagplaatsen, en deze objectmodellen hebben ook het documentobjectmodel beïnvloed.
Eigenschappen van HTML DOM
Laten we eens kijken naar de eigenschappen van de documentobjecten die kunnen worden geopend en gewijzigd door het documentobject.
- Vensterobject: Window Object staat altijd bovenaan de hiërarchie.
- Document object: Wanneer een HTML-document in een venster wordt geladen, wordt het een documentobject.
- Formulier object: Het wordt vertegenwoordigd door het formulier tags.
- Link Objecten: Het wordt vertegenwoordigd door koppeling tags.
- Ankerobjecten: Het wordt vertegenwoordigd door een href tags.
- Formulier besturingselementen: Formulier kan veel besturingselementen bevatten, zoals tekstvelden, knoppen, keuzerondjes en selectievakjes, enz.
Methoden van documentobject :
- write ('string'): schrijft de gegeven string in het document.
- getElementById (): geeft het element terug met de opgegeven id-waarde.
- getElementsByName (): geeft alle elementen terug met de opgegeven naamwaarde.
- getElementsByTagName (): geeft alle elementen terug met de opgegeven tagnaam.
- getElementsByClassName(): geeft alle elementen terug met de opgegeven klassenaam.
HTML-elementen zoeken
Als u HTML-elementen met JavaScript wilt openen, moet u de elementen eerst vinden.
U kunt dit op een aantal manieren doen:
- HTML-elementen zoeken op id
- HTML-elementen zoeken op tagnaam
- HTML-elementen zoeken op klassenaam
HTML-element zoeken op ID
De eenvoudigste manier om een HTML-element in de DOM te vinden, is door het element-id te gebruiken.
Voorbeeld
HTML-elementen zoeken op tagnaam
In dit voorbeeld wordt het element met id = ”main” gevonden en vervolgens alles gevonden
elementen binnen 'main':
Hiermee komen we aan het einde van dit HTML DOM-artikel. Ik hoop dat je inzicht hebt gekregen in de verschillende aspecten van de HTML DOM, het Document Object Model.
hoe de lengte van de array in javascript te krijgen
Bekijk onze die wordt geleverd met live training onder leiding van een instructeur en real-life projectervaring. Deze training maakt je bedreven in vaardigheden om met back-end en front-end webtechnologieën te werken. Het omvat training over webontwikkeling, jQuery, Angular, NodeJS, ExpressJS en MongoDB.
Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van de 'HTML-afbeeldingen' blog en we nemen zo spoedig mogelijk contact met u op.