如何根据clickevent获取子节点

Question

我在一个名为 parent_container 的页面上有几个 divs 我有一个 heading、image 和一个 button

如何获取点击容器的特定 heading 的值？

<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>

//getting the elements
var update_buttons = document.getElementsByClassName( 'cta-btn' ),
    parentElement  = document.getElementsByClassName( 'parent_container' ),
    itemTitle      = document.getElementsByClassName( 'news_title' );

//trying to get the title from the div it was clicked in
var getTitle = function( evt ) {
    var title = this.itemTitle;

    console.log( title ); //undefined
}

//setting up a event listener on all the buttons on the page 
for( var i=0;i<update_buttons.length;i++ ){
    update_buttons[i].addEventListener('click', getTitle);
}

Answer 1

使用 evt.toElement 获取点击的元素（不过在这种情况下，this 也可以）。

从那里获取父节点，然后 select 子 h1 元素。

使用 textContent 访问文本：

var getTitle = function (evt) {
    var el = evt.toElement, // or this
        parent = el.parentNode,
        header = parent.querySelector('h1[class*="title"]'),
        headerText = header.textContent;

    console.log(headerText);
}

Example Here

..如果你不想缓存变量：

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

//getting the elements
var update_buttons = document.getElementsByClassName('cta-btn'),
    parentElement = document.getElementsByClassName('parent_container'),
    itemTitle = document.getElementsByClassName('news_title');

//trying to get the title from the div it was clicked in
var getTitle = function (evt) {
    var el = evt.toElement,
        parent = el.parentNode,
        header = parent.querySelector('h1[class*="title"]'),
        headerText = header.textContent;
    
    console.log(headerText);
}

//setting up a event listener on all the buttons on the page 
for (var i = 0; i < update_buttons.length; i++) {
    update_buttons[i].addEventListener('click', getTitle);
}

<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>

Answer 2

首先你打错了：console.log(title)。这是您需要做的，获取 parent，然后获取 header:

的 child

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

Example Here

注意这假设您对 <div class="parent_container"> 项目具有相同的结构，因此标题是第二个项目。

编辑

如果更改了结构，您可以 select 带有 querySelector('h1') 的项目：

var title = this.parentNode.querySelector('h1').innerHTML;
console.log( title );

正如 @JoshCrozier 所建议的那样，您可以使用 .querySelector('h1[class*="title"]') 这意味着它 select 有一些 class 和单词 "title"在里面。所以 product_title、news_title、something_title 会起作用。这样，如果您碰巧想添加其他 <h1> 元素，您也可以在 <div> 中添加它们（您只需要确保它们没有 class 字样"title" 在那些）。

Answer 3

步骤最少的解决方案。看起来您的标题始终是按钮的前一个元素。

使用：

 var getTitle = function( evt ) {
     var title = this.previousElementSibling.textContent || this.previousElementSibling.innerText;

    console.log( title ); //undefined

  }

为了确保您始终return 正确的元素，您需要的元素比上面的示例多一点。我为什么这么说。如果您（或其他人）编辑 html 上面的解决方案可能会中断。更好的解决方案是给 title element 一个 class 名称或更好的只用于这些标题的属性。看看这个解决方案：

 <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>

 var getTitle = function( evt ) {
     var title = this.parentElement.querySelector("h1[title-element]");

    return title.textContent || title.innerText;

  }

以上答案可以降低您的函数在 html 将来更新时中断的可能性。

PS。 || element.innerText 是不支持 textContent 的旧浏览器（阅读 IE）的回退。

如何根据clickevent获取子节点

How can I get the child node based on clickevent

javascript

dom