如何在标签内获取内部href？

Question

The whole element is like below :

<h2 class="font120 mt0 mb10 mobfont110 lineheight20 moblineheight15"><a href="https://demosite.com">demo text</a></h2>

I have run this below command :

const y = document.getElementsByClassName("font120 mt0 mb10 mobfont110 lineheight20 moblineheight15")[0].innerHTML;
console.log(y);

And got the below result from it.

<a href="https://demosite.com">demo text</a>

Now I want to get href URL link, and then click on it. How can I do it using JavaScript? Also In addition to that, I want to add if else statement after this which will check if href URL changes in every 5 minutes , if it changes then it should click on href URL link otherwise it should just refresh the page.

Answer 1

I think this comes close to what you want. I've tested it locally and works.

1. There are a series of anchors inside containers. Each anchor has a click event attached to it.

2. The initial href value is set to the first anchor's href attribute.

3. The code then watches for any new clicks on the anchors. If there is one a timer starts. If the new href is the same the saved one after five seconds the page reloads. If it's not the same the new page is loaded.

4. On each new click the timer resets.

 // Pick up the anchors with `querySelectorAll` const anchors = document.querySelectorAll('.demo a'); // Assign a handler to them for when the click // event is triggered. (Note `handleClick` returns // a new function that is actually assigned to the // listener because I wanted to use prevent any unnecessary // global variables, and you can do that with closure anchors.forEach(anchor => { anchor.addEventListener('click', handleClick()); }); function handleClick() { // Initialise the current href, and // the timer let current = anchors[0].href; let timer; // Return the function the listener will // be using return function (e) { // Stop the anchor from doing anything e.preventDefault(); // Get the new href from the clicked element const { href } = e.target; // Clear any timers clearTimeout(timer); // And set a new timer. If the current // href doesn't match the one on the clicked // element assign the page to a new location, // otherwise reload the current page. // This time is set for five seconds for testing // but you change that to five minutes (60000 x 5) timer = setTimeout(() => { if (current !== href) { // location.assign(href); console.log(`Redirecting to ${href}`); } else { // location.reload(); console.log(`Refreshing ${current}`); } current = href; }, 5000); } }

 <div class="demo"> <a href="https://demosite1.com">demo text 1</a> </div> <div class="demo"> <a href="https://demosite2.com">demo text 2</a> </div> <div class="demo"> <a href="https://demosite3.com">demo text 3</a> </div>

Additional documentation

• addEventListener

• Closures

• Destructuring assignment

• querySelectorAll

• setTimeout

Answer 2

All you need to do is look for the a element using the CSS selector h2 a and then get its href attribute:

 console.log(document.querySelector("h2 a").href)

 <h2 class="font120 mt0 mb10 mobfont110 lineheight20 moblineheight15"><a href="https://demosite.com">demo text</a></h2>

In order to set up a reload of the page you could set up a

setTimeout("location.reload()",5*60*1000)

This will reload the current page after five minutes and will continue to do so, as the reloaded page will contain the same (unfired) setTimeout function.

In order to check, whether the href value has changed from one to the next reloaded version you would need to store the value in localstorage and compare it every time after the page loads with the current href value.