HTML DOM getElementsByTagName 问题答案

【问题标题】：HTML DOM getElementsByTagName issueHTML DOM getElementsByTagName 问题
【发布时间】：2020-08-05 08:31:48
【问题描述】：

目前，这两者都使用按钮，但是是否有可能在没有按钮的情况下进行此查询，而只需单击？

将锚点的目标更改为 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>

【问题讨论】：

好吧，如果您不希望它在脚本加载后立即运行，那么您需要在某个 dom 元素上使用该事件。可以是任何东西，div、li、a、body，甚至是顶级document和window
.getElementsByTagName() 与.querySelectorAll() 一样，返回一个元素的列表。要影响每个元素，您必须显式迭代。

标签： javascript html dom

【解决方案1】：

添加事件列表以点击标签，例如启动函数（更改）的 DIV。在此函数中，使用 querySelector 获取标题 H1 和蓝色类。通过 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>

【讨论】：

【解决方案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>

【讨论】：