Я пытаюсь динамически вытащить все элементы h3 из файла xhtml и отобразить их в списке выбора. Я создал список выбора, но мой код не извлекает элементы h3. Я очень новичок в динамическом html и чувствую себя полностью потерянным здесь. Любая помощь будет замечательной!
Вот небольшой клип файла xhtml:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
New Perspectives on HTML, XHTML and DHTML 4th Edition
Tutorial 16
Case Problem 4
The Tempest
Author: Collin Klopstein
Date: December 15, 2013
Filename: tempest.htm
Supporting files: bio_out.jpg, globe_out.jpg, plays.css, plays_out.jpg,
scene.js, son_out.jpg, strat_out.jpg
-->
<title>The Tempest, Act V, Scene 1</title>
<link href="plays.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scene.js"></script>
</head>
<body>
<div id="linklist">
<img src="plays_out.jpg" alt="The Plays" />
<img src="son_out.jpg" alt="The Sonnets" />
<img src="bio_out.jpg" alt="Biography" />
<img src="globe_out.jpg" alt="The Globe" />
<img src="strat_out.jpg" alt="Stratford" />
</div>
<div id="title"><img src="tempest.jpg" alt="The Tempest" /></div>
<div id="actList"><table><tr>
<td>ACT I</td><td>ACT II</td><td>ACT III</td>
<td>ACT IV</td><td>ACT V</td>
</tr></table></div>
<div id="characterList"></div>
<div id="sceneIntro">
<h2>Lines from Act V, Scene 1</h2>
</div>
<div id="scene">
<h3>PROSPERO</h3>
<blockquote><i>Enter PROSPERO in his magic robes, and ARIEL</i></blockquote>
<blockquote>Now does my project gather to a head:<br />
My charms crack not; my spirits obey; and time<br />
Goes upright with his carriage. How the day?
</blockquote>
<h3>ARIEL</h3>
<blockquote>On the sixth hour; at which time, my lord,<br />
You said our work should cease.
</blockquote>
<h3>PROSPERO</h3>
<blockquote>I did say so,<br />
When first I raised the tempest. Say, my spirit,<br/>
How fares the king and followers?
</blockquote>
</div>
</body>
</html>
И файл JavaScript:
/*
New Perspectives on HTML, XHTML, and DHTML 4th Edition
Tutorial 16
Case Problem 4
Author: Collin Klopstein
Date: December 15, 2013
Filename: scene.js
Function List:
uniqueElemText(elemName)
Returns the unique content from HTML tags with the
tag name elemName. The list is sorted in alphabetical
ordered and returned as an array.
*/
function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
object.addEventListener(evName, fnName, cap);
}
addEvent(window, "load", createListBox, false);//calls createListBox() when page loads
function uniqueElemText(elemName) {
elems = document.getElementsByTagName(elemName);
elemsArray = new Array();
for (var i=0; i<elems.length; i++) elemsArray[i]=elems[i].innerHTML;
elemsArray.sort();
for (i=0; i<elemsArray.length-1; i++) {
if (elemsArray[i]==elemsArray[i+1]) {
elemsArray.splice(i+1,1);
i--;
}
}
return elemsArray;
}
var characters = new Array ("h3");
var sourceDoc; // document on which the selection list is based
function createListBox() {
var cList = document.getElementById("characterList");
cList.innerHTML = "<p>Show Only Lines By:</p>";
var cSelect = document.createElement("select");//creates selection list
cList.appendChild(cSelect);//appends the selection list element to the cList element
sourceDoc = document.getElementById("scene");
uniqueElemText(sourceDoc, cSelect);//generate selection list
}
function levelNum(node) {
for (var i = 0; i < characters.length; i++) {
if (node.nodeName == characters[i])
return i;
}//node is a character
return -1;//if node is not a character
}
function createOptions(object, option) {
for (var n = object.firstChild; n != null; n = n.nextSibling) {
//loops through all of the nodes within object
var nodeLevel = levelNum(n);
if (nodeLevel != -1) {
//node represents a character
var selectOption = document.createElement("option");//creates "option" element
selectOption.innerHTML = n.innerHTML;
option.appendChild(selectOption);
}
}
}
Есть 2 проблемы:
Логика addEvent/onload не работает, вы можете, например, просто поместить вызов createListBox()
в конец вашего скрипта, чтобы исправить это.
Проверка на узел "H3" чувствительна к регистру, он работает, если вы добавляете .toLowerCase()
. Т.е. в функции levelNum()
, используйте эту строку:
if (node.nodeName.toLowerCase() == characters[i])
См. Также http://jsfiddle.net/Nzx9m.
Как насчет использования getElementsByTagName
для получения элементов H3 и indexOf
для проверки уникальных значений?
например, ваша функция может выглядеть так:
function createOptions(object, option) {
var h3Tags=object.getElementsByTagName("h3");
for(var i=0;i<h3Tags.length;i++){
var h3Tag=h3Tags[i],
val=h3Tag.innerHTML,
selectOption = document.createElement("option");
selectOption.innerHTML = val;
if(characters.indexOf(val)==-1) {
characters.push(val);
option.appendChild(selectOption);
}
}
}
см. эту скрипту для рабочего примера (она не делает последнюю часть, т.е. отображает только строки из выбранного символа)... http://jsfiddle.net/dTdV4/
levelNum
может быть полностью замененоreturn character.indexOf(node.nodeName);
,