使用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];