[英]How to get the innerHTML/innerText from a related node of a clicked element?
我想从我单击的 HTML 文档中的单击元素中获取某个 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>
Javascript 函数应根据单击的链接返回“First”或“Second”。
我的基本思路是添加一个事件监听器，并使用返回的事件来获取span元素的内容：
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);
}
我的问题是我不知道如何定义i或者是否有比.path[i]更适合使用的东西。 取决于我是单击图像还是文本。
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>
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();
您可以检查单击了哪个具体元素，然后返回其文本。 如果你想获得一些额外的信息 - 使用data-属性并读取target.dataset来读取它。
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>
如果结构一致，那么<span>元素的数量总是与<a>元素的数量相同。
因此，如果你知道刚刚点击第二用户<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>
抱歉我的语言不好..
我回复晚了。
也许它会帮助别人；
window.addEventListener("click", (event) => { //dblclick
let div = event.target.innerText; // <-- the code you want
window.onClick(div);
});
和..
function onClick(div) {
console.log(`(Tıklandı-Clicked) innerText: ${div}`);
}
你想要的代码： let div = event.target.innerText;
如何使用dojo从innerText或InnerHTML获取字符计数？
[英]How do get a character count from innerText or InnerHTML using dojo?
如何使用innerHTML / innerText将内容附加到querySelectorAll元素？
[英]How to append content to querySelectorAll element with innerHTML/innerText?
获取innerHtml或innerText或nodeValue并排除嵌套子级？
[英]Get innerHtml or innerText or nodeValue and exclude nested child?
如何动态更改数组中每个单击的元素的信息模式innerHTML
[英]How to dynamically change info modal innerHTML for each clicked element from an array
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.