使用Javascript的Dom遍历

我如何访问<h2>标记。我目前的选择是一个<span>元素，它是按钮的子元素。我试过，但只能得到父母是按钮。使用Javascript的Dom遍历

请注意我有多个<Span>元素在页面上

请注意我需要纯粹的Java脚本，因为我使用自定义的Java脚本这是谷歌标签管理器。

所以基本上iam使用下面的代码。只是平视的{{clickelemet}}这里是<span>元件 <> 函数（）{

var el = {{Click Element}}.parentElement.querySelector('h2'); 

    return el ? el.textContent || el.innerText : undefined; 

}

--------------- HTML元素--- --------------------

<div class="col-12 col-md-10 offset-md-1"> 
            <h2>Blockchain – Opportunities &amp; Challenges across Multiple Industries</h2> 
            <p>It began with Bitcoin, but now it has spread. Blockchain has the potential to radically transform the way industries do business. Here are some examples of success and challenges as blockchain inserts itself into transactions and process.</p> 
            <button class="panel__link panel__link--btb" aria-expanded="false" aria-controls="panel-1"> 
             <i>+</i> <span>Expand article</span> 
            </button> 
           </div>

感谢您的支持。

来源

2017-08-11 Srijith Ramachandran

后一个工作片断 –

而不是使用大括号，请给我们一个真实的点击元素ID及其对应的HTML元素。 – asmmahmud

'span'元素在哪里？ – clabe45

document.getElementsByTagName("h2");

来源

2017-08-11 12:02:41

而且

document.querySelector('h2');

检索的DOM

来源

2017-08-11 12:03:31 clabe45

嗨，我添加了更多关于iam试图达到的信息。 –

-3

如果你只在你的页面一个第一h2，使用

getElementsByTagName("h2")[0]; 如果您有多个标签，

var parent = document.getElementById('<your-class>'); 
var child = parent.getElementById('<your-class>')[0];

来源

2017-08-11 12:08:40 Srujan

您不能在getElementById中使用类名称，并且getElementById也会返回单个HtmlElement而非数组。 – asmmahmud

你可能会想'getElementByClassName'？此外，如果您知道该ID，则无需在父级内查找。 – clabe45

@ clabe45需要遍历DOM链。 –

我想，你在你的按钮元素上添加一个点击事件。如果是这样，那么点击事件也可以实际触发其子元素（即跨度）。因此，为了得到该按钮元素的父，你已经检查event.target：

document.querySelector('button.panel__link').addEventListener('click', 
    function(e){ 
     var el, elContent; 
     if(e.target.className === "panel__link panel__link--btb"){ 
     el = e.target.parentElement.querySelector('h2'); 
     elContent = el ? (el.textContent || el.innerText) : undefined; 
     } 

});

来源

2017-08-11 12:29:31 asmmahmud

我会尝试使用while循环直到父项 –

使用Javascript的Dom遍历

回答

相关问题