极客笔记JavaScript 如何根据标签的顺序更改其内部HTML
在JavaScript中，元素的innerHTML属性允许您访问或修改其中的任何HTML或XML标记。使用方法 insertAdjacentHTML() 将HTML插入页面，而不是更改元素的内容。
在JavaScript中，使用 document.querySelectorAll() 可以根据其顺序更改标签的innerHTML。让我们继续阅读文章，了解更多关于根据标签顺序更改innerHTML的信息。
使用document.querySelectorAll()
由Document函数 querySelectorAll() 返回的静态NodeList列出了与给定选择器相匹配的文档的所有元素。
语法
以下是 document.querySelectorAll() 的语法-
querySelectorAll(selectors)
让我们看一下以下示例，以更深入地了解根据它们的顺序更改标签的innerHTML。
示例
在以下示例中，我们使用addEventListener与匿名函数以及 document.querySelectorAll() 一起使用。
<!DOCTYPE html>
<html>
<body>
<p class="motors">Bike</p>
<p class="motors">Car</p>
<p class="motors">Vehicle</p>
<button id="ordergenerator">Order Elements</button>
<script>
document.getElementById('ordergenerator').addEventListener('click', function(e) {
const paragraphs = document.querySelectorAll('.motors');
let i = 1;
for (p of paragraphs) {
p.innerText = 'vehicle ordered ' + (i++);
}
});
</script>
</body>
</html>
当脚本执行时，它将在网页上生成一段文本，并附带一个点击按钮的输出。如果用户点击按钮，事件就会被触发，并对文本进行排序。
示例
考虑以下示例，我们对段落元素进行编号并运行一个循环 –
<!DOCTYPE html>
<html>
<body>
<p class="student">jeshu</p>
<p class="student">mani</p>
<p class="student">viswa</p>
<button onclick="generator()">Order Elements</button>
<script>
function generator() {
var reference = document.getElementsByClassName("student");
for (var i = 0; i < 3; i++) {
reference[i].innerHTML = i;
}
}
</script>
</body>
</html>
运行上述脚本时，输出窗口将弹出，显示名称和点击按钮。当用户点击按钮时，事件被触发，数字被分配给段落元素。
示例
执行以下代码，观察基于其顺序改变标签的innerHTML是如何在JavaScript中进行的。
<!DOCTYPE html>
<html lang="en">
<body>
<p class="numberDemo">My Paragraph</p>
<p class="numberDemo">My Paragraph</p>
<p class="numberDemo">My Paragraph</p>
<button id="orderDemo">Click to Order the Paragraph</button>
<script>
document.getElementById('orderDemo').addEventListener('click', function(e) {
var allHTMLValues = document.querySelectorAll('.numberDemo');
var counter = 1;
for (temp of allHTMLValues) {
temp.innerText = 'The Paragraph is in order ' + (counter);
counter = counter + 1;
}
});
</script>
</body>
</html>
</pre>
当脚本被执行时，它将在网页上显示一段文本以及一个点击按钮。如果用户点击按钮，事件将被激活，命令文本并在网页上显示。