1. Accueil
  2. Tous les snippets
  3. Snippets Javascript
  4. Explorateur dom

Explorateur dom

Soyez le premier à donner votre avis sur cette source.

Snippet vu 7 471 fois - Téléchargée 23 fois

Commenter

Contenu du snippet

Un petit programme bien utile qui donne les infos des éléments de votre page. L'essentiel y est. C'est un bon début pour ce qui veulent étudier le DOM

Source / Exemple : 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style>
  body
  {
  cursor : crosshair;
  }
  #infobulle
  {
  border : 1px solid black;
  position : absolute;
  font-size :10px;
  font-family : Arial; 
  background-color : #ccff66;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  opacity: 0.8;

  }
  </style>
 
  </head>
   <script>
  var objbull;
  var oldx = 0;
  var oldy = 0;
  var oldtarg = null;
  var bordure;
  function getinfo(e)
  {
  var txt = '';
  
  if (!e) e=window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ=e.srcElement;
	if(targ.Name){txt+="<u>Name :</u> "+targ.Name+"<br>";}
  if(targ.id){txt+="<u>Id :</u> "+targ.id+"<br>";}
  if(targ.tagName){txt+="<u>TagName :</u> "+targ.tagName+"<br>";}
  txt+="<center>---------------</center>";
  txt+="X : "+targ.offsetLeft +", Y : "+targ.offsetLeft+", L: "+targ.offsetWidth+", H: "+targ.offsetHeight+"<br>";
  var obj = targ;
  txt+="<u>Parent :</u>";
  
  var tmp = '';
  while(obj.parentNode)
  {
   if(obj.id){tmp= obj.tagName + "("+obj.id+")" + "> "+tmp;}else{tmp= obj.tagName+ "> "+tmp;}
   obj = obj.parentNode;
  }
  
  //targ.oldstyle = targ.style.border;
  //alert(targ.oldstyle);
  
  //targ.onmouseout = function () { targ.style.backgroundcolor="#333" = targ.oldstyle;targ.onmouseout = null;targ.oldstyle='';}
  //targ.style.border = "1px solid red";
  txt+=tmp+"<br>";
  txt+="<center>---------------</center>";
	var x = e.clientX;
	var y = e.clientY;
	if(x!=oldx || y!=oldy)
	{
	txt += "Souris X : "+x+", Souris Y : "+y;
	oldx = x;
	oldy = y;
	with(objbull.style)
	{
  left = e.clientX+5+"px";
  top = e.clientY+5+"px";
  }
  objbull.innerHTML = txt;
	}
	}
	
	
	function init()
	{
  document.body.innerHTML+="<div id=\"infobulle\"></div>";
  objbull = document.getElementById("infobulle");
  
  }
  
	onload = init;
  document.onmousemove = getinfo;
  </script>
  <body>
  <div id="cool" style="border : 1px solid black;">
   Super
   <div id="fort" coucou="bien">
   On essaie !
   <table id="tableau" style="border : 1px solid black;">
   <tbody>
   <tr><td>Case 1</td><td>Case 2</td></tr>
   <tr><td id="case">Case 3</td><td>Case 4</td></tr>
   </tbody>
   </table>
   </div>
   <div>
  </body>
</html>

Conclusion :


Je ne suis pas vraiment sur d'être très rigoureux. Néanmoins, je pense que ce code sera utile à ceux qui veulent s'initier au DOM !

A voir également

Ajouter un commentaire Commentaires
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
 2
17 janv. 2007 à 17:09
ce que j'adore le plus ==> les codes non commentés !!!
cs_roro06
Messages postés
732
Date d'inscription
jeudi 2 janvier 2003
Statut
Membre
Dernière intervention
29 octobre 2007
2 janv. 2007 à 15:15
Bonjour, et bonne année 2007 à toutes et à tous

tant qu'a utiliser le dom, dans init :
function init()
{
document.body.innerHTML+="

";
objbull = document.getElementById("infobulle");

}
j'aurais préféré voir :
var d=document.createElement("div")
d.id="infobulle"
document.getElementsByTagName("body")[0].appendChild(d)

Sinon l'idée est bonne
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (biskbart)