Générez automatiquement des exemples d'article d'article à l'aide de JS natif

Le principe de mise en œuvre est très simple, qui doit parcourir le module d'article, extraire les balises H2 et H3 et attribuer le contenu à l'arborescence de titre nouvellement créée.

Le code est le suivant:

Code html:

 <div> <div id = "article"> <h2> titre secondaire </h2> <h3> titre secondaire </h3> <p> Bonjour bonjour bonjour bonjour bonjour bonjour bonjour bonjour bonjour bonjour bonjour bonjour Bonjour bonjour Bonjour Bonjour hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world id = "ArticleMenu_box"> <span id = "articlemenu_open"> </span> <ul id = "articlemenu"> <span id = "articlemenu_close"> </span> </ul> </div> </div>

Code CSS:

 * {margin: 0; rembourrage: 0; Border: 0;} Body {font: 16px / 1.5;} ul li, ol li {list-style: Aucun;}. ContextBox {position: relative; Largeur: 960px; marge: 0 auto;} # Article {margin-left: 200px; Border: 1px #eee solide; rembourrage: 15px;}. Articlemenu a {text-decoration: aucun; Couleur: # 333;}. ARTICLEMENU A: Hover {Color: # f85455;}. ArticleMenu-box {width: 170px; Position: absolue; Gauche: 10px; En haut: 10px;}. ArticleMenu {padding: 10px; Border: 1px solide #ccc; Box-Shadow: 2px 2px 2px #eee;}. TitleH2, .TitleH3 {Line-Height: 1.5em;}. TitleH2 {Font-Weight: Bold;}. Position: absolue; à droite: 0; en haut: 0; hauteur: 44px; Largeur: 44px; curseur: pointeur;}. ARTICLEMENU-Open {Background: URL ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_open.png") no-repeat 50% 50%; Affichage: Aucun;}. Articlemenu .articleMenu-close {Background: URL ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_close.png") no-repeat 50%;}

Code javascript:

 var article = document.getElementById ("Article"); var ArticleHgroupMenu = document.getElementById ("ArticleMenu"); // Fermer et développer l'arbre de document var articlemenu_open = document.getElementByid ("Articlemenu_Open"); var articlemenu_close = document.getElementById ("ARTICLEMENU_CLOSE"); ARTICLEMENU_CLOSE.OnClick = function () {ArticleHGroupMenu.Style.Display = "None"; articlemenu_open.style.display = "block";}; articlemenu_open.onclick = function () {articlehgroupMenu.style.display = "block"; articlemenu_open.style.display = "None";}; // titlehgroup (Article, ArticleHgroupMenu, "TitleH2", "TitleH3"); // Obtenez l'élément de titre avec le titre H2 ~ H3 dans les éléments enfants directs sous H2 et H3; Le Ménuliste est l'élément UL qui porte la liste d'articles nouvellement créée; // H2ClassName et H3ClassName sont les attributs de classe de la liste Li correspondant respectivement à H2 et H3 dans la liste d'articles nouvellement créée; Fonction TitleHGroup (HGroupParent, Menulist, H2ClassName, H3ClassName) {var hgroup = hgroupparent.children; // Créez un fragment de document pour envelopper la liste Li-générée automatique correspondant à H2 et H3 var fragment = document.CreateDocumentFragment (); pour (i = 0; i <hgroup.length && hgroup [i] .nodeType === 1; i ++) {// générer un list li pour le titre du type correspondant // Description du paramètre: htype est le type du titre tel que H1 ~ H6; ClassName est la valeur d'attribut de classe de la liste Li correspondant au titre; fonction titletolist (htype, className) {var li = document.CreateElement ("li"); li.classname = className; // Ajouter une balise à l'intérieur de la balise Li et la localiser avec une ancre; hgroup [i] .id = htype + i; li.innerhtml = ("<a href = '#" + htype + i + "'>" + hgroup [i] .innerhtml + "</a>"); fragment.ApendChild (li); } // Lorsque l'élément de titre de la traversée est H2, appelez Titletolist (HTYPE, ClassName) pour ajouter la liste Li correspondante; if (hgroup [i] .nodename.tolowercase () == "h2") {titletolist ("h2", h2classname); } // Lorsque l'élément de titre de la traversée est H3, appelez Titletolist (HTYPE, ClassName) pour ajouter la liste Li correspondante; if (hgroup [i] .nodename.tolowercase () == "h3") {titletolist ("h3", h3classname); }} // Ajouter le fragment de fragment de document qui porte la collection d'élément Li correspondante au DOM (c'est-à-dire l'élément parent qui enveloppe la liste Li dans le DOM); Menulist.ApendChild (fragment);}

Exemple d'exemple de code

 <! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <éadf> <meta http-equiv = "contenu-type" contenu = "text / html; charset = gb2312" /> <title> natif JS itimating génére automatiquement l'article </tame> <style type = "Text / CSS"> * {margin: 0; rembourrage: 0; Border: 0;} Body {font: 16px / 1.5;} ul li, ol li {list-style: Aucun;}. ContextBox {position: relative; Largeur: 960px; marge: 0 auto;} # Article {margin-left: 200px; Border: 1px #eee solide; rembourrage: 15px;}. Articlemenu a {text-decoration: aucun; Couleur: # 333;}. ARTICLEMENU A: Hover {Color: # f85455;}. ArticleMenu-box {width: 170px; Position: absolue; Gauche: 10px; En haut: 10px;}. ArticleMenu {padding: 10px; Border: 1px solide #ccc; Box-Shadow: 2px 2px 2px #eee;}. TitleH2, .TitleH3 {Line-Height: 1.5em;}. TitleH2 {Font-Weight: Bold;}. Position: absolue; à droite: 0; hauteur: 44px; Largeur: 44px; curseur: pointeur;}. ARTICLEMENU-Open {Background: URL ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_open.png") no-repeat 50% 50%; Affichage: Aucun;}. Articlemenu .articlemenu-close {background: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_close.png") no-repeat 50%;} </pyle>> </ thead> <body>; id = "Article"> <h2> titre secondaire </h2> <h3> titre secondaire </h3> <p> Bonjour <br /> Bonjour <br /> Bonjour <br /> Bonjour <br /> Bonjour <br /> Bonjour <br /> Hello <br /> bonjour <br /> Bonjour <br /> Bonjour <br /> Bonjour <br /> Bonjour <br /> Hello <Br /> Bonjour <br /> Bonjour <br /> Bonjour <br /> Bonjour <br /> Bonjour <br /> Bonjour <br /> Bonjour <br /> Hello <Br /> Bonjour <br /> Bonjour <br /> Bonjour <br / Br / Br / Br / Bonjour Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello HELO HOLLO HOLLO HOLLO HOLLE HELLO HOLO HOLLEY HOLLY HOLLEY HOLLO HOLLO HOLLO HOLLO HOLLO HOLLO HOLLO HOLLE HOLLO HELL <H2> Titre secondaire </H2> <P> World World <Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br / Br /> World Wo <Br / Brld <Br / Br / ORLD <BR / BRLU />ld world world<br />ld world<br />world <br />world<br />w<br />orld world<br />w<br />orld world<br />w<br />w<br />w<br />w<br />w<br />w<br />w<br />w<br />w<br />w<br />w<br />w<br />w<br /> w <br /> w <br /> w <r /> w <r /> w <r /> w <r /> w <rr /> w <br /> w <rr /> w <br /> w <rr /> w <r /> w <r /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br / br /> w <r / Br / Br / Br /> W <br /> w <br / Br /> W <Br / Br / B / Br / Br /> W <Br /> W /> w <br /> w <br /> w <r /> w <r /> w <r /> w <r /> w <rr /> w <br /> w <rr /> w <br /> w <rr /> w <r /> w <r /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br / br /> w <r / Br / Br / Br /> W <br /> w <br / Br /> W <Br / Br / B / Br / Br /> W <Br /> W /> w <br /> w <br /> w <r /> w <r /> w <r /> w <r /> w <rr /> w <br /> w <rr /> w <br /> w <rr /> w <r /> w <r /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br /> w <br / br /> w <r / Br / Br / Br /> W <br /> w <br / Br /> W <Br / Br / B / Br / Br /> W <Br /> W /> w <br /> w <r /> w <r /> w <r /> w <br /> w <br /> w <br /> w <r /> w <br /> w <r /> w <rr /> w <r /> w <r /> w <br /> w <r /> w <br /> w <br /> w <br /> w <> rld wo <rr /> rld w <br /> ou lld w <Br /> w <> rld wo <br />> rld w <BrlLd W <Br /> W <> RLD Wo <br />> Rld W <Br / ORLD W <Br /> W < /> orld w <r /> orld w <br /> orld </p> <h3> niveau 3 titre </h3> <h3> niveau 3 titre </h3> <h2> niveau 3 titre </h2> <h3> niveau 3 titre </h3> <h3> niveau 3 title </h3> <h3> Titre </h3> <h3> <h3> Titre de niveau 3 </h3> <h3> Titre de niveau 3 </h3> <h3> Titre de niveau 3 </h3> <h3> Titre de niveau 3 </h3> </div> <div id = "Articlemenu_box"> <span id = "Articlemenu_Open"> </span> <ul id = "articleMenu"> <panneux id = "articlemenu_close"> </span> </ul> </div> </div> <script type = "text / javascript"> var article = document.getElementyid ("article"); var ArticleHgroupMenu = document.getElementById ("Articlemenu"); // clôture et expansant l'arbre de document var articlememenu_opendu = document.getElementById ("ArticleMenu_Open"); var ArticleMenu_close = document.getElementById ("ArticleMenu_close"); articlemenu_close.onclick = function () {ArticleHgroupMenu.Style.Display = "nul";; articlemenu_open.style.display = "block";}; articlemenu_open.onclick = function () {articlehgroupMenu.style.display = "block"; articlemenu_open.style.display = "None";}; // titlehgroup (article, articlehgroupMenu, "titleh2", "titleh3"); // obtenez l'élément de titre avec le titre H2 ~ H3 dans l'élément enfant direct sous obj // paramètre Description: Hgroupparent est l'élément parent direct contenant H2 et H3; Menulist est l'élément UL qui héberge la liste d'articles nouvellement créée; // H2ClassName et H3ClassName sont les attributs de classe de la liste Li correspondant à H2 et H3 dans la liste d'articles nouvellement créée; Fonction TitleHGroup (HGroupParent, Menulist, H2ClassName, H3ClassName) {var hgroup = hgroupparent.children; // Créez un fragment de document pour envelopper la liste Li-générée automatique correspondant à H2 et H3 var fragment = document.CreateDocumentFragment (); pour (i = 0; i <hgroup.length && hgroup [i] .nodeType === 1; i ++) {// générer une liste Li pour le titre du type correspondant // Description du paramètre: htype est le type du titre tel que H1 ~ H6; ClassName est la valeur d'attribut de classe de la liste Li correspondant au titre; fonction titletolist (htype, className) {var li = document.CreateElement ("li"); li.classname = className; // Ajoutez une balise à l'intérieur de la balise Li et positionnez-la avec une ancre; hgroup [i] .id = htype + i; li.innerhtml = ("<a href = '#" + htype + i + "'>" + hgroup [i] .innerhtml + "</a>"); fragment.ApendChild (li); } // Lorsque l'élément de titre de la traversée est H2, appelez Titletolist (HTYPE, ClassName) pour ajouter la liste Li correspondante; if (hgroup [i] .nodename.tolowercase () == "h2") {titletolist ("h2", h2classname); } // Lorsque l'élément de titre de la traversée est H3, appelez Titletolist (HTYPE, ClassName) pour ajouter la liste Li correspondante; if (hgroup [i] .nodename.tolowercase () == "h3") {titletolist ("h3", h3classname); }} // Ajouter le fragment de document qui héberge la collection d'élément Li correspondante au DOM (c'est-à-dire l'élément parent qui enveloppe la liste Li dans le DOM); MENULIST.APPENDCHILD (FRAGMENT);} </cript> </ody> </html>

Résumer

Ce qui précède est tout le contenu de la génération automatique de l'arbre de titre d'article à l'aide de JS natif. J'espère que le contenu de cet article sera utile à tout le monde. Si vous avez des questions, vous pouvez laisser un message à discuter.