클릭 한 요소의 관련 노드에서 innerHTML/innerText를 가져 오는 방법은 무엇입니까?

클릭 한 HTML 문서의 클릭 된 요소에서 특정 innerText를 가져오고 싶습니다.클릭 한 요소의 관련 노드에서 innerHTML/innerText를 가져 오는 방법은 무엇입니까?

대응하는 HTML은 다음과 같은 :

!DOCTYPE html> 
<html> 
<head> 
    <title>Some title</title> 
</head> 
<body> 
    <ul class="categories"> 
     <li> 
      <a href="http://www.example2.com/1"> 
      <div> 
       <img src="http://www.example.com/someSource"> 
       <span>First</span> 
      </div> 
      </a> 
     </li> 

     <li> 
      <a href="http://www.example2.com/1"> 
      <div> 
       <img src="http://www.example.com/someSource"> 
       <span>Second</span> 
      </div> 
      </a> 
     </li> 

    </ul> 
</body> 
</html>

자바 스크립트 함수가 클릭 된 링크를 따라 중 "제 1"또는 "제 2"를 반환해야합니다.

내 기본적인 아이디어는 이벤트 리스너를 추가하고 스팬 요소의 내용을 얻기 위해 반환 된 이벤트를 사용하는 것입니다

function(){ 
    document.addEventListener('click', function(e) { 
    e = e || window.event; 
    var spanText= e.path[i].innerText; //Don't know how to assign i correctly 
    return spanText; 
    }, false); 
}

내 문제는 내가 정의하는 방법을 모르겠입니다 내가 또는 .path [i]보다 더 적합한 것이있는 경우. 이미지 또는 텍스트를 클릭하는지 여부에 따라 다릅니다.

출처

2017-01-19 SomewhereDave

'범위'아이를 검색, 목록 항목 핸들러에서
에 클릭 이벤트를 추가하고 해당 텍스트 얻을

var lis = document.querySelectorAll('.categories li'); 
 
lis.forEach(function(el) { 
 
    el.addEventListener('click', onClick, false); 
 
}) 
 

 
function onClick(e) { 
 
    var li = e.currentTarget; 
 
    var span = li.querySelector('span'); 
 
    console.log(span.innerText); 
 
}

<ul class="categories"> 
 
    <li> 
 
    <a href="http://www.example2.com/1"> 
 
     <div> 
 
     <img src="http://www.example.com/someSource"> 
 
     <span>First</span> 
 
     </div> 
 
    </a> 
 
    </li> 
 

 
    <li> 
 
    <a href="http://www.example2.com/1"> 
 
     <div> 
 
     <img src="http://www.example.com/someSource"> 
 
     <span>Second</span> 
 
     </div> 
 
    </a> 
 
    </li> 
 

 
</ul>

출처

2017-01-19 12:32:18 Giladd

function init(){ 
document.addEventListener('click', function(e) { 
    var link = e.target.closest('a'); 
    if(!link)return; 
    e.preventDefault(); 
    var text = link.textContent; 
    alert(text); 

    return spanText; 
    }); 
} 

init();

출처

2017-01-19 12:19:41 Smiranin

이미지에 사용자가 클릭하면? – Rounin

@Rounin 수정 코드 – Smiranin

당신에게 클릭 한 구체적인 요소를 확인한 다음 텍스트를 반환 할 수 있습니다. 추가 정보가 필요하다면 data- 속성을 사용하고 target.dataset을 읽어보십시오.

출처

2017-01-19 12:38:09 VadimB

사용자가 이미지를 클릭하면 어떻게됩니까? – Rounin

수표는'if (target.tagName === 'SPAN')를 전달하지 않습니다. 달성하려는 행동은 무엇입니까? – VadimB

질문을 잘못 읽었을 수도 있습니다.하지만 OP가 * link *를 클릭하여 해당 단어를 반환하고 싶습니다. (즉, 스팬에서 단어를 반환하는 스팬의 클릭이 아닙니다). – Rounin

구조가 일치하는 경우

document.addEventListener('click', function(e) { 
 
    var target = e.target; 
 

 
    if(target.tagName === 'SPAN') { 
 
     console.log(target.innerText); 
 
     return target.innerText; 
 
    } 
 
    
 
    }, false);

<ul class="categories"> 
 
     <li> 
 
      <a href="#"> 
 
      <div> 
 
       <img src="http://www.example.com/someSource"> 
 
       <span>First</span> 
 
      </div> 
 
      </a> 
 
     </li> 
 

 
     <li> 
 
      <a href="#"> 
 
      <div> 
 
       <img src="http://www.example.com/someSource"> 
 
       <span>Second</span> 
 
      </div> 
 
      </a> 
 
     </li> 
 

 
    </ul>

후 항상 <a> 원소로서 <span> 같은 수의 요소가있을 것이다.

따라서 사용자가 두 번째 <a>을 방금 클릭 한 것을 알게되면 <span>은 두 번째로 반환해야합니다. <span>입니다.

작업 예 : 어떻게됩니까

var links = document.querySelectorAll('li a'); 
 
var spans = document.querySelectorAll('li div span'); 
 

 
function getTextContent(e) { 
 
    e.preventDefault(); 
 
    var linksArray = Array.prototype.slice.call(links); 
 
    var index = linksArray.indexOf(this); 
 
    console.log(spans[index].textContent); 
 
} 
 

 
links.forEach(function(link){ 
 
    link.addEventListener('click', getTextContent, false); 
 
});

<ul class="categories"> 
 
     <li> 
 
      <a href="http://www.example2.com/1"> 
 
      <div> 
 
       <img src="http://www.example.com/someSource"> 
 
       <span>First</span> 
 
      </div> 
 
      </a> 
 
     </li> 
 

 
     <li> 
 
      <a href="http://www.example2.com/1"> 
 
      <div> 
 
       <img src="http://www.example.com/someSource"> 
 
       <span>Second</span> 
 
      </div> 
 
      </a> 
 
     </li> 
 
    </ul>

출처

2017-01-19 12:54:24 Rounin

클릭 한 요소의 관련 노드에서 innerHTML/innerText를 가져 오는 방법은 무엇입니까?

답변

관련 문제