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)

Related labels：

dom javascript

source：php.cn

Previous article：Ajax information feedback display similar to GMAIL_Page background Next article：JavaScript DOM Learning Chapter 2 Editing Text_Basic Knowledge

Statement of this Website

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

Latest Articles by Author

• What is a NullPointerException, and how do I fix it?
  2024-10-22 09:46:29
• From Novice to Coder: Your Journey Begins with C Fundamentals
  2024-10-13 13:53:41
• Unlocking Web Development with PHP: A Beginner's Guide
  2024-10-12 12:15:51
• Demystifying C: A Clear and Simple Path for New Programmers
  2024-10-11 22:47:31
• Unlock Your Coding Potential: C Programming for Absolute Beginners
  2024-10-11 19:36:51
• Unleash Your Inner Programmer: C for Absolute Beginners
  2024-10-11 15:50:41
• Automate Your Life with C: Scripts and Tools for Beginners
  2024-10-11 15:07:41
• PHP Made Easy: Your First Steps in Web Development
  2024-10-11 14:21:21
• Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity
  2024-10-11 12:59:11
• The Key to Coding: Unlocking the Power of Python for Beginners
  2024-10-11 12:17:31

Latest Issues

CSS only method to dynamically modify image src on click without using JavaScript I need to change the src of an image on mouse click using only css like img:active{}

From 2024-04-06 19:25:49

0

1

505

Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...

From 2024-04-06 18:16:26

0

1

403

JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...

From 2024-04-06 15:35:24

0

1

274

Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...

From 2024-04-06 14:54:03

0

2

421

Customize the appearance of Bootstrap accordion headers using the CollapseDisplay class I want to style the card title of a panel with class collapseshow. In this example, it's t...

From 2024-04-06 12:53:11

0

1

376

Related Topics

More>

• js method to get array length
• js refresh current page
• js rounding
• js method to delete node
• JavaScript escape characters
• How to generate random numbers in js
• How to enable JavaScript
• Detailed explanation of Symbol class in JS