Retour à La Source • Tag: DOM • RSS http://www.ab-d.fr/tag/DOM/ Retour à La Source • Tag: DOM • RSS http://www.ab-d.fr/tag/DOM/ (c) 2010 fr Sat, 31 Jul 2010 14:50:55 +0100 Retour à La Source • Tag: DOM • RSS • version 1.0 noreply@ab-d.fr ( Benoit Asselin ) http://www.ab-d.fr/images/rss.gif Retour à La Source • Tag: DOM • RSS http://www.ab-d.fr/tag/DOM/ 90 30 Combinaison de document.getElementById et RegExp ( javascript, dom ) http://www.ab-d.fr/date/2008-12-14/ Sun, 14 Dec 2008 22:41:42 +0100 noreply@ab-d.fr ( Benoit Asselin ) On sent que la récession en France est très forte, j'ai moi-même du mal à joindre les 2 bouts... notamment à propos du temps qui m'est disponible pour rédiger ce poste (Travailler plus, pour gagner plus, qui disait !).
L'idée du code source du jour :

Rechercher dans une page (X)HTML, les IDentifiants correspondant à une expression régulière new RegExp. 

function getElementsByRegExpId(p_regexp, p_element, p_tagName) {
	p_element = p_element === undefined ? document : p_element;
	p_tagName = p_tagName === undefined ? '*' : p_tagName;
	var v_return = [];
	var v_inc = 0;
	for(var v_i = 0, v_il = p_element.getElementsByTagName(p_tagName).length; v_i < v_il; v_i++) {
		if(p_element.getElementsByTagName(p_tagName).item(v_i).id && p_element.getElementsByTagName(p_tagName).item(v_i).id.match(p_regexp)) {
			v_return[v_inc] = p_element.getElementsByTagName(p_tagName).item(v_i);
			v_inc++;
		}
	}
	return v_return;
}

// Exemple d'utilisation
var v_array = getElementsByRegExpId(/^test.+/);


]]> http://www.ab-d.fr/tag/DOM/ http://www.ab-d.fr/date/2008-12-14/ Firefox 3 et input type=file Nouvelle Formule ! ( upload, path, nsIDOMFile ) http://www.ab-d.fr/date/2008-07-12/ Sat, 12 Jul 2008 08:40:04 +0100 noreply@ab-d.fr ( Benoit Asselin ) De bon matin, je me lève, j'arrive sur une de mes applications en ligne, et là horreur ! cette dernière ne fonctionne plus sous Mozilla Firefox 3... Après analyse des petits messages d'erreurs, je me rends à l'évidence le formulaire <input type="file" /> ne se comporte plus de la même façon...

Les développeurs de Firefox 3 ont corrigé une petite faille de sécurité : Lorsque vous cliquez sur le bouton Parcourir le value de votre zone input type="file" contenait le nom du fichier ainsi que son chemin sur le disque dur, et bien aujourd'hui cela n'est plus, vous n'aurez plus que le nom du fichier.
D'ailleurs, Opera Browser se comporte aussi de la sorte, pour le moment Microsoft Internet Explorer et Apple Safari retournent toujours le chemin complet du fichier.

Une très bonne nouvelle s'accompagne de ce petit changement, vous pouvez à présent accéder aux données du fichier sélectionné par l'utilisateur en Javascript sans poster le formulaire grâce à l'objet FileList.

Un exemple vaut mieux qu'un long discours, voici une page qui vous permettra d'essayer cette nouvelle fonctionnalité (qui je le rappelle, ne fonctionne que sur Mozilla Firefox 3) : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>input type=file & Firefox 3</title>
</head>

<body>
	
<h1>input type=file & Firefox 3</h1>
	
<script type="text/javascript">
// <![CDATA[

function inputFileOnChange() {
	var v_console = '';
	v_console += 'value: ' + document.getElementById('fichier').value;
	v_console += '<br \/>';
	
	if(document.getElementById('fichier').files) {
		// Support: nsIDOMFile, nsIDOMFileList
		v_console += 'files.length: ' + document.getElementById('fichier').files.length;
		v_console += '<br \/>';
		
		v_console += 'fileName: ' + document.getElementById('fichier').files.item(0).fileName;
		v_console += '<br \/>';
		
		v_console += 'fileSize: ' + document.getElementById('fichier').files.item(0).fileSize;
		v_console += '<br \/>';
		
		v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsDataURL();
//		v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsBinary();
//		v_console += 'data: ' + document.getElementById('fichier').files.item(0).getAsText();
		v_console += '<br \/>';
	};
	
	document.getElementById('console').innerHTML = v_console;
};

// ]]>
</script>
	
<div>
	<input type="file" name="fichier" id="fichier" onchange="inputFileOnChange();" />
	<br /><br />
	<code id="console">...console...</code>
</div>
	
</body>
</html>

Documentation officielle :
• http://developer.mozilla.org/en/docs/nsIDOMFile
• http://developer.mozilla.org/en/docs/nsIDOMFileList
• http://www.w3.org/TR/file-upload/



]]> http://www.ab-d.fr/tag/DOM/ http://www.ab-d.fr/date/2008-07-12/ insertAfter() avec insertBefore() et node.nextSibling (DOM Core Level 1) http://www.ab-d.fr/date/2008-02-23/ Sat, 23 Feb 2008 04:45:54 +0100 noreply@ab-d.fr ( Benoit Asselin ) La méthode element.insertBefore() permet d'insérer un nœud (node) enfant juste avant le nœud enfant de référence parmi un nœud parent.

noeudParent.insertBefore(noeudAInserer, noeudDeReference);


Il n'existe pas de méthode element.insertAfter() pour insérer un nœud après le nœud de reference. Pour contourner cette limitation, vous pouvez utiliser element.nextSibling, qui renverra le nœud suivant au nœud spécifié.

noeudParent.insertBefore(noeudAInserer, noeudDeReference.nextSibling);


Grâce au code source ci-dessous, vous pouvez ajouter la méthode element.insertAfter() et ainsi l'utiliser aussi simplement que element.insertBefore().

Node.prototype.insertAfter = function(noeudAInserer, noeudDeReference) {
	if(noeudDeReference.nextSibling) {
		return this.insertBefore(noeudAInserer, noeudDeReference.nextSibling);
	} else {
		return this.appendChild(noeudAInserer);
	}
}

Attention: le code ci-dessus ne fonctionne pas sous Internet Explorer... pour ce faire, vous devez utiliser une simple fonction Javascript.



]]> http://www.ab-d.fr/tag/DOM/ http://www.ab-d.fr/date/2008-02-23/ Include CSS Stylesheet en DOM (Document Object Model) http://www.ab-d.fr/date/2007-09-18/ Tue, 18 Sep 2007 00:00:00 +0100 noreply@ab-d.fr ( Benoit Asselin ) function includeCSS(p_file) { var v_css = document.createElement('link'); v_css.rel = 'stylesheet' v_css.type = 'text/css'; v_css.href = p_file; document.getElementsByTagName('head')[0].appendChild(v_css); }


]]> http://www.ab-d.fr/tag/DOM/ http://www.ab-d.fr/date/2007-09-18/