El principio de implementación es muy simple, que es recorrer el módulo del artículo, extraer las etiquetas H2 y H3 y asignar el contenido al árbol de título recién creado.
El código es el siguiente:
Código HTML:
<div> <div id = "artículo"> <h2> Título secundario </h2> <h3> Título secundario </ h3> <p> Hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hod. 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 mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundial mundial mundial mundial mundial mundial mundial mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundial mundial mundial mundial mundial mundial mundial mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundial mundial mundial mundial mundial mundial mundial mundo mundo Mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundial mundo mundo mundo mundo mundo mundo mundo mundo mundial mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo mundo id = "articlemenu_box"> <span id = "articlemenu_open"> </span> <ul id = "articlemenu"> <span id = "articlemenu_close"> </span> </ul> </div> </div>
Código CSS:
* {margen: 0; relleno: 0; border: 0;} cuerpo {fuente: 16px/1.5;} ul li, ol li {list-style: none;}. contextbox {posicion: relativo; Ancho: 960px; margen: 0 auto;}#artículo {margen-izquierda: 200px; borde: 1px #eee sólido; Pading: 15px;}. articlemenu a {text-decoration: none; color: #333;}. articlemenu a: hover {color: #f85455;}. articlemenu-box {ancho: 170px; Posición: Absoluto; Izquierda: 10px; superior: 10px;}. articlemenu {relleno: 10px; borde: 1px sólido #ccc; box-shadow: 2px 2px 2px #eee;}. titleh2, .titleh3 {line-highting: 1.5em;}. titleH2 {font-weight: bold;}. titleh3 {margin-left: 20px;}. articleMenu .articlemenu-close, .articlemenu-open {santslock; Posición: Absoluto; Derecha: 0; arriba: 0; Altura: 44px; Ancho: 44px; cursor: pointer;}. articlemenu-open {background: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_open.png") No-Repeat 50% 50%; Display: Ninguno;}. Articlemenu .Articlemenu-Close {Background: Url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_close.png") No-Repeat 50% 50%;}Código JavaScript:
var artículo = documento document.getElementById ("articlemenu_close"); articlemenu_close.onClick = function () {ArtichgroupMenu.style.display = "Ninguno"; articlemenu_open.style.display = "block";}; articlemenu_open.onclick = function () {Artículohgroupmenu.style.display = "block"; articlemenu_open.style.display = "ninguno";}; // titleHgroup (artículo, artículohgroupmenu, "titleH2", "titleH3"); // obtener el elemento del título con el título H2 ~ H3 en los elementos infantiles directos bajo OBJ // Descripción del parámetro: Hgroupparent es el elemento principal directo que contiene H2 y H3; Menulist es el elemento UL que lleva la lista de artículos recién creados; // H2ClassName y H3ClassName son los atributos de clase de la lista LI correspondiente a H2 y H3 en la lista de artículos recién creados respectivamente; function titleHGroup (Hgroupparent, menulist, H2ClassName, H3ClassName) {var hgroup = hgroupparent.children; // Cree un fragmento de documento para envolver la lista LI generada automáticamente correspondiente a H2 y H3 var fragment = document.CreateDocumentFragment (); for (i = 0; i <hgroup.length && hgroup [i] .nodeType === 1 1; i ++) {// Generar una list de li-list para el título del tipo correspondiente // Descripción del parámetro: Htype es el tipo de título como H1 ~ H6; ClassName es el valor de atributo de clase de la lista LI correspondiente al título; function titletolist (htype, classname) {var li = document.createElement ("li"); li.classname = classname; // Agregue una etiqueta dentro de la etiqueta Li y ubíquela con un ancla; hgroup [i] .id = htype + i; li.innerhtml = ("<a href = '#" + htype + i + "'>" + hgroup [i] .innerhtml + "</a>"); fragmento.appendchild (li); } // Cuando el elemento de título en el recorrido es H2, llame a Titletolist (htype, className) para agregar la lista de Li correspondiente; if (hgroup [i] .nodename.tolowerCase () == "H2") {Titletolist ("H2", H2ClassName); } // Cuando el elemento de título en el recorrido es H3, llame a Titletolist (htype, classname) para agregar la lista de Li correspondiente; if (hgroup [i] .nodename.tolowerCase () == "H3") {Titletolist ("H3", H3ClassName); }} // Agregue el fragmento de fragmento de documento que lleva la colección de elementos LI correspondiente al DOM (es decir, el elemento principal que envuelve la lista de Li en el DOM); Menulist.appendChild (fragmento);}Código de ejemplo completo
< xmlns = "http://www.w3.org/1999/xhtml"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <title> La implementación nativa de JS genera automáticamente title de artículo </title> <title type = "text/css" {Margin> {Margin: 0; relleno: 0; border: 0;} cuerpo {fuente: 16px/1.5;} ul li, ol li {list-style: none;}. contextbox {posicion: relativo; Ancho: 960px; margen: 0 auto;}#artículo {margen-izquierda: 200px; borde: 1px #eee sólido; Pading: 15px;}. articlemenu a {text-decoration: none; color: #333;}. articlemenu a: hover {color: #f85455;}. articlemenu-box {ancho: 170px; Posición: Absoluto; Izquierda: 10px; superior: 10px;}. articlemenu {relleno: 10px; borde: 1px sólido #ccc; box-shadow: 2px 2px 2px #eee;}. titleh2, .titleh3 {line-highting: 1.5em;}. titleH2 {font-weight: bold;}. titleh3 {margin-left: 20px;}. articleMenu .articlemenu-close, .articlemenu-open {santslock; Posición: Absoluto; Derecha: 0; Altura: 44px; Ancho: 44px; cursor: pointer;}. articlemenu-open {background: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_open.png") No-Repeat 50% 50%; display: none;}.articleMenu .articleMenu-close { background: url("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articleMenu_close.png") no-repeat 50% 50%;}</style></head><body><div> <div id="article"> <h2> Título secundario </h2> <h3> Título secundario </h3> <p> Hola <br /> hola <br /> hola <br /> hola <br /> hola <br /> hola <br /> hola <br /> hola <br /> hola <br /> hello <br /> hola <br /> hola <br /> hola <br />> <Br /> hello <> hello <br /> hola <br /> hola hello <br /> hola <br />> <Br /> <Br /> ¡br /> hello <b /> Hola <br /> Hola <br /> hola <br />> <Br /> hello <> hello <r> hello Hola <br /> hola <br /> hola <br /> hola <br /> hola <br /> hola <br /> hola <br /> hola <br /> hola <br /> br /> br /> hola <br /> hola <br /> hola <br /> hola <br />> br /> <<br /> ¡Hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hando hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hello hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hello hola hola hola hola hola hola hola hola hola hola hola hola hola hola hello hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hola hello hello hello hello hello hello hello hello hello hello hello hello hello hello Hello Hello Hello Hello Hello Hello 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<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<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<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<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<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 <br /> w <Br /> w <br /> w <br /> w <br /> w <> rld wo <Br /> rld w <r <> old w <br /> w <br /> w <Br /> w <> rld wo <Br /> rld w <Br /ort. />orld w<br />orld </p> <h3>Level 3 title</h3> <h3>Level 3 title</h3> <h2>Level 3 title</h2> <h3>Level 3 title</h3> <h3>Level 3 title</h3> <h3>Level 3 title</h3> <h3>Level 3 title</h3> <h3>Level 3 title</h3> <h3>Level 3 Título </h3> <h3> Nivel 3 Título </h3> <h3> Nivel 3 Título </h3> <h3> Título 3 Título </h3> </div> <div id = "Articlemenu_box"> <span id = "articlemenu_open"> </span> <ul id = "Articlemenu"> <span Id = "ArticLemenu"> </spane> </spane </span </span </ultu </div> </div> <script type = "text/javaScript"> var artículo = document.getElementById ("artículo"); var artículohgroupMenu = document.getElementById ("articlemenu"); // cerrar y expandir el árbol del documento var articlemenuu_open = document.getEmementByid ("articlemenu_open");; document.getElementById ("articlemenu_close"); articlemenu_close.onClick = function () {ArtichgroupMenu.style.display = "Ninguno"; articlemenu_open.style.display = "block";}; articlemenu_open.onclick = function () {Artículohgroupmenu.style.display = "block"; articlemenu_open.style.display = "ninguno";}; // titleHgroup (artículo, artículohgroupMenu, "titleH2", "titleH3"); // obtener el elemento del título con el título H2 ~ H3 en el elemento infantil directo bajo OBJ // Descripción del parámetro: Hgroupparent es el elemento principal directo que contiene H2 y H3; Menulist es el elemento UL que alberga la lista de artículos recién creada; // H2ClassName y H3ClassName son los atributos de clase de la lista LI correspondiente a H2 y H3 en la lista de artículos recién creados; function titleHGroup (Hgroupparent, menulist, H2ClassName, H3ClassName) {var hgroup = hgroupparent.children; // Cree un fragmento de documento para envolver la lista LI generada automáticamente correspondiente a H2 y H3 var fragment = document.CreateDocumentFragment (); para (i = 0; i <hgroup.length && hgroup [i] .nodeType === 1 1; i ++) {// Genere una lista de li para el título del tipo correspondiente // Descripción del parámetro: Htype es el tipo de título como H1 ~ H6; ClassName es el valor de atributo de clase de la lista LI correspondiente al título; function titletolist (htype, classname) {var li = document.createElement ("li"); li.classname = classname; // Agregue una etiqueta dentro de la etiqueta Li y colóquela con un ancla; hgroup [i] .id = htype + i; li.innerhtml = ("<a href = '#" + htype + i + "'>" + hgroup [i] .innerhtml + "</a>"); fragmento.appendchild (li); } // Cuando el elemento de título en el recorrido es H2, llame a Titletolist (htype, className) para agregar la lista de Li correspondiente; if (hgroup [i] .nodename.tolowerCase () == "H2") {Titletolist ("H2", H2ClassName); } // Cuando el elemento de título en el recorrido es H3, llame a Titletolist (htype, classname) para agregar la lista de Li correspondiente; if (hgroup [i] .nodename.tolowerCase () == "H3") {Titletolist ("H3", H3ClassName); }} // Agregue el fragmento de documento que aloja la colección de elementos LI correspondiente al DOM (es decir, el elemento principal que envuelve la lista Li en el DOM); Menulist.appendChild (fragmento);} </script> </body> </html>Resumir
Lo anterior es todo el contenido de generar automáticamente el árbol de título del artículo usando JS nativo. Espero que el contenido de este artículo sea útil para todos. Si tiene alguna pregunta, puede dejar un mensaje para discutir.