 |
Bienvenue sur le forum officiel de les-forums.com.
L'apprentissage des bases du HTML requises pour la personnalisation des forums concerne le sous-forum Programmation, tandis que les gros problèmes techniques sont à adresser au Support. La FAQ vous sera également très utile.
De plus, une lecture du bref règlement du forum pourra éviter bien des tracas.
Nous vous écoutons, soyez polis, patients et précis dans vos questions.
Pour suivre les informations officielles, suivez-nous en
ou via 
L'apprentissage des bases du HTML requises pour la personnalisation des forums concerne le sous-forum Programmation, tandis que les gros problèmes techniques sont à adresser au Support. La FAQ vous sera également très utile.
De plus, une lecture du bref règlement du forum pourra éviter bien des tracas.
Nous vous écoutons, soyez polis, patients et précis dans vos questions.
Pour suivre les informations officielles, suivez-nous en
ou via
 Programmation (165 topics, 2384 messages) Dernier message par Babaorum, le 24/07 à 10:20:29 |
Topic "
L'homme n'est qu'une machine |
Explorateur de DOM
Pour ceux que ça intéresse, je me suis bricolé un petit explorateur de DOM sommaire en utilisant le DOM HTML W3C, quelques fonctions de DOM HTML propriétaire de MSIE et du Javascript. Un peu de style pour arranger l'apparence.
Il ne fonctionne qu'avec IE pour le moment, il faudrait que je recode en pur DOM W3C pour qu'il passe aussi sur Mozilla et autres navigateurs Gecko (cela dit pour Gecko il y a déjà un explorateur de DOM très bien fait). Il analyse un objet du DOM par son ID, celui d'un DIV d'exemple au-dessus du formulaire est préentré (modifier la fonction Javascript init() ainsi que le code HTML pour mettre autre chose). "Afficher en HTML" affiche toutes les propriétés directes en HTML, "Afficher en texte pur" affiche une liste de clés propriété=valeur qui est facilement exportable sous d'autres applis (Excel entre autre). J'ajouterai peut-être plus tard des fonctions directes d'exportation sous Excel ou Word ou dans un fichier de texte en utilisant la plateforme Windows Scripting Host (contrôles COM ActiveX), mais il faudra sans doute que je recode mon Javascript en VBScript ou JScript (je préfèrerais la 2e d'ailleurs). Mais c'est parfaitement fonctionnel en l'état. 
Les propriétés dont la valeur est un objet (donc des sous-objets de l'objet spécifié par l'ID) sont cliquable pour afficher leurs propres sous-propriétés et ce, sur un seul niveau (c.a.d. que les sous-propriétés qui sont des sous-sous-objets ne peuvent pas être explorées): utile pour explorer l'objet-fils 'style' du DIV d'exemple et donc les valeurs DOM du style du paragraphe de test. En fait chaque propriété est cliquable mais seules celles ayant pour contenu un objet ou une collection donneront un résultat. COMMENT FAIRE: cliquer le nom d'une propriété dont la valeur est [OBJECT], son nom va s'afficher dans le *deuxième* champ de formulaire au-dessus, recliquer sur "Afficher...(HTML/texte)" UTILITE: - voir comment g codé la page: les propriétés spécifiques au DOM HTML de MSIE sont Objet.innerHTML et Objet.innerText - connaître les propriétés les plus communes des objets du DOM. Ici comme c exécuté sous IE, celui-ci ajoute aux propriétés purement W3C celles qui lui sont spécifiques (dont innerHTML et innerText) mais malheureusement je n'ai pas pu contourner cette difficulté). Copier-coller le code dans le post suivant dans un fichier à enregistrer au format HTML (.htm/.html). Lancer dans IE. |
|
|
L'homme n'est qu'une machine |
Explorateur de DOM
<?xml version="1.0"?>
<!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"> <head> <title>Exploration du DOM</title> <link rev="made" href="mailto:" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="generator" content="NoteTab Std 4.92" /> <meta name="author" content="" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <style type="text/css"> <!-- div#test {} div#result { width:600px; height:400px; overflow:auto; border:1px solid black; padding:4px; } table { width:99%; } td { border:1px solid #0080c0; padding:0.2em; font:normal 12px Verdana, Arial, sans-serif; } - 
</style> <script type="text/javascript" language="javascript"> <!-- var Result; function init() { document.f.divid.value = "test"; document.f.sobj.value = ""; document.f.stripempty.checked = true; Result = document.getElementById("result"); Result.innerHTML = ""; } function effacer() { location.reload(); } function afficherHtml() { var obj = document.getElementById(document.f.divid.value); if(document.f.sobj.value != "") { eval("obj = obj." + document.f.sobj.value); } Result.innerHTML = getAllProperties(obj, document.f.stripempty.checked); } function afficherTxt() { var obj = document.getElementById(document.f.divid.value); if(document.f.sobj.value != "") { eval("obj = obj." + document.f.sobj.value); } Result.innerText = getAllPropertiesTxt(obj, document.f.stripempty.checked); } function getAllProperties(obj, stripempty) { var code = "<table>\n"; var i = 0; for(prop in obj) { if(stripempty && (obj[prop] == null || obj[prop] == "")) continue; i++; code += "<tr>\n<td id='prop" + i + "' onclick='pop(" +i +")'>" +prop +"</td>\n<td>" +obj[prop] +"</td>\n</tr>\n"; } code += "</table>"; return code; } function getAllPropertiesTxt(obj, stripempty) { var code; for(prop in obj) { if(stripempty && (obj[prop] == null || obj[prop] == "")) continue; code += prop + "=" + obj[prop] + "\n"; } return code; } function pop(n) { var cellid = "prop" + n; var prop = document.getElementById(cellid).firstChild.nodeValue; document.f.sobj.value = prop; } //-
</script> </head> <body onload="init()"> <h1>Exploration du DOM</h1> <div id="test"> Une phrase de test dans une section DIV dont l'ID est "test". </div> <form name="f"> ID de l'objet : <input name="divid" type="text" /> <input name="sobj" type="text" /> <input name="stripempty" type="checkbox" value="" /> Cacher les propriétés vides <input type="button" value="Afficher en HTML" onclick="afficherHtml()" /> <input type="button" value="Afficher en texte pur" onclick="afficherTxt()" /> <input type="button" value="Effacer" onclick="effacer()" /> </form> <div id="result"> </div> </body> </html> |
|
 |
Explorateur de DOM
euh... pour commencer ça veut dire quoi DOM?  |
|
|
L'homme n'est qu'une machine |
Explorateur de DOM
|
|
|
Explorateur de DOM
|
|
|
L'homme n'est qu'une machine |
Explorateur de DOM
|
|
|
L'homme n'est qu'une machine |
Explorateur de DOM
Par exemple: pour accéder à un noeud-objet du document, défini dans le code HTML avec un ID, en utilisant VBScript:
(<p id="paragraphe"> Le contenu de mon P </a> ) Dim MyObject, MyStyle, MyPText Set MyObject = Document.GetElementById("paragraphe") Puis pour accéder au sous-objet de style et toutes ses propriétés: Set MyStyle = MyObject.Style Si on veut accéder au contenu de ce "noeud"-object P (qui contient donc lui-même un noeud de texte): Set MyPText = MyObject.FirstChild MsgBox "Le contenu de mon P est : " & MyPText.nodeValue Pour ajouter du texte à un noeud, notre P par exemple, on crée d'abord un noeud de texte avec un contenu texte (pas de balises html qui seront sinon interprétées comme du texte et non des balises), puis on l'ajoute (ou insère) au noeud-parent: P, que nous avons déjà défini.
Dim TextNode Set TextNode = Document.CreateTextNode("Un nouveau noeud-fils de texte dans P") MyObject.AppendChild TextNode Et voilà en direct-live une ligne s'est ajoutée dans le paragraphe 
Avec un peu d'imagination vous pouvez vous rendre compte que les possibilités sont illimitées ! |
|
|
Explorateur de DOM
bon, moi ce que je cherche c'est la fonction DOM permettant d'effacer le TextNode d'un bloc (DIV en l'occurence) (1). Et aussi la propriété de style permettant d'afficher un bloc (tjs DIV en la même occurence) sur toute la largeur de la page MêME SI CELUI-CI EST VIDE (2). Pour l'instant il ne s'affiche pas tant qu'il n'a pas de TextNode.
 1
var mybody=document.getElementsByTagName("body").item(0); mydiv=document.createElement(DIV); mytxt=document.createTextNode("blahblah"); mydiv.style.backgroundColor="dodgerblue"; mydiv.appendChild(mytxt); mybody.appendChild(mydiv);  un bloc div avec un fond de couleur "dodgerblue" est créé. Il contient "blahblah".
 comment supprimer "blahblah" sans supprimer le bloc puis le recréer ?
2
var mybody=document.getElementsByTagName("body").item(0); mydiv=document.createElement(DIV); mydiv.style.backgroundColor="dodgerblue"; mybody.appendChild(mydiv); un bloc DIV est créé, tjs avec la couleur d'arrière-plan "dodgerblue". Mais rien ne s'affiche car il ne contient rien.
Comment faire ?
|
|
|
L'homme n'est qu'une machine |
Explorateur de DOM
Bonjour... une petite formule de politesse ça ne fait pas de mal hein, surtout la première fois qu'on poste 
une erreur dans 1: mydiv=document.createElement(DIV); mydiv=document.createElement("DIV");
pour le 2 il FAUT un contenu, un DIV n'est qu'un contenant. Mets-y un noeud de texte contenant un espace par exemple. Pour effacer un noeud de texte... un problème auquel j'ai également été confronté; il semble que ça ne soit pas possible. Tu peux mettre "" comme contenu de ton noeud texte mais pas l'effacer. Il existe bien une méthode UnDiv.removeChild(NoeudFilsAEffacer) mais bizarrement elle n'est pas ou mal supportée par les navigateurs. A tester |
|
Vous ne pouvez pas ajouter de messages.
Forum gratuit proposé par 
v 2.7 alpha 1
-
Un service 
-
-
Page générée en 0,259 secondes le 04/12 à 22:08:30.