The implementation principle is very simple, which is to loop through the article module, extract the h2 and h3 tags, and assign the content to the newly created title tree.
The code is as follows:
HTML code:
<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 hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello 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 code:
* { margin: 0; padding: 0; border: 0;}body { font: 16px/1.5;}ul li, ol li { list-style: none;}.contextBox { position: relative; width: 960px; margin: 0 auto;}#article { margin-left: 200px; border: 1px #eee solid; padding: 15px;}.articleMenu a { text-decoration: none; color: #333;}.articleMenu a:hover { color: #f85455;}.articleMenu-box { width: 170px; position: absolute; left: 10px; top: 10px;}.articleMenu { padding: 10px; border: 1px solid #ccc; box-shadow: 2px 2px 2px #eee;}.titleH2, .titleH3 { line-height: 1.5em;}.titleH2 { font-weight: bold;}.titleH3 { margin-left: 20px;}.articleMenu .articleMenu-close, .articleMenu-open { display: inline-block; position: absolute; right: 0; top: 0; height: 44px; width: 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%;}JavaScript code:
var article = document.getElementById("article");var articleHgroupMenu = document.getElementById("articleMenu");// Close and expand the document tree 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");// Obtain the title element with title h2~h3 in the direct child elements under obj // Parameter description: hgroupParent is the direct parent element containing h2 and h3; MenuList is the ul element that carries the newly created article list; // h2ClassName and h3ClassName are the Class attributes of the li-list corresponding to h2 and h3 in the newly created article list respectively; function titleHgroup(hgroupParent, MenuList, h2ClassName, h3ClassName) { var hgroup = hgroupParent.children; // Create a document fragment to wrap the automatically generated li-list corresponding to h2 and h3 var fragment = document.createDocumentFragment(); for(i = 0; i < hgroup.length && hgroup[i].nodeType === 1; i++) { // Generate a li-list for the title of the corresponding type// Parameter description: hType is the type of the title such as h1~h6; className is the class attribute value of the li list corresponding to the title; function titleToList(hType, className) { var li = document.createElement("li"); li.className = className; // Add a tag inside the li tag and locate it with an anchor; hgroup[i].id= hType + i; li.innerHTML = ("<a href='#" + hType + i + "'>" + hgroup[i].innerHTML +"</a>"); fragment.appendChild(li); } // When the title element in the traversal is h2, call titleToList(hType, className) to add the corresponding li list; if(hgroup[i].nodeName.toLowerCase() == "h2") { titleToList("h2", h2ClassName); } // When the title element in the traversal is h3, call titleToList(hType, className) to add the corresponding li list; if(hgroup[i].nodeName.toLowerCase() == "h3") { titleToList("h3", h3ClassName); } } // Add the document fragment fragment that bears the corresponding li element collection to the DOM (that is, the parent element that wraps the li list in the DOM); MenuList.appendChild(fragment);}Complete example 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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Native JS implementation automatically generates article title tree</title><style type="text/css">* { margin: 0; padding: 0; border: 0;}body { font: 16px/1.5;}ul li, ol li { list-style: none;}.contextBox { position: relative; width: 960px; margin: 0 auto;}#article { margin-left: 200px; border: 1px #eee solid; padding: 15px;}.articleMenu a { text-decoration: none; color: #333;}.articleMenu a:hover { color: #f85455;}.articleMenu-box { width: 170px; position: absolute; left: 10px; top: 10px;}.articleMenu { padding: 10px; border: 1px solid #ccc; box-shadow: 2px 2px 2px #eee;}.titleH2, .titleH3 { line-height: 1.5em;}.titleH2 { font-weight: bold;}.titleH3 { margin-left: 20px;}.articleMenu .articleMenu-close, .articleMenu-open { display: inline-block; position: absolute; right: 0; height: 44px; width: 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>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 /> 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 hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hell <h2>Secondary title</h2> <h3>Secondary title</h3> <h3>Secondary title</h3> <p>world w<br />orld <br />world world wo<br />rld world world world<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>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 title</h3> <h3>Level 3 title</h3> <h3>Level 3 title</h3> <h3>Level 3 title</h3> </div> <div id="articleMenu_box"> <span id="articleMenu_open"></span> <ul id="articleMenu"> <span id="articleMenu_close"></span> </ul> </div></div><script type="text/javascript">var article = document.getElementById("article");var articleHgroupMenu = document.getElementById("articleMenu");// Close and expand the document tree 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");// 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 is the ul element that hosts the newly created article list; // h2ClassName and h3ClassName are the Class attributes of the li-list corresponding to h2 and h3 in the newly created article list; function titleHgroup(hgroupParent, MenuList, h2ClassName, h3ClassName) { var hgroup = hgroupParent.children; // Create a document fragment to wrap the automatically generated li-list corresponding to h2 and h3 var fragment = document.createDocumentFragment(); for(i = 0; i < hgroup.length && hgroup[i].nodeType === 1; i++) { // Generate a li list for the title of the corresponding type// Parameter description: hType is the type of the title such as h1~h6; className is the class attribute value of the li list corresponding to the title; function titleToList(hType, className) { var li = document.createElement("li"); li.className = className; // Add a tag inside the li tag and position it with an anchor; hgroup[i].id= hType + i; li.innerHTML = ("<a href='#" + hType + i + "'>" + hgroup[i].innerHTML +"</a>"); fragment.appendChild(li); } // When the title element in the traversal is h2, call titleToList(hType, className) to add the corresponding li list; if(hgroup[i].nodeName.toLowerCase() == "h2") { titleToList("h2", h2ClassName); } // When the title element in the traversal is h3, call titleToList(hType, className) to add the corresponding li list; if(hgroup[i].nodeName.toLowerCase() == "h3") { titleToList("h3", h3ClassName); } } // Add the document fragment that hosts the corresponding li element collection to the DOM (that is, the parent element that wraps the li list in the DOM); MenuList.appendChild(fragment);}</script></body></html>Summarize
The above is all the content of automatically generating the article title tree using native JS. I hope the content of this article will be helpful to everyone. If you have any questions, you can leave a message to discuss.