O princípio da implementação é muito simples, que deve percorrer o módulo do artigo, extrair as tags H2 e H3 e atribuir o conteúdo à árvore de título recém -criada.
O código é o seguinte:
Código HTML:
<div> <div id = "Artigo"> <H2> Título secundário </h2> <h3> título secundário </h3> <p> hello hello olho hello hello hello olho hello hello olho olho hello hello olho hello hello olho fundo olho olho hello olho hello hello hello olho fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo S Sd fundo fundo doc fundod fundod fundo fundod fundod fundo contediiddd....... .dddddddd.............. .diiiidienieniienenenienienienipeipepeperperperpeiasiasadosáamosdssiosiaiaáia <h3 H3 do 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 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 Semam Uma maneira constoal mundot mundial mund mundial mund mundial mundial mundial mundial mundial mundial mundial mundial mundial mundial mundial mundial id = "articlemenu_box"> <span id = "articlemenu_open"> </span> <ul id = "articlemenu"> <span id = "articlemenu_close"> </span> </ul> </div> </div>
Código CSS:
* {margem: 0; preenchimento: 0; borda: 0;} corpo {font: 16px/1.5;} ul li, ol li {estilo de lista: nenhum;}. contextbox {position: relativo; Largura: 960px; Margem: 0 Auto;}#Artigo {Margin-Left: 200px; Fronteira: 1px #eee Solid; preenchimento: 15px;}. articlemenu a {decoração de texto: nenhum; Cor: #333;}. Articlemenu A: Hover {color: #f85455;}. articlemenu-box {width: 170px; Posição: Absoluto; Esquerda: 10px; topo: 10px;}. articlemenu {preenchimento: 10px; borda: 1px sólido #ccc; Box-shadow: 2px 2px 2px #eee;}. titleH2, .titleh3 {line-height: 1.5em;}. titleH2 {font-weight: Bold;}. titLETLEMENUTIC-LEFT: 20px;}. ArtLemenu .ArticLemenu-close, Posição: Absoluto; Direita: 0; topo: 0; Altura: 44px; Largura: 44px; Cursor: Pointer;}. Articlemenu-open {Background: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_open.png") No-repeat 50% 50%; Exibir: Nenhum;}. Articlemenu .articlemenu-close {Background: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_close.png") Norepeat 50%;Código JavaScript:
var artigo = document.getElementById ("Artigo"); var artigoHGroupMenu = document.getElementById ("articlemenu"); // fechar e expandir a árvore de documentos var articlemenu_open = document.getElementById ("articlemenu_open"); varticleMenu_clokeD = document.getElementById ("articlemenu_close"); articlemenu_close.onClick = function () {articleHgroupMenu.style.display = "nenhum"; articlemenu_open.style.display = "block";}; articlemenu_open.onClick = function () {artigoHgroupMenu.style.display = "block"; articlemenu_open.style.display = "None";}; // titlehgroup (artigo, artigoHgroupMenu, "titleH2", "titleH3"); // obtenha o elemento de título com o título H2 ~ H3 nos elementos diretos da criança em obj //////ticituram o elemento do título com o título H2 ~ H3 nos elementos diretos da criança em obj /////14 Menulista é o elemento UL que carrega a lista de artigos recém -criada; // H2ClassName e H3ClassName são os atributos de classe da lista LI correspondentes a H2 e H3 na lista de artigos recém-criada, respectivamente; função titlehgroup (hGroupParent, menulista, h2className, h3className) {var hgroup = hGroupParent.children; // Crie um fragmento de documento para envolver a lista LI gerada automaticamente correspondente a H2 e H3 var fragment = document.createCumentFragment (); para (i = 0; i <hgroup.length && hGroup [i] .NodEType === 1; i ++) {// gerar uma lista li para o título do tipo correspondente // parâmetro Descrição: htype é o tipo do título como H1 ~ H6; ClassName é o valor do atributo de classe da lista de LI correspondente ao título; Função titleTolist (htype, className) {var li = document.createElement ("li"); li.className = ClassName; // Adicione uma tag dentro da tag Li e localize -a com uma âncora; HGROUP [i] .id = htype + i; li.innerhtml = ("<a href = '#" + htype + i + "'>" + hgroup [i] .innerhtml + "</a>"); fragment.appendchild (li); } // Quando o elemento de título no Traversal é H2, Call TitleTolist (Htype, ClassName) para adicionar a lista Li correspondente; if (hgroup [i] .nodename.tolowerCase () == "h2") {titleTolist ("h2", h2className); } // Quando o elemento de título no Traversal é H3, Call TitleTolist (Htype, ClassName) para adicionar a lista Li correspondente; if (hgroup [i] .nodename.tolowerCase () == "h3") {titleTolist ("h3", h3className); }} // Adicione o fragmento de documentos que carrega a coleção de elementos Li correspondente ao DOM (ou seja, o elemento pai que envolve a lista Li no DOM); Menulist.appendChild (fragmento);}Código de exemplo completo
<! xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <title> js nativo js implementação gera-se automaticamente, o artigo </title "title" title "title" title "title)/title (title") preenchimento: 0; borda: 0;} corpo {font: 16px/1.5;} ul li, ol li {estilo de lista: nenhum;}. contextbox {position: relativo; Largura: 960px; Margem: 0 Auto;}#Artigo {Margin-Left: 200px; Fronteira: 1px #eee Solid; preenchimento: 15px;}. articlemenu a {decoração de texto: nenhum; Cor: #333;}. Articlemenu A: Hover {color: #f85455;}. articlemenu-box {width: 170px; Posição: Absoluto; Esquerda: 10px; topo: 10px;}. articlemenu {preenchimento: 10px; borda: 1px sólido #ccc; Box-shadow: 2px 2px 2px #eee;}. titleH2, .titleh3 {line-height: 1.5em;}. titleH2 {font-weight: Bold;}. titLETLEMENUTIC-LEFT: 20px;}. ArtLemenu .ArticLemenu-close, Posição: Absoluto; Direita: 0; Altura: 44px; Largura: 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: Nenhum;}. Articlemenu .articlemenu-close {Background: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_close.png") <repeat 50%; 50%; id = "Artigo"> <H2> Título secundário </h2> <h3> título secundário </h3> <p> hello <br /> hello <br /> hello <r /> hello <r /> hello <br /> hello <blO> hello <r /> hello <r />> hello <r /> hello <r /> hello <bro> <br /> Hello <BR /> Hello <BR /> Hello <Br /> Hello <Br /> Hello <Br /> Hello <BR /> Hello <Br /> Hello <Br /> Hello <Br /> Hello Hello Hello Hellod fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo fundo Hello, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, olá, título mundialmente mundial /> LD Mundo do mundo <br /> ld mundo <r /> mundo <r /> mundo <r /> w <r /> orld mundial <r /> w <r /> orld mundial <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <r /> w <rld /w <rld w <r /> w <r /> w <r /> /> orld w <r/> orld w <r/> orld </p> <h3> Nível 3 Título </h3> <h3> Nível 3 Título </h3> <h2> Nível 3 Título </h2> <h3> Título 3 </h3> <H3> Nível 3 Título </H3 <h3> Título 3 </H3> <H3> Nível 3 Título </h3> <h3> Nível 3 Título </h3> <h3> Nível 3 Título </h3> <h3> Nível 3 Título </h3> </div> <div id = "articlemenu_box"> <span id = "articlemenu_open"> </pan> <bul = "Articlemen =" id = "articlemenu_close"> </span> </ul> </div> </div> <script type = "text/javascript"> var artigo = document.getElementById ("Artigo"); var artigoHGroupMenu = document.getElementby ("articlemenu"); // fechar e expor document.getElementById ("articlemenu_open"); var articlemenu_close = document.getElementById ("articlemenu_close"); articlemenu_close.onclick = function () {artichGroupMenu.style.disPlay = "" Nenhum "; articlemenu_open.style.display = "block";}; articlemenu_open.onClick = function () {artigoHgroupMenu.style.display = "block"; articlemenu_open.style.display = "None";}; // titleHgroup (artigo, artigoHgroupMenu, "titleH2", "titleH3"); // obtenha o elemento de título com o título H2 ~ H3 no elemento filho direto em obj // parâmetro: hgroupparent Menulista é o elemento UL que hospeda a lista de artigos recém -criada; // h2className e H3ClassName são os atributos de classe da lista LI correspondentes a H2 e H3 na lista de artigos recém-criada; função titlehgroup (hGroupParent, menulista, h2className, h3className) {var hgroup = hGroupParent.children; // Crie um fragmento de documento para envolver a lista LI gerada automaticamente correspondente a H2 e H3 var fragment = document.createCumentFragment (); para (i = 0; i <hgroup.length && hGroup [i] .NodEType === 1; i ++) {// Gere uma lista de Li para o título do tipo correspondente // parâmetro Descrição: htype é o tipo do título como H1 ~ H6; ClassName é o valor do atributo de classe da lista de LI correspondente ao título; Função titleTolist (htype, className) {var li = document.createElement ("li"); li.className = ClassName; // Adicione uma tag dentro da etiqueta Li e posicione -a com uma âncora; HGROUP [i] .id = htype + i; li.innerhtml = ("<a href = '#" + htype + i + "'>" + hgroup [i] .innerhtml + "</a>"); fragment.appendchild (li); } // Quando o elemento de título no Traversal é H2, Call TitleTolist (Htype, ClassName) para adicionar a lista Li correspondente; if (hgroup [i] .nodename.tolowerCase () == "h2") {titleTolist ("h2", h2className); } // Quando o elemento de título no Traversal é H3, Call TitleTolist (Htype, ClassName) para adicionar a lista Li correspondente; if (hgroup [i] .nodename.tolowerCase () == "h3") {titleTolist ("h3", h3className); }} // Adicione o fragmento de documento que hospeda a coleção de elementos LI correspondente ao DOM (ou seja, o elemento pai que envolve a lista Li no DOM); Menulist.AppendChild (Fragment);} </sCript> </body> </html>Resumir
O exposto acima é todo o conteúdo de gerar automaticamente a árvore de título do artigo usando JS nativo. Espero que o conteúdo deste artigo seja útil para todos. Se você tiver alguma dúvida, pode deixar uma mensagem para discutir.