Javascript가 두 번째 자식의 nodeValue를 가져 옵니까?

나는 단 하나의 단계 만 거치면이 과제가 완료됩니다.Javascript가 두 번째 자식의 nodeValue를 가져 옵니까?

ONMOUSEOVER 이벤트는 span 태그 사이에있는 텍스트를 표시해야합니다. 지금은 span 태그 바로 앞에 텍스트를 표시하고 있습니다 (링크 텍스트와 동일). 이것은 firstChild입니다. 다음 아이를 ONMOUSEOVER의 제목 텍스트로 가져와야합니다. 나는 그것에 접근하는 방법을 모른다.

그래서 내 질문은 :

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

내 HTML 코드와 자바 스크립트 코드는 참조 용으로 다음과 같습니다 : 어떻게 내가 읽는 showTip 기능 라인에 넣어.

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

는 자바 스크립트에 대한 의견이 없습니다. 그러나 : 운동에 대한 제한 사항입니다.

는
어떤 jQuery를 또는 다른 라이브러리,
는 innerHTML을을 사용할 수 없습니다를 사용할 수 없습니다,
모든 기능은 그대로 유지의 CSS 나 HTML을 변경할 수 없습니다.

참고로 문제가되는 유일한 줄은 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를 가져 옵니까?

답변

관련 문제