<html><head><title>Comprendre le DOM</title><style type="text/css"> div, p { padding:5px; margin:5px; } div { border:1px solid #333; } .paraBold { font-weight: bold; }</style> <script type="text/javascript">function getHeritages(obj) { /* Recherche du prototype initial */ var proto=Object.getPrototypeOf(obj); /* Initialisation du tableau des héritages qui sera retourné */ var heritages=[]; /* boucle tant qu'un prototype est trouvé */ while (proto !== null) { /* Ajout du nom de prototype dans le tableau */ heritages[heritages.length]=proto.constructor.name; /* Recherche du prototype suivant dans la chaîne d'héritages */ proto=Object.getPrototypeOf(proto); }return heritages;}</script> </head><body> <h1>Comprendre le DOM</h1> <div id="container"> <p>Paragraphe 1</p> <div id="bloc"> <span class="span">Bloc</span> <p class="para">Paragraphe A dans bloc</p> <p class="para">Paragraphe B dans bloc</p> <p class="para paraBold">Paragraphe C dans bloc</p> </div> </div> <div id="dernier">Encore un div</div></body><script>console.log(document.getElementsByTagName("p"));console.log(document.getElementsByClassName("para"));console.log(document.getElementsByTagName("img"));console.log(document.getElementById("monID"));console.log(document.querySelectorAll("p.para"));console.log(document.querySelectorAll("div#bloc"));console.log(document.getElementById("bloc").getElementsByTagName("p"));</script></html>