HTML Проблема с getElementsByTagName в DOM

Question

В настоящее время и то, и другое использует кнопку, но есть ли возможность получить этот запрос без кнопки, а просто по щелчку?

Изменяет цель привязки на google.com:

<button onclick="document.querySelectorAll('ul>li>a').forEach(function(link){link.href='http://google.de';});"> ChangeHREF </button>

Изменяет цвет шапки страницы:

<button onclick='(document.getElementsByTagName("h1")[0]).style.color="blue"'>XSS attach</button>

Answer 1

Добавить список событий для щелчка по тегу, например, DIV, запускающий функцию (изменение). В этой функции с помощью querySelector можно получить заголовок H1 и класс blue. Через CSS цвет заголовка меняется на синий.
Значит, кнопка для этого не нужна.

document.getElementById('myDiv').addEventListener('click', change);

function change() {
    document.querySelector('h1').classList.add("blue");
}

h1.blue {
  background: blue;
}

<h1>Header</h1>
<div id="myDiv">Press this DIV for change H1 to blue</div>

Answer 2

, конечно, вы можете вот тот, который я использовал div, и вы можете использовать другой, но в этом есть смысл, как будто вы не можете использовать select

change.onclick = () => {
  document.getElementsByTagName('h1')[0].style.color = 'red';
}

<h1>Hello world</h1>
<div id="change">Change Color</div>

change.onclick = () => {
  document.querySelectorAll('a').forEach(link => {
    link.href = 'http://google.de';

  });
  var links = document.getElementsByTagName('a');
  console.log(links[0].href);
  console.log(links[1].href);
}

<a href="">a</a>
<a href="">b</a>
<div id="change">Change</div>