요소의 마지막 항목 가져 오기

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>

출처

2017-10-14 livin_amuk

id는 항상 고유합니다. 두 개의 DOM 요소가 동일한 ID를 가질 수는 없습니다. 귀하의 경우에는 class 속성을 사용하십시오. 컬렉션을 반환하는 getElementsByClassName을 사용하십시오. 길이를 가져 와서 그 값을 사용하여 마지막 요소를 가져옵니다. HTML 요소의 id

출처

2017-10-14 06:38:07 brk

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>

은 고유하기위한 것입니다.

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

그런 다음 class의 모든 요소 얻을 Document.getElementsByClassName()를 사용 : 또는

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

을, 당신은 Document.querySelectorAll() 사용할 수 있습니다 당신은이 class 대신 지정해야

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

을 그리고 당신은 할 수 마지막 하나 가져 오기 :

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

출처

2017-10-14 06:42:27

id은 고유해야합니다. 그러나 우리는 사람들이 코드를 작성하는 방법을 제어 할 수 없으며 때로는이 경우를 만날 수도 있습니다. "페이지를 파싱해야하며 동일한 ID를 사용하고 있습니다"

id을 속성으로 처리하고 querySelectorAll을 사용할 수 있습니다.

<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>

그리고 가장 좋은 방법은 class를 사용한다.

출처

2017-10-14 06:52:10 CtheSky

@brk는 id가 고유해야한다고 말하면서도 div이라는 태그 이름으로도 작업 할 수 있습니다.

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>

출처

2017-10-14 06:54:21

요소의 마지막 항목 가져 오기

답변

관련 문제