Question

getElementById(id)返回具有匹配ID属性的元素。我怎样才能得到这个元素的最后一次出现，而不是第一次出现？

<!DOCTYPE html>
<html>
<body>

<button onclick="getLast()">Click me</button>

<div id="username">Lisa</div>
<div id="username">Chris</div>

<script>
function getLast() {
    alert(document.getElementById("username").innerHTML);
}
</script>

</body>
</html>

Answer 1

id始终是唯一的。没有两个DOM元素可以具有相同的id。在您的情况下，使用class属性。使用getElementsByClassName将返回一个集合。获取它的长度并使用该值来获取最后一个元素。

function getLast() {
  var getLastElemIndex = document.getElementsByClassName("username").length - 1;
  console.log(getLastElemIndex)
  alert(document.getElementsByClassName("username")[getLastElemIndex].innerHTML);
}

<div class="username">Lisa</div>
<div class="username">Chris</div>
<button onclick="getLast()">Click me</button>

Answer 2

id应该是唯一的。但我们无法控制人们如何编写代码，有时我也会遇到这种情况：＆＃34;我需要解析页面并且他们使用相同的ID＆＃34;

您可以将id视为属性并使用querySelectorAll：

＆＃13;

<button onclick="getLast()">Click me</button>
<div id="username">Lisa</div>
<div id="username">Chris</div>
<script>
function getLast() {
    tags = document.querySelectorAll('[id="username"]');
    alert(tags[tags.length - 1].innerHTML);
}
</script>

＆＃13;

最佳做法应该是使用class。

Answer 3

HTML元素的id意味着唯一。您应该指定class：

<div class="username">Lisa</div>
<div class="username">Chris</div>

然后使用Document.getElementsByClassName()获取class的所有元素：

var usernames = document.getElementsByClassName("username");

或者，您可以使用Document.querySelectorAll()：

var usernames = document.querySelectorAll(".username");

然后你可以得到最后一个：

var lastUsername = usernames[usernames.length - 1];

Answer 4

即使你可以通过标记名div来实现，因为@brk说id必须是唯一的。

function getLast(){
  var divs = document.querySelectorAll("div");
  console.log(divs[divs.length - 1].textContent);
}
getLast();

<button onclick="getLast()">Click me</button>
<div>Lisa</div>
<div>Chris</div>

获取元素的最后一次出现

4 个答案: