Author (nodeList) Array
This learning web page examines how to pull data from a set of page elements in order to create a list which can be stored in an array. With the data in the array, it is then possible to manipulate the list and eventually create links back to the elements from which the data was gathered.
Each author is part of the Web page in a div with the class 'auth'. For Robert Heinlein, I also added (later in the learning/dev process) an associated book note of the style done in "Recent Reading" web pages. Note that nodeList data can be pulled from other block page elements like the paragraph tag <p class="foo">, for example, doing the data capture with the class you used in the tag.
The two new concepts (for me) were learning about nodeList and the relationship with that and arrays.
The next section, between the horizontal lines, is the <div> section from which the authors' names are harvested.
July 21, 2015
The life of an actor gets very complex when he is hired to be a temporary stand-in for the President. It gets even more complex when the President dies and the actor must continue to play the role.
Recommended
A script pulls together all the authors into an array, converting from a nodeList. To work more efficiently, the script might need to be called as a function only after the document finishes loading. if (document.readyState === "complete") { func(); }
A nodeList is an "array-like" object in JavaScript which comes from the HTML DOM (Document Object Model) and shares some array features, but not all of them which makes it necessary to convert from nodeList to array for all the manipulations I might want.
<script>
var authors = [];
var authorsNode = document.getElementsByClassName('auth');
// creates a nodeList containing all matching data
// A nodeList is "array-like" but NOT an array
document.write('<br>' + authorsNode[0] + ' not what I wanted'); // Reference only
document.write('<br>' + authorsNode[0].innerHTML);
document.write('<br>authorsNode.length = ' + authorsNode.length);
// for(var i = nl.length; i--; arr.unshift(nl[i]))
// http://stackoverflow.com/questions/3199588/fastest-way-to-convert-javascript-nodelist-to-array
for (var i=authorsNode.length; i--; authors.unshift(authorsNode[i].innerHTML));
document.write('<br>authors array length = ' + authors.length + '<br>');
document.write('<br> array = ' + authors);
// document.write(authorsNode);
</script>
I also added a loop to print the individual author names.
for (var xi=0; xi < authors.length; xi++) { document.write('author ' + (xi+1) + ' is ' + authors[xi] + '<br>')};
// note that the parentheses around (xi+1) are required
// or the digit 1 will be treated as concatenated (I think)
It is possible to use JavaScript to create a list of links (using a for loop), each of which properly goes to the div of the link's displayed author. That should also make it possible to provide a list of links to the div containing not only the author, but the rest of a book note - which I've actually now done for the first div with Robert Heinlein.
Click on one of the hyperlinked author names and the page should jump up to the appropriate place near the top.
Note:
This list would probably be best displayed as a 'table of contents' at the top of a web page instead of way down here on this development/learning page.
document.write('<p>It is possible to create a list of links to the div of each author in a for loop.'</p>');
// var a = 1;
// document.write('<br><br><a href="#1">' + authors[a] + '</a>');
document.write('<ul>');
for (var a=0; a < authors.length; a++) {
document.write('<li><a href="#' + (a+1) + '">' + authors[a] + '</a></li>');
};
// Carefully note the use of single and double quotes in the preceding line.
document.write('</ul>');
Successfully making the links work requires very careful attention to the quoting of the various pieces of the statement. Look carefully at the code listing.
After some further exploration this technique has lead to an update of the Recent Reading page, adding an authors list.