JavaScript DOM Learning Chapter III Content Table _ basics

If you want to do the same, then you need my getelementbytagnames () function.

Copy Code code 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 ';
}
}
return y;
}

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;
}

Explain
This code runs as follows:
Preparation phase
First I create a <div id= "Innertoc" > to place the contents of the table

Copy Code code as follows:

function Createtoc () {
var y = document.createelement (' div ');
y.id = ' Innertoc ';

Then add a <span> tag on top of him. Clicking on this element will run the SHOWHIDETOC () function, which I will explain below.

Copy Code code 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 with a place to put the real link. Clicking on this div (the real meaning: clicking on any link in the DIV) triggers the SHOWHIDETOC () function.

Copy Code code as follows:

var z = y.appendchild (document.createelement (' div '));
Z.onclick = Showhidetoc;

Get the title
Then create a new tobetocced array and use my getelementbytagnames () function to get the left and right headings of the entire page.

Copy Code code as follows:

var tobetocced = getelementsbytagnames (' H2,h3,h4,h5 ');

If there is only one element in the array (for example, the page has only one H2 title), stop. I don't want the TOC to have only one element.

Create TOC
Start creating the TOC now. First traverse the tobetocced array. For each element I create a link that is the same as their title. Note the use of innerHTML: There are some titles in the Web site that contain HTML tags such as <code>, which I would like to show in the TOC. I add these new links to the <div> in the TOC.

Copy Code code 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 add an extra class.

Copy Code code as follows:

if (Tobetocced[i].nodename = = ' H4 ')
Tmp.classname + = ' indent ';
if (Tobetocced[i].nodename = = ' H5 ')
Tmp.classname + = ' extraindent ';

Now we need to link a element to his real title. This requires a unique ID. However, these headings may already contain an ID. I don't want to break the original internal link, so I prefer to use the ID of the title. I only create a new ID when the title has no ID.

Copy Code code 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 has an ID.

Copy Code code as follows:

Tmp.href = ' # ' + Headerid;
Tobetocced[i].id = Headerid;

A special case: if the title is H2, that's the top of the page, and you get an ID.

Copy Code code 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 invoked.

Copy Code code as follows:

return y;}

Show and Hide TOC
Finally, this function shows and hides the TOC. Very simple, first test the state of the TOC, and then produce a new text and display value based on the information.

Copy Code code 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 <span>, so he can toggle the TOC display. Also hides the TOC as soon as the user clicks on the link.
Translation Address: http://www.quirksmode.org/dom/toc.html
Reprint please keep the following information
Author: North Jade (TW: @rehawk)