HTML DOM

manual

Joost van Meeteren


HTML DOM - links

digitalplace.nl - HTML DOM.

w3schools.com - HTML DOM Tutorial.

nl.wikipedia.org - Document Object Model.


HTML DOM - Introduction

The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. The W3C DOM standard is separated into 3 different parts: Core DOM - standard model for any structured document, XML DOM - standard model for XML documents, HTML DOM - standard model for HTML documents. ... The XML DOM defines the objects and properties of all XML elements, and the methods to access them. ... The HTML DOM defines the objects and properties of all HTML elements, and the methods to access them. In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

See w3schools.com - HTML DOM Introduction.


HTML DOM - Nodes

According to the W3C HTML DOM standard, everything in an HTML document is a node (= knooppunt): ... The HTML DOM views HTML documents as tree structures. The structure is called a Node Tree: ... With the HTML DOM, all nodes in the tree can be accessed by JavaScript. All HTML elements (nodes) can be modified, and nodes can be created or deleted. ... The nodes in the node tree have a hierarchical relationship to each other. The terms parent, child, and sibling are used to describe the relationships. Parent nodes have children. Children on the same level are called siblings (brothers or sisters). In a node tree, the top node is called the root. Every node has exactly one parent, except the root (which has no parent). A node can have any number of children. Siblings are nodes with the same parent.

See w3schools.com - HTML DOM Nodes.


HTML DOM - Methods

Methods are actions you can perform on nodes (HTML Elements). The HTML DOM can be accessed with JavaScript (and other programming languages). All HTML elements are defined as objects, and the programming interface is the object methods and object properties. A method is an action you can do (like add or modify an element). A property is a value that you can get or set (like the name or content of a node). ...

Some commonly used HTML DOM methods: getElementById(id) - get the node (element) with a specified id; appendChild(node) - insert a new child node (element); removeChild(node) - remove a child node (element).

Some commonly used HTML DOM properties: innerHTML - the text value of a node (element); parentNode - the parent node of a node (element); childNodes - the child nodes of a node (element); attributes - the attributes nodes of a node (element).


Een voorbeeld met 'getElementById' - uitvoer:

Tekst die via 'getElementById' in een Javascript opnieuw wordt getoond.


Een voorbeeld met 'getElementById' - code:

See w3schools.com - HTML DOM Methods.


HTML DOM - Properties

The HTML DOM can be accessed with JavaScript (and other programming languages). The programming interface of the DOM is defined by methods and properties. A method is an action you can do (like add or delete a node). A property is a value that you can get or set (like the name or content of a node).

The easiest way to get the content of an element is by using the innerHTML property. The innerHTML property is useful for getting or replacing the content of HTML elements.


Een voorbeeld met 'innerHTML' - uitvoer:

Tekst die via 'innerHTML' in een Javascript opnieuw wordt getoond.

Hier wordt bovenstaande tekst opnieuw getoond:


Een voorbeeld met 'innerHTML' - code:

See w3schools.com - HTML DOM Properties.


HTML DOM - Access

Accessing an HTML element is the same as accessing a Node. You can access an HTML element in different ways: By using the getElementById() method; By using the getElementsByTagName() method; By using the getElementsByClassName() method. ...


Een voorbeeld met 'getElementById()' - uitvoer:

Voorbeeld met de 'getElementById() method'.


Een voorbeeld met 'getElementById()' - code:

See w3schools.com - HTML DOM Access.


Een voorbeeld met 'getElementsByTagName()' - uitvoer:

Voorbeeld met de 'getElementsByTagName() method'.


Een voorbeeld met 'getElementsByTagName()' - code:

See w3schools.com - HTML DOM Access.


Een voorbeeld met 'getElementsByClassName()' - uitvoer:

Voorbeeld met 'getElementsByClassName() method'.


Een voorbeeld met 'getElementsByClassName()' - code:

See w3schools.com - HTML DOM Access.


Joost De WebMaker
2002-2024 © Joost van Meeteren
Laatste update website: vrijdag 6 december 2024