使用Java进行Dom遍历

Question

How can i access <h2> tag. My current selection is a <span> element which is child of button. i tried but was only able to get to the parent which is button.

Please note i have multiple <Span> element on the page

please note i purely need java script since i am using custom java script which is in Google tag manager.

so basically iam using the below code. just a heads up the {{clickelemet}} here is the <span> element <> function() {

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

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

}

---------------HTML elements -----------------------

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

Thanks for the support.

Answer 1

document.getElementsByTagName("h2");

Answer 2

Also

document.querySelector('h2');

Retrieves the first h2 in the DOM

Answer 3

I guess, you're adding a click event on your button element. If so, then, the click event can also be actually fired on its child elements (ie span ). So, In order to get the button element's parent, you've to check the 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

If you have only one in your page, use

getElementsByTagName("h2")[0]; If you have multiple tags,

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