使用Java进行Dom遍历

Question

我如何访问<h2>标签。 我当前的选择是<span>元素，它是按钮的子元素。 我试过了，但只能去按钮的父母。

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

请注意，我纯粹需要Java脚本，因为我使用的是Google标记管理器中的自定义Java脚本。

所以基本上IAM使用下面的代码。 只是{{clickelemet}}的标题，这里是<span>元素<> function（）{

  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>

感谢您的支持。

Answer 1

document.getElementsByTagName("h2");

Answer 2

也

document.querySelector('h2');

检索DOM中的第一个h2

Answer 3

我想，您是在按钮元素上添加了click事件。 如果是这样，那么click事件也可以实际在其子元素（即span）上触发。 因此，为了获取button元素的父元素，您必须检查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;
      }

});

Answer 4

如果页面中只有一个，请使用

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

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