Prinsip implementasi sangat sederhana, yaitu untuk mengulangi modul artikel, mengekstrak tag H2 dan H3, dan menetapkan konten ke pohon judul yang baru dibuat.
Kodenya adalah sebagai berikut:
Kode HTML:
<div> <div id="article"> <h2>Secondary title</h2> <h3>Secondary title</h3> <p>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 hello hello hello hello hello PERLUASAN dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia dunia id = "articlemenu_box"> <span id = "articlemenu_open"> </span> <ul id = "articlemenu"> <span id = "articlemenu_close"> </span> </ul> </div> </div>
Kode CSS:
* {margin: 0; Padding: 0; BORDER: 0;} body {font: 16px/1.5;} ul li, ol li {List-style: none;}. ContextBox {Position: Relative; Lebar: 960px; margin: 0 auto;}#artikel {margin-left: 200px; Border: 1px #EEE SOLID; padding: 15px;}. Articlemenu a {Text-Decoration: None; Warna: #333;}. Articlemenu A: Hover {Color: #f85455;}. Articlemenu-box {width: 170px; Posisi: Absolute; Kiri: 10px; atas: 10px;}. Articlemenu {padding: 10px; Perbatasan: 1px solid #ccc; Kotak-Shadow: 2px 2px 2px #EEE;}. TitleH2, .Titleh3 {line-height: 1.5em;}. TitleH2 {font-weight: Bold;}. TitleH3 {margin-left: 20px;}. ArticleMenu. Articlemenu; margin-left: 20px;}. Posisi: Absolute; Kanan: 0; TOP: 0; Tinggi: 44px; Lebar: 44px; Kursor: pointer;}. Articlemenu-open {latar belakang: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_open.png") no-repeat 50% 50%; Tampilan: tidak ada;}. Articlemenu .Articlemenu-close {latar belakang: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_close.png") no-repeat 50% £ 50%} tanpa repeat 50%} tanpa repeat 50% £ 50%;Kode JavaScript:
var artikel = document.geteLementById ("artikel"); var artikelHgroupMenu = document.geteLementById ("articlemenu"); // tutup dan perluas pohon dokumen var articlemenu_open = document.geteLementById ("articlemenu_open"); var articlemenu_clemenu_ document.geteLementById ("articlemenu_close"); articlemenu_close.onClick = function () {artikelHgroupMenu.style.display = "none"; articlemenu_open.style.display = "block";}; articlemenu_open.onClick = function () {artikelhgroupmenu.style.display = "block"; Articlemenu_open.style.display = "none";}; // titleHgroup (artikel, artikelhgroupmenu, "titleeh2", "titleeh3"); // dapatkan elemen judul dengan judul h2 ~ h3 dalam elemen anak langsung yang bersaing hgroupparent adalah elemen induk langsung; Menulist adalah elemen UL yang membawa daftar artikel yang baru dibuat; // H2ClassName dan H3ClassName adalah atribut kelas dari Li-list yang sesuai dengan H2 dan H3 dalam daftar artikel yang baru dibuat masing-masing; fungsi titleHgroup (hgroupparent, menulist, h2classname, h3classname) {var hgroup = hgrupparent.children; // Buat fragmen dokumen untuk membungkus daftar-Li yang dihasilkan secara otomatis sesuai dengan H2 dan H3 var fragment = document.createdocumentFragment (); untuk (i = 0; i <hgroup.length && hgroup [i] .nodetype === 1; i ++) {// Hasilkan daftar li untuk judul tipe // parameter yang sesuai Deskripsi: HType adalah jenis judul seperti H1 ~ H6; ClassName adalah nilai atribut kelas dari daftar LI yang sesuai dengan judul; fungsi titletolist (hType, className) {var li = document.createElement ("li"); li.classname = className; // Tambahkan tag di dalam tag LI dan temukan dengan jangkar; hgroup [i] .id = htype + i; li.innerHtml = ("<a href = '#" + htype + i + "'>" + hgroup [i] .innerHtml + "</a>"); Fragment.AppendChild (Li); } // Ketika elemen judul dalam traversal adalah H2, hubungi Titletolist (hType, className) untuk menambahkan daftar LI yang sesuai; if (hgroup [i] .nodename.tolowercase () == "h2") {titletolist ("h2", h2classname); } // Ketika elemen judul dalam traversal adalah H3, hubungi Titletolist (hType, className) untuk menambahkan daftar LI yang sesuai; if (hgroup [i] .nodename.tolowercase () == "h3") {titletolist ("h3", h3classname); }} // Tambahkan fragmen fragmen dokumen yang menyandang koleksi elemen Li yang sesuai ke DOM (yaitu, elemen induk yang membungkus daftar LI di DOM); Menulist.AppendChild (fragmen);}Kode contoh lengkap
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns = "http://www.w3.org/1999/xhtml"> <adept> <meta http-equiv = "konten-tipe" konten = "teks/html; charset = gb2312"/<title> implementasi js asli secara otomatis menghasilkan artikel TREE TREEK </title> Padding: 0; BORDER: 0;} body {font: 16px/1.5;} ul li, ol li {List-style: none;}. ContextBox {Position: Relative; Lebar: 960px; margin: 0 auto;}#artikel {margin-left: 200px; Border: 1px #EEE SOLID; padding: 15px;}. Articlemenu a {Text-Decoration: None; Warna: #333;}. Articlemenu A: Hover {Color: #f85455;}. Articlemenu-box {width: 170px; Posisi: Absolute; Kiri: 10px; atas: 10px;}. Articlemenu {padding: 10px; Perbatasan: 1px solid #ccc; Kotak-Shadow: 2px 2px 2px #EEE;}. TitleH2, .Titleh3 {line-height: 1.5em;}. TitleH2 {font-weight: Bold;}. TitleH3 {margin-left: 20px;}. ArticleMenu. Articlemenu; margin-left: 20px;}. Posisi: Absolute; Kanan: 0; Tinggi: 44px; Lebar: 44px; Kursor: pointer;}. Articlemenu-open {latar belakang: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_open.png") no-repeat 50% 50%; Tampilan: tidak ada;}. Articlemenu .Articlemenu-close {latar belakang: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_close.png") no-repeat 50% 50% 50%; <h2> Judul Sekunder </h2> <h3> Judul Sekunder </h3> <p> Halo <bR /> halo <bR /> halo <bR /> halo <bR /> halo <bR /> halo <bR /> halo <bR /> halo <bR /> halo <bR /hello <bR /hello <bR /> halo <bR /hello <bR /hello <br /> hello <bR /hello <bR /hello <bR /hello <bR /hello <br /hello <br hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> hello<br /> 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 PERLUASAN Dunia <bR /> LD Dunia <br /> dunia <br /> dunia <br /> w <bR /> dunia <br /> w <bR /> dunia <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<br />orld w<br />orld w<br /> orld w <br/> orld </p> <h3> tingkatan level 3 </h3> <h3> title level 3 title </h3> <h2> level 3 title </h2> <h3> title </h3> level 3 level </h3> <h3> <h3> Level 3 Judul </h3> <h3> Level 3 Level </H3> <h3> Level 3 Judul </H3> <h3> Level 3 Level 2 Judul </h3> <h3> tingkatan level 3 </h3> <h3> tingkatan level 3 </h3> <h3> tingkatan level 3 </h3> </div> <div id = "articlemenu_box"> <span id = "articlemenu_open"> </span> <ul id = "articlemenu"> <"uLeC =" uLEC = "uLEC =" uLEC = "ARTICLEMENU_OPEN"> </span> <ul ID = "articlemenu"> <"uLeT"> </spane. " </div> </div> <script type = "text/javaScript"> var artikel = document.geteLementById ("artikel"); var artikelHgroupMenu = document.geteLementById ("articlemenu"); // tutup dan perlengkapan dokumen varticlemenu_open = document.getelementbyDen (" document.geteLementById ("articlemenu_close"); articlemenu_close.onClick = function () {artikelHgroupMenu.style.display = "none"; articlemenu_open.style.display = "block";}; articlemenu_open.onClick = function () {artikelhgroupmenu.style.display = "block"; articleMenu_open.style.display = "none";};//titleHgroup(article, articleHgroupMenu, "titleH2", "titleH3");// Obtain the title element with title h2~h3 in the direct child element under obj// Parameter description: hgroupParent is the direct parent element containing h2 and h3; Menulist adalah elemen UL yang meng -host daftar artikel yang baru dibuat; // H2ClassName dan H3ClassName adalah atribut kelas dari Li-list yang sesuai dengan H2 dan H3 dalam daftar artikel yang baru dibuat; fungsi titleHgroup (hgroupparent, menulist, h2classname, h3classname) {var hgroup = hgrupparent.children; // Buat fragmen dokumen untuk membungkus daftar-Li yang dihasilkan secara otomatis sesuai dengan H2 dan H3 var fragment = document.createdocumentFragment (); untuk (i = 0; i <hgroup.length && hgroup [i] .nodetype === 1; i ++) {// Hasilkan daftar LI untuk judul tipe // parameter yang sesuai Deskripsi: HType adalah jenis judul seperti H1 ~ H6; ClassName adalah nilai atribut kelas dari daftar LI yang sesuai dengan judul; fungsi titletolist (hType, className) {var li = document.createElement ("li"); li.classname = className; // Tambahkan tag di dalam tag LI dan posisikan dengan jangkar; hgroup [i] .id = htype + i; li.innerHtml = ("<a href = '#" + htype + i + "'>" + hgroup [i] .innerHtml + "</a>"); Fragment.AppendChild (Li); } // Ketika elemen judul dalam traversal adalah H2, hubungi Titletolist (hType, className) untuk menambahkan daftar LI yang sesuai; if (hgroup [i] .nodename.tolowercase () == "h2") {titletolist ("h2", h2classname); } // Ketika elemen judul dalam traversal adalah H3, hubungi Titletolist (hType, className) untuk menambahkan daftar LI yang sesuai; if (hgroup [i] .nodename.tolowercase () == "h3") {titletolist ("h3", h3classname); }} // Tambahkan fragmen dokumen yang meng -host koleksi elemen LI yang sesuai ke DOM (yaitu, elemen induk yang membungkus daftar LI di DOM); Menulist.AppendChild (fragmen);} </script> </body> </html>Meringkaskan
Di atas adalah semua konten untuk secara otomatis menghasilkan pohon judul artikel menggunakan JS asli. Saya berharap konten artikel ini akan membantu semua orang. Jika Anda memiliki pertanyaan, Anda dapat meninggalkan pesan untuk didiskusikan.