Javascript获取第二个孩子的nodeValue？

我只有一个步骤要做，这个任务就完成了。Javascript获取第二个孩子的nodeValue？

ONMOUSEOVER事件应显示span标记之间的文本。现在，它在span标签之前显示文本（与链接文本相同）。这是firstChild，我需要让下一个孩子成为ONMOUSEOVER的标题文本。我只是不知道如何访问它。

所以我的问题是：什么我放在showTip功能线，上面写着：

anchors[i].setAttribute('title', this.firstChild.nodeValue);

我的HTML代码和JavaScript代码都低于参考。

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Tool Tips</title> 
    <link href="css.css" rel="stylesheet" type="text/css" /> 
    <script src="js.js" type="text/javascript"></script> 
</head> 

<body> 

    <h1>Tool Tips</h1> 

    <p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
<a href="http://en.wikipedia.org/wiki/Randy_Rhoads" class="tip">Randy Rhoads 
<!-- TEXT FOR THE FIRST HOVER LINK IS BETWEEN THE <span> TAGS --> 
<span> Randy Rhoads blah blah blah</span></a>Sed tincidunt pulvinar elit, ac porta dolor feugiat. 
<a href="http://en.wikipedia.org/wiki/Ty_Tabor" class="tip">Ty Tabor 
<!-- TEXT FOR THE SECOND HOVER LINK IS BETWEEN THE <span> TAGS --> 
<span> Ty Tabor blah blah blah</span></a> cras pellentesque, ligula et mattis varius, orci urna pellentesque augue, in consectetur quam magna non elit. Nunc quis eros ac ante convallis pharetra. 
<a href="http://en.wikipedia.org/wiki/Andy_Timmons" class="tip">Andy Timmons 
<!-- TEXT FOR THE THIRD HOVER LINK IS BETWEEN THE <span> TAGS --> 
<span> Andy Timmons blah blah blah</span></a>In nec justo libero, a convallis quam.</p> 
<a href="http://en.wikipedia.org/wiki/Joe_Bonamassa" class="tip">Joe Bonamassa 
<!-- TEXT FOR THE FOURTH HOVER LINK IS BETWEEN THE <span> TAGS --> 
<span> Joe Bonamassa blah blah blah</span></a> Duis ac est luctus massa commodo lobortis eu eu eros. 
</p> 

</body> 
</html>

JAVASCRIPT

有在JavaScript没有评论。但是：这些是对练习的限制。

不能做任何更改CSS或HTML，
所有功能都保持原样，
不能使用任何的jQuery或任何其他库，
没有可以使用innerHTML。

注意，唯一存在问题的行是showTip()函数中的最后一行代码。

window.onload = prepareTips; 

var anchors = document.getElementsByTagName('a'); 
var spans = document.getElementsByTagName('span'); 

function prepareTips() { 

    if(!document.getElementsByTagName('a')) return false; 

    for(var i=0; i<anchors.length; i++){ 
      anchors[i].onclick = showTip; 
      anchors[i].onmouseover = showTip; 
      anchors[i].onmouseout = hideTip; 
    } 
} 
function showTip(variable) { 

    this.setAttribute('href', '#'); 

    for(i=0; i<spans.length; i++) { 
     this.classname = 'showTip'; 

      // *** THIS IS THE PROBLEM LINE *** 
     anchors[i].setAttribute('title', this.firstChild.nodeValue); 
    } 
} 
function hideTip(variable) { 
    for(i=0; i<spans.length; i++) { 
     this.classname = 'hideTip'; 
     anchors[i].setAttribute('title', ""); 
    } 
}

来源

2012-10-08 HoppedUpDesigns

HTML注释是否真的存在或不存在？这会有所作为。 –

...没关系，只是注意你的笔记，没有评论。 –

每个链接至少有三个孩子：一个文本节点，一个'span'节点和另一个文本节点。你注意到'.firstChild'给你提供了第一个文本节点的引用。如果你想访问'span'元素的内容，你就必须访问'span'元素中的文本节点。即你必须访问链接的第二个孩子的第一个孩子。 –

有些节点通常不知道，例如包含回车符的注释和包含注释的注释注释。你经常不能假设下一个节点就是你想要的。

通过某些元素标准（如span标记的第一个子元素）获取特定元素会更加可靠。

var firstSpan = this.getElementsByTagName("span")[0]; 
anchors[i].setAttribute('title', firstSpan);

来源

2012-10-08 04:27:06 jfriend00

Javascript获取第二个孩子的nodeValue？

回答

相关问题