Javascript 如何基于clickevent获取子节点

我有几个

div

在一个名为

parent\u container

的页面上，我有一个

标题

，

图像

和一个

按钮

如何获取单击它的容器的特定

标题的值

<div class="parent_container">
   <img class="news_image" src="/" />
    <h1 class="product_title">title 1</h1>
    <a class="cta-btn" href="#">button1</a>
</div>

<div class="parent_container">
    <img class="news_image" src="/" />
     <h1 class="news_title">title 2</h1>
     <a class="cta-btn" href="#">button2</a>
</div>


标题1
标题2

//获取元素
var update_buttons=document.getElementsByClassName（'cta btn'），
parentElement=document.getElementsByClassName（'parent_container'），
itemTitle=document.getElementsByClassName（'news_title'）；
//试图从单击的div中获取标题
var getTitle=函数（evt）{
var title=this.itemTitle；
console.log（title）；//未定义
}
//在页面上的所有按钮上设置事件侦听器
对于（var i=0；i使用
evt.toElement
获取单击的元素（在本例中，
此
也起作用）

从那里，获取父节点，然后选择子
h1
元素

使用以下命令访问文本：


..如果您不希望缓存变量：

evt.toElement.parentNode.querySelector('h1[class*="title"]').textContent;


//获取元素
var update_buttons=document.getElementsByClassName（'cta-btn'），
parentElement=document.getElementsByClassName（'parent_container'），
itemTitle=document.getElementsByClassName（'news_title'）；
//试图从单击的div中获取标题
var getTitle=函数（evt）{
var el=evt.toElement，
父节点=el.parentNode，
header=parent.querySelector（'h1[class*=“title”]”），
headerText=header.textContent；
console.log（headerText）；
}
//在页面上的所有按钮上设置事件侦听器
对于（变量i=0；i


标题1
标题2
使用
evt.toElement
获取单击的元素（在本例中，
此
也起作用）

从那里，获取父节点，然后选择子
h1
元素

使用以下命令访问文本：


..如果您不希望缓存变量：

evt.toElement.parentNode.querySelector('h1[class*="title"]').textContent;


//获取元素
var update_buttons=document.getElementsByClassName（'cta-btn'），
parentElement=document.getElementsByClassName（'parent_container'），
itemTitle=document.getElementsByClassName（'news_title'）；
//试图从单击的div中获取标题
var getTitle=函数（evt）{
var el=evt.toElement，
父节点=el.parentNode，
header=parent.querySelector（'h1[class*=“title”]”），
headerText=header.textContent；
console.log（headerText）；
}
//在页面上的所有按钮上设置事件侦听器
对于（变量i=0；i


标题1
标题2
首先，您有一个输入错误：
console.log（title）
。下面是您需要执行的操作，先获取标题的父项，然后获取标题的子项：

var title = this.parentNode.children[1].innerHTML;
console.log( title ); 


注意：这假定
项具有相同的结构，因此标题是第二项

编辑

如果结构发生更改，您可以使用
querySelector（'h1'）
选择项目：

正如@JoshCrozier所建议的那样，您可以使用
.querySelector（'h1[class*=“title”]”）
，这意味着它选择带有“title”一词的类因此，
product\u title
，
news\u title
，
一些东西将起作用。这样，如果您碰巧想添加其他
元素，您也可以在
中添加它们（您只需确保它们没有包含“title”一词的类）。
首先您得到一个输入错误：
console.log（title）
。下面是您需要做的事情，先获取标题的父项，然后获取标题的子项：

var title = this.parentNode.children[1].innerHTML;
console.log( title ); 


注意：这假定
项具有相同的结构，因此标题是第二项

编辑

如果结构发生更改，您可以使用
querySelector（'h1'）
选择项目：

正如@JoshCrozier所建议的那样，您可以使用
.querySelector（'h1[class*=“title”]”）
，这意味着它选择带有“title”一词的类因此，
product\u title
，
news\u title
，
一些东西将起作用。这样，如果您碰巧想添加其他
元素，也可以在
中添加它们（您只需确保它们没有包含“title”一词的类）.
解决方案，步骤最少。您的标题始终是按钮的前一个元素

使用：

为了确保您总是返回正确的元素，您需要比上面的示例多一点。我为什么这么说。如果您（或其他人）编辑上面的解决方案可能会破坏的html。更好的解决方案是为
title元素
提供一个类名，或者提供一个仅用于这些标题的属性。请查看此解决方案：

 <div class="parent_container">
      <img class="news_image" src="/" />
      <h1 title-element class="news_title">title 2</h1>
      <a class="cta-btn" href="#">button2</a>
 </div>

上面的答案使得将来更新html时函数中断的可能性降低

注：
| |元素。innerText
是不支持文本内容的旧浏览器（阅读IE）的一种后援。
解决方案只需最少的步骤。您的标题始终是按钮的前一个元素

使用：

为了确保您总是返回正确的元素，您需要比上面的示例多一点。我为什么这么说。如果您（或其他人）编辑上面的解决方案可能会破坏的html。更好的解决方案是为
title元素
提供一个类名，或者提供一个仅用于这些标题的属性。请查看此解决方案：

 <div class="parent_container">
      <img class="news_image" src="/" />
      <h1 title-element class="news_title">title 2</h1>
      <a class="cta-btn" href="#">button2</a>
 </div>

上面的答案让它变得不那么简单