Question

我正在尝试从xhtml文件中动态提取所有h3元素并将其显示在选择列表中。我创建了选择列表，但我的代码没有检索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's 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's 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);
        }
    }
}

Answer 1

有两个问题：

addEvent / onload逻辑似乎不起作用，例如，你可以只需在脚本末尾调用createListBox()即可解决此问题。

检查＆＃34; H3＆＃34;节点区分大小写，如果添加.toLowerCase()，它就有效。即在函数levelNum()中，使用以下行：

if (node.nodeName.toLowerCase() == characters[i])

另见http://jsfiddle.net/Nzx9m。

Answer 2

如何使用getElementsByTagName来获取H3元素，indexOf来测试唯一值？

e.g。你的功能看起来像这样;

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/

我试图动态从xhtml文件中提取所有<h3>元素并使用javascript将它们放入选择列表</h3>

2 个答案: