DOM
Document Object Model
Le Document Object Model ou DOM (pour modèle objet de document) est une représentation et une interface de programmation pour les documents HTML. Il correspond à une représentation structurée du document sous forme d'un arbre et définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu.
Chaque noeud possède des propriétés et des méthodes, et peut être associé à des événements.
La structure étant arborescente, on dispose de toutes les méthodes associées aux arbres, pour naviguer dans l'arbre, pour accéder à un noeud parent, enfant ou frère, pour accéder aux enfants, aux descendants, etc...
Si on se contente ici de la partie "représentation / accès" :
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
</body>
</html>
Exploration
Dans l'inspecteur
L'exploration du DOM peut se faire à l'aide de l'inspecteur de votre navigateur (F12 ou clic droit > Inspecter).
Dans la console javascript
Dans la "Console javascript", on peut accéder à la structure du DOM, et explorer les noeuds en javascript.
// Accéder à un noeud
let node = document.children[0].children[1]...
node.parentNode // parent
node.children
node.innerHTML // contenu
node.textContent // texte
En python
En python, la librairie beautifulsoup permet de parcourir et modifier le DOM d'une page HTML.
pip install beautifulsoup4 requests
# ou bien
# uv add beautifulsoup4 requests
from bs4 import BeautifulSoup, Tag, NavigableString
import requests
def affiche_dom(node, indent=0):
prefix = ' ' * indent
if isinstance(node, Tag):
print(f"{prefix}{node.name}")
for child in node.children:
affiche_dom(child, indent + 2)
def main():
url = "https://www.gnu.org/philosophy/philosophy.html"
response = requests.get(url)
soup = BeautifulSoup(response.content, "html.parser")
# parcourir l'arbre de manière récursive
affiche_dom(soup.html)
if __name__ == "__main__":
main()
Référence : https://www.crummy.com/software/BeautifulSoup/bs4/doc/