클래스 내부의 tagName 요소 가져 오기

Question

클래스 내부에 a 요소를 가져 와서 변경하고 싶습니다.

내 HTML은 다음과 같습니다

<div class="alignleft"> 
    <a href="http://cismdomain.com/articles/page/2/">« Older Entries</a> 
</div> 

내가 Previous에 Older Entries을 변경하고 싶습니다.

var oldentries = document.querySelector('.alignleft'); 
var ainside = document.getElementsByTagName('a'); 
oldentries.ainside.innerHTML = "Previous"; 

그러나 그것은 나에게 undefined을 제공합니다

내 자바 스크립트 코드입니다.

Answer 1

document.getElementsByTagName은 HTML 컬렉션을 반환합니다. 그래서 당신은 그것을 반복해야합니다 (귀하의 경우에는 첫 번째 항목이 될 것입니다).

var oldentries = document.querySelector('.alignleft'); 
var ainside = document.getElementsByTagName('a'); 
for(i=0;i<ainside.length;i++) { 
    ainside[i].innerHTML = "Previous"; 
} 

Answer 2

당신은보다 정확한 선택기를 사용하여 querySelector에 signle 전화를 사용하여 요소를 찾아보실 수 있습니다 : 직접 두 번 그 일을 대신 .alignLeft a를 사용합니다.

이 코드는 작동합니다

var entries = document.querySelector('.alignLeft a'); 
entries.innerHTML = "Previous" 

Answer 3

귀하의 코드가 배열이 아닌 당신이 .innerHTML을 적용 할 수있는 객체를 렌더링 것 또한

document.querySelector('.alignleft').document.getElementsByTagName('a').innerHTML = "Previous"; 

, getElementsByTagName('a') 같은 것을에게 렌더링 것이다.

var ainside = document.querySelector('.alignlef a'); // Select first occurance of a inside the first occurance of .alignleft in the document 

ainside.innerHTML = "Previous"; 

Answer 4

당신은 <a> 요소의 textContent 속성을 업데이트해야합니다.

작업 예 :

var linkElement = document.querySelector('.alignleft a'); 
 
linkElement.textContent = 'Previous';

<div class="alignleft"> 
 
<a>Older Entries</a> 
 
</div>

Answer 5

당신이 element.innerHTML을 변경 한 후 oldentries 내 'a' 요소를 얻기 위해 당신은 또한 oldentries.querySelector('a');을 할 수 '.alignleft' 클래스 요소를 취득하고 Document.querySelector()를 사용하면 :