실행 순서의 DOM 순서

html/javascript의 실행 순서는 모든 프로그래밍 언어에서와 같이 serial입니다. 즉, 브라우저가 html/javascript 코드의 줄을 한 줄씩 읽고 해석합니다.실행 순서의 DOM 순서

그 이유는 일부 자바 스크립트 프로그래머가 태그를 본문의 끝에 넣는 이유입니다. 전체 DOM이로드되었는지 확인하고 원하는 요소에 액세스 할 수있게합니다. 이것은 그들이 그것을 어떻게 -이 테스트하고 싶었

<html> 
... 
<body> 
... 
<script> //whatever code you want to put 
</script> 
</body>

그래서 나는 다음과 같은 코드를 작성

<html> 
<head> 
</head> 
<body> 
<script> 
var elm=document.getElementById("myp"); 
alert(elm.innerHTML); 
</script> 
<p id="myp"> well this is darned interesting </p> 
</body> 
</html>

당신은 페이지 요소를 정의하기 전에 스크립트를 넣었습니다 볼 수 있듯이 및 스크립트가 액세스하려고합니다. p는 아직 정의되지 않았으므로 오류가 발생할 것이라고 생각했지만 "재미있다"(p 값)를 얻었습니다. head 요소에 스크립트를 넣어도 똑같은 일이 발생합니다. (크롬과 파이어 폭스로 테스트).

어떤 일이 일어나고 있는지 알 수 있습니까?

출처

2012-06-14 Joel_Blum

필자는 예상대로 firebug 콘솔/Fx13에서 오류가 발생했습니다. http://jsfiddle.net/x8BmK/ – fcalderan

OK 그러나 결과는 여전히 '아주 재미 있습니다'입니다. 이 문제와 관련하여 현대적인 브라우저에서 어떤 일이 벌어지고 있는지 궁금해서 ... –

결과는 무엇입니까? 경고는 전혀 표시되지 않으며 텍스트는 이미 마크 업 – fcalderan

이 특정 사례에 대한 세부 사항을 제외하고 일반적인 원칙을 요약 해 보겠습니다. 내 소스는 Flanagan입니다. JavaScript : The Ultimate Guide, 5/e.

브라우저가 HTML 행을 읽고 응답으로 무언가를 렌더링한다고 생각하는 것은 너무 단순합니다. 확실히 입력을 순차적으로 스캔하지만, DOM 객체 생성 순서는 스캔 된 입력과 일치하지 않습니다. 블랙 박스로 취급하는 것이 더 좋습니다.

DOM 요소를 조작 할 스크립트를 실행하려면 안전하고 확실한 방법은 onload 이벤트의 처리기로 실행하는 것입니다. 때로 인라인 스크립트를 작성하여이를 수행 할 수도 있지만 이는 회색 영역입니다. 플래너 글 :

대부분의 브라우저는 스크립트를 모든 문서에게 <script> 태그 앞에 표시 요소를 조작 할 수 있도록하는 것. 일부 JavaScript 프로그래머가이를 정기적으로 수행합니다. 그러나, 표준 작업에 필요하지, 그리고 모호한 경우, 일부 사이에 믿음이 <script> 태그 내에서 문서 조작 코드 를 배치하는 문제를 일으킬 수있는 자바 스크립트 코더를 경험 .... (p. 256)

지속적인있다

그러나 모든 HTML이 파싱되었지만 모든 이미지가로드되기 전에 DOM을 조작해야 할 수 있습니다. 그게 필요하다면, jQuery와 그 도구 인 ready 이벤트와 같은 도구가 필요합니다.

출처

2012-06-14 15:57:07

Dave의 재미있는 이야기 –

실행 순서의 DOM 순서

답변

관련 문제