Принцип реализации очень прост, который должен пройти через модуль статьи, извлечь теги H2 и H3 и назначить контент в недавно созданное дерево заголовка.
Код заключается в следующем:
HTML -код:
<div> <div> <div id = "article"> <h2> вторичное название </h2> <h3> второстепенное название </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 world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world world 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>
CSS -код:
* {маржа: 0; Заполнение: 0; Border: 0;} Body {font: 16px/1.5;} ul li, ol li {list-style: none;}. contextbox {position: относительно; Ширина: 960px; Маржа: 0 auto;}#article {margin-left: 200px; Граница: 1PX #EEE твердый; Надо: 15px;}. articlemenu a {text-decoration: none; Цвет: #333;}. articlemenu a: Hover {color: #f85455;}. Articlemenu-box {width: 170px; позиция: абсолютно; Слева: 10px; Верх: 10px;}. articlemenu {padding: 10px; Граница: 1PX SOLID #CCC; Box-Shadow: 2px 2px 2px #eee;}. Titleh2, .titleh3 {line-hight: 1.5em;}. titleh2 {font-weight: bold;}. titleh3 {margin-left: 20px;}. Articlemenu .ArticleMenu-Close-Close, .ArticLemen позиция: абсолютно; Справа: 0; Верх: 0; Высота: 44px; Ширина: 44px; Cursor: pointer;}. articlemenu-open {founal: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_open.png") без перепивания 50% 50%; дисплей: none;}. articlemenu .ArticLemenu-close {founal: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_close.png") no-Repeat 50%;};};};};};};};};};Код JavaScript:
var article = document.getelementbyid ("article"); var articlehgroupmenu = document.getelementbyid ("articlemenu"); // закрыть и расширить дерево документов var articlemenu_open = document.getelementbyid ("articlemenu_open"); variclemenu_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 = "non";}; // titlehgroup (статья, articlehgroupmenu, "titleH2", "titleH3"); // Получить элемент заголовка с заголовком H2 ~ H3 в элементах прямых дочерних детей в разделе OBJ // Описание параметра: HGROUPPARENT является прямым родительским элементом, содержащим H2 и H3; Менулистик - это элемент UL, который несет недавно созданный список статьи; // h2classname и h3classname являются атрибутами класса Li-list, соответствующих H2 и H3 в недавно созданном списке статьи соответственно; Функция TitleHgroup (Hgroupparent, Menustist, H2ClassName, H3ClassName) {var hgroup = hgroupparent.children; // Создать фрагмент документа, чтобы обернуть автоматически сгенерированный лист LI, соответствующий H2 и H3 var fragment = document.createdocumentfragment (); for (i = 0; i <hgroup.length && hgroup [i] .nodeType === 1; i ++) {// генерировать Li-list для названия соответствующего типа // Описание параметра: HTYPE-это тип заголовка, такой как H1 ~ H6; ClassName - это значение атрибута класса списка LI, соответствующего заголовку; функция titletolist (htype, classname) {var li = document.createElement ("li"); li.classname = classname; // добавить тег в тег LI и найти его с якорем; hgroup [i] .id = htype + i; li.innerhtml = ("<a href = '#" + htype + i + "'>" + hgroup [i] .innerhtml + "</a>"); fragment.appendchild (li); } // Когда заглавным элементом в обходе является H2, вызов титлелиста (htype, classname), чтобы добавить соответствующий список LI; if (hgroup [i] .nodename.tolowercase () == "h2") {titletolist ("h2", h2classname); } // Когда заглавным элементом в обходе является H3, вызов титлелиста (htype, classname), чтобы добавить соответствующий список LI; if (hgroup [i] .nodeName.tolowercase () == "h3") {titletolist ("h3", h3classname); }} // Добавить фрагмент фрагмента документа, который несет соответствующую коллекцию элементов LI в DOM (то есть родительский элемент, который завершает список LI в DOM); Menulist.appendchild (фрагмент);}Полный пример кода
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <Head> <Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <title> Нативная реализация JS Автоматически генерирует название статьи </tilt> <стиль. Заполнение: 0; Border: 0;} Body {font: 16px/1.5;} ul li, ol li {list-style: none;}. contextbox {position: относительно; Ширина: 960px; Маржа: 0 auto;}#article {margin-left: 200px; Граница: 1PX #EEE твердый; Надо: 15px;}. articlemenu a {text-decoration: none; Цвет: #333;}. articlemenu a: Hover {color: #f85455;}. Articlemenu-box {width: 170px; позиция: абсолютно; Слева: 10px; Верх: 10px;}. articlemenu {padding: 10px; Граница: 1PX SOLID #CCC; Box-Shadow: 2px 2px 2px #eee;}. Titleh2, .titleh3 {line-hight: 1.5em;}. titleh2 {font-weight: bold;}. titleh3 {margin-left: 20px;}. Articlemenu .ArticleMenu-Close-Close, .ArticLemen позиция: абсолютно; Справа: 0; Высота: 44px; Ширина: 44px; Cursor: pointer;}. articlemenu-open {founal: url ("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_open.png") без перепивания 50% 50%; дисплей: none;}. articlemenu .Articlemenu-close {founal: url ("http://www.dengzzhr.com/wp-content/themes/dengzhr/images/icon_articlemenu_close.png") no-Repeat 50% 50%; id="article"> <h2>Secondary title</h2> <h3>Secondary title</h3> <p>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 /> Привет <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 /> Привет <br /> hello <br /> Привет, привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет Привет, привет привет привет привет привет привет привет привет, привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет привет />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<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> title 3 title </h3> <h3> title 3 Title </h3> <h2> Название 3 -го уровня </h2> <h3> title 3 title </h3> <h3> neatural 3 title </h3> <h3> title 3 with <h3> Название 3 -го уровня 3 </h3> <h3> title 3 title </h3> <h3> streat 3 title </h3> <h3> teit id = "articlemenu_close"> </span> </ul> </div> </div> <script type = "text/javascript"> var article = document.getelementbyid ("article"); var articlehgroupmenu = document.getelementbyid ("articlemenu"); // закрыть и расширить дерево документа articlemen 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 = "non";}; // titlehgroup (статья, articlehgroupmenu, "titleh2", "titleh3"); // Получить элемент заголовка с заголовком H2 ~ H3 в прямом дочернем элементе в разделе OBJ // Описание параметра: hgroupparent - это прямой родительский элемент, содержащий H2 и H3; Менулистик - это элемент UL, который размещает недавно созданный список статьи; // h2classname и h3classname являются атрибутами класса Li-list, соответствующего H2 и H3 в недавно созданном списке статьи; Функция TitleHgroup (Hgroupparent, Menustist, H2ClassName, H3ClassName) {var hgroup = hgroupparent.children; // Создать фрагмент документа, чтобы обернуть автоматически сгенерированный лист LI, соответствующий H2 и H3 var fragment = document.createdocumentfragment (); for (i = 0; i <hgroup.length && hgroup [i] .nodeType === 1; i ++) {// генерировать список Li для названия соответствующего типа // Описание параметра: HTYPE - это тип заголовка, такой как H1 ~ H6; ClassName - это значение атрибута класса списка LI, соответствующего заголовку; функция titletolist (htype, classname) {var li = document.createElement ("li"); li.classname = classname; // Добавить тег в тег LI и поместить его якорем; hgroup [i] .id = htype + i; li.innerhtml = ("<a href = '#" + htype + i + "'>" + hgroup [i] .innerhtml + "</a>"); fragment.appendchild (li); } // Когда заглавным элементом в обходе является H2, вызов титлелиста (htype, classname), чтобы добавить соответствующий список LI; if (hgroup [i] .nodename.tolowercase () == "h2") {titletolist ("h2", h2classname); } // Когда заглавным элементом в обходе является H3, вызов титлелиста (htype, classname), чтобы добавить соответствующий список LI; if (hgroup [i] .nodeName.tolowercase () == "h3") {titletolist ("h3", h3classname); }} // Добавить фрагмент документа, который проводит соответствующую коллекцию элементов LI в DOM (то есть родительский элемент, который завершает список LI в DOM); Menuist.AppendChild (фрагмент);} </script> </body> </html>Суммировать
Выше приведено все содержание автоматического генерирования дерева заголовка статьи с использованием Native JS. Я надеюсь, что содержание этой статьи будет полезно для всех. Если у вас есть какие -либо вопросы, вы можете оставить сообщение для обсуждения.