JavaScript DOM Learning Chapter 3 Content Table_Basic Knowledge

If you also want to do this, then you also need my getElementByTagNames() function.

Copy code The code is as follows:

function createTOC() {
var y = document .createElement('div');
y.id = 'innertoc';
var a = y.appendChild(document.createElement('span'));
a.onclick = showhideTOC;
a.id = 'contentheader';
a.innerHTML = 'show page contents';
var z = y.appendChild(document.createElement('div'));
z.onclick = showhideTOC ;
var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5');
if (toBeTOCced.length < 2) return false;

for (var i=0;i< toBeTOCced.length;i ) {
var tmp = document.createElement('a');
tmp.innerHTML = toBeTOCced[i].innerHTML;
tmp.className = 'page';
z.appendChild(tmp);
if (toBeTOCced[i].nodeName == 'H4')
tmp.className = ' indent';
if (toBeTOCced[i].nodeName == 'H5 ')
tmp.className = ' extraindent';
var headerId = toBeTOCced[i].id || 'link' i;
tmp.href = '#' headerId;
toBeTOCced[i ].id = headerId;
if (toBeTOCced[i].nodeName == 'H2') {
tmp.innerHTML = 'Top';
tmp.href = '#top';
toBeTOCced[i].id ='top'; () {
TOCstate = (TOCstate == 'none') ? 'block' : 'none';
var newText = (TOCstate == 'none') ? 'show page contents' : 'hide page contents ';
document.getElementById('contentheader').innerHTML = newText;
document.getElementById('innertoc').lastChild.style.display = TOCstate;
}


Explanation
This code runs as follows:
Preparation phase
First I create a

to place the table content

Copy code


The code is as follows:

function createTOC() { var y = document.createElement('div'); y. id = 'innertoc'; Then add a tag above it. Clicking on this element will run the showhideTOC() function, which I explain below.

Copy code

The code is as follows:

var a = y.appendChild(document.createElement(' span')); a.onclick = showhideTOC; a.id = 'contentheader'; a.innerHTML = 'show page contents';

Then I Create a DIV to place the actual link. Clicking on this div (the real meaning is: clicking on any link in this div) will also trigger the showhideTOC() function.

Copy code

The code is as follows:

var z = y.appendChild(document.createElement(' div')); z.onclick = showhideTOC; Get the title Then create a new toBeTOCced array, and then use my getElementByTagNames() function to get the left and right titles of the entire page.

Copy code

The code is as follows:

var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5');

Stop if there is only one element in the array (for example, this page only has one h2 title). I don't want the ToC to have only one element.

Create ToC
Start creating ToC now. First iterate through the toBeTOCced array. For each element I create a link that is the same as their title. Pay attention to the use of innerHTML: Some titles on the website contain HTML tags such as , and I also want these to be displayed in the ToC. I added these new links to the

inside the ToC.

Copy code The code is as follows:

for (var i=0;i< toBeTOCced.length;i ) {
var tmp = document.createElement('a');
tmp.innerHTML = toBeTOCced[i].innerHTML;
tmp.className = 'page';
z.appendChild(tmp);

If the title is h4 or h5 I will add an extra class.

Copy code The code is as follows:

if (toBeTOCced[i].nodeName == 'H4 ')
tmp.className = ' indent';
if (toBeTOCced[i].nodeName == 'H5')
tmp.className = ' extraindent';

Now we need to link the a element to its actual title. This requires a unique ID. However, these headers may already contain an ID. I don't want to break the original internal linking, so I prefer to use the original ID of the title. Only if the title doesn't have an ID do I create a new ID.

Copy code The code is as follows:

var headerId = toBeTOCced[i].id || 'link' i ;

The href attribute of the link we just created should be #headerId, and the title itself also has an ID.

Copy code The code is as follows:

tmp.href = '#' headerId;
toBeTOCced[i].id = headerId;

A special case: if the header is H2, which is the top of the page, you will also get an ID.

Copy code The code is as follows:

if (toBeTOCced[i].nodeName == 'H2 ') {
tmp.innerHTML = 'Top';
tmp.href = '#top';
toBeTOCced[i].id = 'top';
}
}

Now that the form is produced, we return it to the place where it was called.

Copy code The code is as follows:

return y;}

Display and Hide ToC
The last function is used to show and hide ToC. Very simple, first detect the status of ToC, and then generate a new text and display value based on the information.

Copy code The code is as follows:

var TOCstate = 'none';
function showhideTOC () {
TOCstate = (TOCstate == 'none') ? 'block' : 'none';
var newText = (TOCstate == 'none') ? 'show page contents' : 'hide page contents ';
document.getElementById('contentheader').innerHTML = newText;
document.getElementById('innertoc').lastChild.style.display = TOCstate;
}

This function is called when the user clicks so that he can switch the display of ToC. In addition, the ToC will be hidden immediately when the user clicks on the link.
Translation address: http://www.quirksmode.org/dom/toc.html
Please keep the following information for reprinting
Author: Beiyu (tw:@rehawk)

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Ajax information feedback display similar to GMAIL_Page backgroundNext article：Ajax information feedback display similar to GMAIL_Page background

Related articles

See more

• An in-depth analysis of the Bootstrap list group component
• Detailed explanation of JavaScript function currying
• Complete example of JS password generation and strength detection (with demo source code download)
• Angularjs integrates WeChat UI (weui)
• How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills