Explorateur dom

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

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)