Javascript 获取父对象中H1的内部文本

我们的网站上有一些抽象链接。我们希望跟踪他们与H1标题相结合的点击，以便能够识别它被点击的块。我正在使用谷歌Tagmanager。页面上有更多具有相同结构的块，单击事件会触发该函数

两个硬要求：

• 不使用jQuery。
• 需要支持IE9

它基本上是一个带有标题和链接列表的块，最后一个是“阅读更多…”。我想创建一个函数，返回一个字符串中的链接文本和H1

我使用gtm。单击触发器并在标签中设置此值。对于大多数链接，{{Click Text}}就足够了，但对于这个特定的链接就不够了

最后，我希望函数返回以下内容：

“阅读更多..标题”

我有“阅读更多…”，但我无法从上面的H1元素中获得标题

搜索.parent列，在parent列中查找H1，获取innerText并将其添加到{{Clicked Text}}

   <div class="column-2 portlet-column span3" id="sdfghjkl">
    <div class="portlet-dropzone portlet-column-content portlet-spacing portlet-column-content-only" id="layout-column_column-2">
        <div class="portlet-boundary portlet-boundary_56_ portlet-static portlet-static-end portlet-borderless portlet-journal-content " id="fdsadf"> <span id="dsasdf"></span>
            <div class="portlet-borderless-container">
                <div class="portlet-body">
                    <div class="journal-content-article">
                        <style>
                            span.icon img { background-repeat: no-repeat; }
                        </style>
                        <div class="news_headline headline_news" style="font-family: Noa LT Std;"> <img src="dsasdfds" alt="content" class="icon icon_spacing">
                            <h1> <span class="headline g-font-content">H1 content</span> </h1>
                        </div>
                    </div>
                    <div class="entry-links"> </div>
                </div>
            </div>
        </div>
        <div class="portlet-boundary portlet-boundary_56_ portlet-static portlet-static-end portlet-borderless portlet-journal-content " id="content"> <span id="content"></span>
            <div class="portlet-borderless-container">
                <div class="portlet-body">
                    <div class="journal-content-article">
                        <div class="news_headline">
                            <div class="relatedArticles" style="margin-top:10px;">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td style="vertical-align: top;"> <img style="margin-left:9px; margin-right: 8px; color:#005B82;max-width:none;" src="content"> </td>
                                            <td> <a href="content" target="_blank"> <span class="g-font-content content-magazine-color">LINK</span> </a> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="news_headline">
                            <div class="relatedArticles" style="margin-top:10px;">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td style="vertical-align: top;"> <img style="margin-left:9px; margin-right: 8px; color:#005B82;max-width:none;" src="content"> </td>
                                            <td> <a href="content" target="_blank"> <span class="g-font-content content-magazine-color">LINK</span> </a> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="news_headline">
                            <div class="relatedArticles" style="margin-top:10px;">
                                <table>
                                    <tbody>
                                        <tr>
                                            <td style="vertical-align: top;"> <img style="margin-left:9px; margin-right: 8px; color:#005B82;max-width:none;" src="content" target="_blank"> <span class="g-font-content content-magazine-color">Read more..</span> </a> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    <div class="entry-links"> </div>
                </div>
            </div>
        </div>
    </div>
</div>

---

运行下面的剪贴，点击“阅读更多…”

var readmoreanchers=contains（'span'，/^Read\smore/i）；
对于（变量i=0；i=0&&matches.item（i）！==this）{
返回i>-1；
};
}
//获得最接近的匹配
对于（；elem&&elem！==document；elem=elem.parentNode）{
如果（元素匹配（选择器））返回元素；
}
返回null；
};
函数加法器（evnt、elem、func）{
if（elem.addEventListener）//W3CDOM
元素addEventListener（evnt、func、false）；
else if（elem.attachEvent）{//IE DOM
要素附件（“on”+evnt，func）；
}
否则{//没什么事可做
元素[evnt]=func；
}
}
函数包含（选择器、文本）{
var元素=document.querySelectorAll（选择器）；
返回Array.prototype.filter.call（元素，函数（元素）{
返回RegExp（text.test）（element.textContent）；
});
}

span.icon img{背景重复：无重复；}
H1含量
多读些。。

也许可以添加您已经测试过的Javascript，这样我们就可以有一个可用的代码段。为什么不尝试使用当单击

阅读更多…

链接时是否要触发此函数？是的，当单击阅读更多时最近的是jQuery@Pete，我现在在您的链接中看到，它受Mozilla支持。我会调查的，这似乎是最好的解决方案嗨，阿卜杜勒，谢谢你的帮助！我想我不是很清楚，我使用的是Google tagmanager，目的是用这个函数创建一个变量。variabel已连接到“阅读更多”按钮上的单击事件。已尝试使其与以下内容一起工作：var parentElement=getClosest（event.target，'.parent column'）；var headingparent=parentElement.querySelector（'h1'）；console.log（event.target.textContent+“|”+headingparent.textContent）；结合

function() {
   labelh1 = {{Click Text}};

   if ({{Click Text}} == "Read more.."){

var parentElement = getClosest(event.target, '.parent-column');
var headingInParent = parentElement.querySelector('h1');
var labelh1 = {{Click Text}} + " | " + headingInParent.textContent

var getClosest = function ( elem, selector ) {
    if (!Element.prototype.matches) {
        Element.prototype.matches =
            Element.prototype.matchesSelector ||
            Element.prototype.mozMatchesSelector ||
            Element.prototype.msMatchesSelector ||
            Element.prototype.oMatchesSelector ||
            Element.prototype.webkitMatchesSelector ||
            function(s) {
                var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                    i = matches.length;
                while (--i >= 0 && matches.item(i) !== this) {}
                return i > -1;
            };
    }
    // Get closest match
    for ( ; elem && elem !== document; elem = elem.parentNode ) {
        if ( elem.matches( selector ) ) return elem;
    }
    return null;
};
 return labelh1;
  }