prendre un document html, garder tout ce qu'il y a dans
<html>....</html> excepté ce qu'il y a dans body où je ne souhaite
garder que l'élément où l'utilisateur a cliqué.
alors j'ai suivi la pafe
<http://www.quirksmode.org/js/events_mouse.html>
et
<http://www.quirksmode.org/dom/getElementsByTagNames.html>
où j'ai extrait leur fonction "getElementsByTagNames(list,obj)"
qui ne marche pas vraiment comme je le souhaiterait le script :
--- getElementsByTagNames(list,obj) ---
function getElementsByTagNames(list,obj) {
nb_calls++;
if (!obj) var obj = document.body;
var tagNames = list.split(',');
var resultArray = new Array();
var tags;
for (var i=0;i<tagNames.length;i++) {
tags = obj.getElementsByTagName(tagNames[i]);
nb_tags+=tags.length;
for (var j=0;j<tags.length;j++) {
resultArray.push(tags[j]);
nb_loop++;
}
}
return resultArray;
}
-----------------------------------------------------
les vars nb_calls, nb_tags et nb_loop sont des espions pour savoir ce
qui se passe.
un résultat sur une div de contenu (abrégé mais donnat tous les tags) :
prendre un document html, garder tout ce qu'il y a dans <html>....</html> excepté ce qu'il y a dans body où je ne souhaite garder que l'élément où l'utilisateur a cliqué.
tu clones ton élément cliqué tu délétes tout le contenu de body tu appendChild ton clone dans le body et hop !
prendre un document html, garder tout ce qu'il y a dans
<html>....</html> excepté ce qu'il y a dans body où je ne souhaite
garder que l'élément où l'utilisateur a cliqué.
tu clones ton élément cliqué
tu délétes tout le contenu de body
tu appendChild ton clone dans le body et hop !
prendre un document html, garder tout ce qu'il y a dans <html>....</html> excepté ce qu'il y a dans body où je ne souhaite garder que l'élément où l'utilisateur a cliqué.
tu clones ton élément cliqué tu délétes tout le contenu de body tu appendChild ton clone dans le body et hop !
ceci dir je n'ai pas pigé pourquoi la fonction "getElementsByTagNames(list,obj)" trouvée sur "quirksmode" me retourne 0 éléments pour une div qui a tout un tas de truc defans...
bon nez en moins, t'as solution est tellement + élégante...
ceci dir je n'ai pas pigé pourquoi la fonction
"getElementsByTagNames(list,obj)" trouvée sur "quirksmode" me retourne 0
éléments pour une div qui a tout un tas de truc defans...
bon nez en moins, t'as solution est tellement + élégante...
ceci dir je n'ai pas pigé pourquoi la fonction "getElementsByTagNames(list,obj)" trouvée sur "quirksmode" me retourne 0 éléments pour une div qui a tout un tas de truc defans...
bon nez en moins, t'as solution est tellement + élégante...
pere.noel
YD wrote:
Et tu te retrouves avec des chaînes " h3" (bien noter l'espace) !
Solution simple, ne pas mettre d'espaces dans la liste ou les éliminer par le split : var tagNames = list.split(/ *, */); ou plus générique : var tagNames = list.split(/s*,s*/);
bravo et merci bien, je pige ENFIN, pourquoi ça ne marchait pas !
tu as l'oeil ;-)
'fectivement un tag " h3" ça n'existe pas...
YD <No-spam@thank.you.invalid> wrote:
Et tu te retrouves avec des chaînes " h3" (bien noter l'espace) !
Solution simple, ne pas mettre d'espaces dans la liste ou les éliminer
par le split :
var tagNames = list.split(/ *, */);
ou plus générique :
var tagNames = list.split(/s*,s*/);
bravo et merci bien, je pige ENFIN, pourquoi ça ne marchait pas !
Et tu te retrouves avec des chaînes " h3" (bien noter l'espace) !
Solution simple, ne pas mettre d'espaces dans la liste ou les éliminer par le split : var tagNames = list.split(/ *, */); ou plus générique : var tagNames = list.split(/s*,s*/);
bravo et merci bien, je pige ENFIN, pourquoi ça ne marchait pas !
tu as l'oeil ;-)
'fectivement un tag " h3" ça n'existe pas...
YD
var tagNames = list.split(','); var the_list="div, h1, h2, h3, h4, h5, p, img, ul, li, table, pre"
Et tu te retrouves avec des chaînes " h3" (bien noter l'espace) !
Solution simple, ne pas mettre d'espaces dans la liste ou les éliminer par le split : var tagNames = list.split(/ *, */); ou plus générique : var tagNames = list.split(/s*,s*/);
HTH -- Y.D.
var tagNames = list.split(',');
var the_list="div, h1, h2, h3, h4, h5, p, img, ul, li, table, pre"
Et tu te retrouves avec des chaînes " h3" (bien noter l'espace) !
Solution simple, ne pas mettre d'espaces dans la liste ou les éliminer
par le split :
var tagNames = list.split(/ *, */);
ou plus générique :
var tagNames = list.split(/s*,s*/);
var tagNames = list.split(','); var the_list="div, h1, h2, h3, h4, h5, p, img, ul, li, table, pre"
Et tu te retrouves avec des chaînes " h3" (bien noter l'espace) !
Solution simple, ne pas mettre d'espaces dans la liste ou les éliminer par le split : var tagNames = list.split(/ *, */); ou plus générique : var tagNames = list.split(/s*,s*/);
et donc LE problème est que "getElementsByTagNames(the_list,extract)" me retourne 0 éléments )))
vire tes espaces dans : the_list (si elle est bien ce que tu as écrit)
car là tes tags sont : < h1> < h2> etc ...
-- ASM
ASM
ce que je souhaite réaliser, in fine :
prendre un document html, garder tout ce qu'il y a dans <html>....</html> excepté ce qu'il y a dans body où je ne souhaite garder que l'élément où l'utilisateur a cliqué.
exemple (avec ce dont on a causé par ailleurs) :
function extractDiv(lieuDuClic) { while ( lieuDuClic.tagName.toLowerCase() != 'div' ) lieuDuClic = lieuDuClic.parentNode; lieuDuClic = lieuDuClic.cloneNode(true); while(document.body.hasChildNodes()) document.body.removeChild(document.body.firstChild) document.body.appendChild(lieuDuClic); }
<body onclick="extractDiv(quelElement(event));">
-- ASM
ce que je souhaite réaliser, in fine :
prendre un document html, garder tout ce qu'il y a dans
<html>....</html> excepté ce qu'il y a dans body où je ne souhaite
garder que l'élément où l'utilisateur a cliqué.
exemple (avec ce dont on a causé par ailleurs) :
function extractDiv(lieuDuClic) {
while ( lieuDuClic.tagName.toLowerCase() != 'div' )
lieuDuClic = lieuDuClic.parentNode;
lieuDuClic = lieuDuClic.cloneNode(true);
while(document.body.hasChildNodes())
document.body.removeChild(document.body.firstChild)
document.body.appendChild(lieuDuClic);
}
prendre un document html, garder tout ce qu'il y a dans <html>....</html> excepté ce qu'il y a dans body où je ne souhaite garder que l'élément où l'utilisateur a cliqué.
exemple (avec ce dont on a causé par ailleurs) :
function extractDiv(lieuDuClic) { while ( lieuDuClic.tagName.toLowerCase() != 'div' ) lieuDuClic = lieuDuClic.parentNode; lieuDuClic = lieuDuClic.cloneNode(true); while(document.body.hasChildNodes()) document.body.removeChild(document.body.firstChild) document.body.appendChild(lieuDuClic); }
<body onclick="extractDiv(quelElement(event));">
-- ASM
pere.noel
Une Bévue wrote:
bon nez en moins, t'as solution est tellement + élégante...
function extractDiv(lieuDuClic) { while ( lieuDuClic.tagName.toLowerCase() != 'div' ) lieuDuClic = lieuDuClic.parentNode; lieuDuClic = lieuDuClic.cloneNode(true); while(document.body.hasChildNodes()) document.body.removeChild(document.body.firstChild) document.body.appendChild(lieuDuClic); }
<body onclick="extractDiv(quelElement(event));">
oauis, ce que j'ai fait je prend l'élément du mous down puis celui du mouse up si ce sont les mêmes je ne garde que celui-là, cf. plus haut mon essai online...
function extractDiv(lieuDuClic) {
while ( lieuDuClic.tagName.toLowerCase() != 'div' )
lieuDuClic = lieuDuClic.parentNode;
lieuDuClic = lieuDuClic.cloneNode(true);
while(document.body.hasChildNodes())
document.body.removeChild(document.body.firstChild)
document.body.appendChild(lieuDuClic);
}
<body onclick="extractDiv(quelElement(event));">
oauis, ce que j'ai fait je prend l'élément du mous down puis celui du
mouse up si ce sont les mêmes je ne garde que celui-là, cf. plus haut
mon essai online...
function extractDiv(lieuDuClic) { while ( lieuDuClic.tagName.toLowerCase() != 'div' ) lieuDuClic = lieuDuClic.parentNode; lieuDuClic = lieuDuClic.cloneNode(true); while(document.body.hasChildNodes()) document.body.removeChild(document.body.firstChild) document.body.appendChild(lieuDuClic); }
<body onclick="extractDiv(quelElement(event));">
oauis, ce que j'ai fait je prend l'élément du mous down puis celui du mouse up si ce sont les mêmes je ne garde que celui-là, cf. plus haut mon essai online...
un grand merci à toi !!!
pere.noel
ASM wrote:
vire tes espaces dans : the_list (si elle est bien ce que tu as écrit)
car là tes tags sont : < h1> < h2> etc ...
oui, oui, merci, c'est ce qu'on m'a dit + haut )))
suivant des conseils donnés sur "comp.lang.javascript" :
That's enough. Once you have a reference to div two, you can remove all the body's child nodes, then re-attache div two:
function trimBody (htmlElement){ var docBody = document.body; while ( docBody.firstChild ){ docBody.removeChild( docBody.firstChild ); } docBody.appendChild( htmlElement ); }
Your method of getting elements by tag name will result in a set of node collections, you have destroyed the structure and don't know how to put it back. The above maintains the structure:
<script type="text/javascript">
function trimBody(htmlElement){ var docBody = document.body; while (docBody.firstChild){ docBody.removeChild(docBody.firstChild); } docBody.appendChild(htmlElement); }
</script> <body> <div id="one" onclick="trimBody(this);"> <p>Click here to keep just div <b>one</b> </div> <div id="two" onclick="trimBody(this);"> <p>Click here to keep just div <b>two</b> </div> <div id="three" onclick="trimBody(this);"> <p>Click here to keep just div <b>three</b> </div> </body>
suivant des conseils donnés sur "comp.lang.javascript" :
That's enough. Once you have a reference to div two, you can remove
all the body's child nodes, then re-attache div two:
function trimBody (htmlElement){
var docBody = document.body;
while ( docBody.firstChild ){
docBody.removeChild( docBody.firstChild );
}
docBody.appendChild( htmlElement );
}
Your method of getting elements by tag name will result in a set of
node collections, you have destroyed the structure and don't know how
to put it back. The above maintains the structure:
<script type="text/javascript">
function trimBody(htmlElement){
var docBody = document.body;
while (docBody.firstChild){
docBody.removeChild(docBody.firstChild);
}
docBody.appendChild(htmlElement);
}
</script>
<body>
<div id="one" onclick="trimBody(this);">
<p>Click here to keep just div <b>one</b>
</div>
<div id="two" onclick="trimBody(this);">
<p>Click here to keep just div <b>two</b>
</div>
<div id="three" onclick="trimBody(this);">
<p>Click here to keep just div <b>three</b>
</div>
</body>
de "Rob" ref : Message-ID:
<1161074807.277960.143480@m73g2000cwd.googlegroups.com>
suivant des conseils donnés sur "comp.lang.javascript" :
That's enough. Once you have a reference to div two, you can remove all the body's child nodes, then re-attache div two:
function trimBody (htmlElement){ var docBody = document.body; while ( docBody.firstChild ){ docBody.removeChild( docBody.firstChild ); } docBody.appendChild( htmlElement ); }
Your method of getting elements by tag name will result in a set of node collections, you have destroyed the structure and don't know how to put it back. The above maintains the structure:
<script type="text/javascript">
function trimBody(htmlElement){ var docBody = document.body; while (docBody.firstChild){ docBody.removeChild(docBody.firstChild); } docBody.appendChild(htmlElement); }
</script> <body> <div id="one" onclick="trimBody(this);"> <p>Click here to keep just div <b>one</b> </div> <div id="two" onclick="trimBody(this);"> <p>Click here to keep just div <b>two</b> </div> <div id="three" onclick="trimBody(this);"> <p>Click here to keep just div <b>three</b> </div> </body>
