Document Object Model: Difference between revisions

Revision as of 17:25, 1 August 2025

Latest revision as of 07:16, 29 August 2025

(One intermediate revision by one other user not shown)

Line 115:

== Manipulating the DOM tree ==

The DOM tree can be manipulated using JavaScript or other programming languages. Common tasks include navigating the tree, adding, removing, and modifying nodes, and getting and setting the properties of nodes. The DOM API provides a set of methods and properties to perform these operationsseement, such as <code>getElementById</code>, <code>createElement</code>, <code>appendChild</code>, and <code>innerHTML</code>.<syntaxhighlight lang="javascript">

// Create the root element

var root = document.createElement("root");

</syntaxhighlight>Another way to create a DOM structure is using the innerHTML property to insert HTML code as a string, creating the elements and children in the process. For example:<syntaxhighlight lang="javascript">

// Create a child element

var child = document.createElement("child");

</syntaxhighlight>Another method is to use a JavaScript library or framework such as [[jQuery]], [[AngularJS]], [[React (JavaScript library)|React]]lib, [[Vue.js]], etc. These libraries provide a more convenient, eloquent and efficient way to create, manipulate and interact with the DOM.

// Add the child element to the root element

root.appendChild(child);

</syntaxhighlight>Another way to create a DOM structure is using the innerHTML property to insert HTML code as a string, creating the elements and children in the process. For example:<syntaxhighlight lang="javascript">

document.getElementById("root").innerHTML = "<child></child>";

</syntaxhighlight>Another method is to use a JavaScript library or framework such as [[jQuery]], [[AngularJS]], [[React (JavaScript library)|React]], [[Vue.js]], etc. These libraries provide a more convenient, eloquent and efficient way to create, manipulate and interact with the DOM.

It is also possible to create a DOM structure from an XML or JSON data, using JavaScript methods to parse the data and create the nodes accordingly.

Line 133 ⟶ 125:

Creating a DOM structure does not necessarily mean that it will be displayed in the web page, it only exists in memory and should be appended to the document body or a specific container to be rendered.

In summary, creating a DOM structure involves creating individual nodes and organizing them in a hierarchical structure using JavaScript or other programming languages, and it can be done using several methods depending on the use case and the developerlanguageloper's preference.

==Implementations==

Line 149 ⟶ 141:

* [[Apache Xerces|Xerces]] is a collection of DOM implementations written in C++, Java and Perl

* [https://docs.python.org/3/library/xml.dom.html xml.dom] for [[Python (programming language)|Python]]

* XML for &lt;SCRIPT&gt; is a JavaScript-based DOM implementation<ref>{{cite web|url=httphttps://xmljs.sourceforge.net/|title=XML for <SCRIPT> Cross Platform XML Parser in JavaScript|access-date=23 September 2016}}</ref>

* [https://github.com/PhpGt/Dom PHP.Gt DOM] is a server-side DOM implementation based on [[libxml2]] and brings DOM level 4 compatibility<ref>{{cite web|url=https://php.gt/dom#features-at-a-glance|title=The modern DOM API for PHP 7 projects|date=5 December 2021}}</ref> to the [[PHP]] programming language

* [https://github.com/fgnass/domino/ Domino] is a Server-side (Node.js) DOM implementation based on Mozilla's dom.js. Domino is used in the [[MediaWiki]] stack with Visual Editor.