getElementsByTagName 사용시 빈 배열

document.getElementsByTagName();을 사용하여 검색 한 요소를 반복하는 방법; 길이가 0으로 나오지만 여전히 요소가 있기 때문입니다.getElementsByTagName 사용시 빈 배열

가

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>HKPlayer Demo</title> 
    <script src="dist/HKPlayer.js" type="text/javascript"></script> 
</head> 
<body> 
    <HKPlayer type="video" theme="dark" src="assets/video/1.mp4"></HKPlayer> 
    <br/> 
    <HKPlayer type="video" theme="dark" src="assets/video/2.mp4"></HKPlayer> 
</body> 
</html>

출력은 다음과 같다 :

아래

class HKPlayer 
{ 
    constructor() 
    { 
     this.getPlayers(); 
     this.getPlayerAttributes(); 
    } 
    getPlayers() 
    { 
     this.players = document.getElementsByTagName("HKPlayer"); 
    } 
    getPlayerAttributes() 
    { 
     console.log(this.players); 
    } 
} 
(function() { 
    new HKPlayer(); 
})();

HTML 코드이다 : 다음

는 JS 코드

this.players 배열로 this.players 배열 비어 있습니다 루프 수 없습니다. 어떻게해야합니까?

출처

2017-10-04 Shakti Phartiyal

DOM이 실행 시점에로드 되었습니까? 그렇지 않다면 [jQuery 나 getElementById와 같은 DOM 메소드가 요소를 찾지 못하는 이유는 무엇입니까?] (https://stackoverflow.com/q/14028959/4642212); 그렇지 않으면 [Chrome의 JavaScript 콘솔이 배열 평가에 지장이 있습니까?] (https://stackoverflow.com/q/4057440/4642212). – Xufox

DOM을로드하기 전에 JS를 실행 중입니다.

시도 코드의이 부분 포장이 내부

(function() { 
    new HKPlayer(); 
})();

document.onreadystatechange = function() 
{ 
    if(document.readyState === 'complete') 
    { 
     // Put your code that relies on a complete/ready DOM here. 
    } 
}

편집을 : 주석에 대한 응답이, 아니이 100 % 크로스 브라우저이기 때문에, 항상 작업을하지 않습니다. 대체와

document.addEventListener('DOMContentLoaded', fn, false);

에 : 당신은 가능한 한 많은 브라우저 지원을 원하는 경우에, 당신은 대부분 다음과 같은 방법을 사용할 것

window.addEventListener('load', fn, false)

또는 IE의 이전 버전에 대한

window.attachEvent("onload", fn);

,369 님의 대체와

document.attachEvent("onreadystatechange", fn);

jQuery가 $ (document) .ready()를 어떻게 처리하는지는 분명합니다. 자세한 내용은 here을 참조하십시오.

출처

2017-10-04 17:56:29 user6003859

감사합니다. 문제가 해결되었습니다. 이것이 크로스 브라우저 호환되기를 바랍니다. "항상 작동합니까?" –

내 편집을보고 싶을 것입니다. – user6003859

배열이 비어 있지 않습니다. 첨부 된 그림에서 본 길이와 두 항목이 있습니다. getPlayerAttributes 함수에서 this.player.length 및 this.player [0]에 액세스 할 수 있다고 생각합니다.

출처

2017-10-04 17:49:33

this.players.length는 0을 반환합니다 –

onload 또는 click 이벤트에서 코드를 호출하면 배열에 도달 할 수 있습니다. @Xufox 설명은 코드를 실행할 때 html 요소를 생성 할 수 없지만 chrome 도구에서 볼 수 있습니다.이 코드를 보았을 때 이미 genared 상태 였기 때문에 콘솔에서 evaluted 값을 볼 수 있습니다. –

답변

관련 문제