2012-02-09 2 views
4

저는 자바 스크립트를 처음 사용합니다. 나는 코드를 연습하고 있습니다. 머리 부분에 코드를 넣으면, 요소 null을 얻습니다. 그리고 body 안에 넣을 때, 그러나 요소 앞에 넣으면 null이됩니다. 그러나 body 안에 넣으면 요소 뒤에 그럼 나는 요소를 얻는다. 처음 두 사건의 경우 왜 내가 널리게되는지 묻고 싶습니다. 여기에 내 코드언제 자바 스크립트를 html로 넣을지

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

     <script type="text/javascript" src="js/attributes.js"></script> // null 

    </head> 
    <body> 

     <script type="text/javascript" src="js/attributes.js"></script> // null 
     <a id="braingialink" 
      onclick="return showAttributes();" 
      href="http://www.braingia.org" >Steve Suehring's Web Site 
     </a> 

     <script type="text/javascript" src="js/attributes.js"></script> // ok 

</body> 
다음

요소 뒤에 <script type="text/javascript" src="js/attributes.js"></script>

을 배치 내 자바 스크립트

또한
var a1 = document.getElementById("braingialink");  //get null in first two cases 
window.alert(a1.getAttribute("href")); 
a1.setAttribute("href", "www.google.com"); 
window.alert(a1.getAttribute("href")); 

function showAttributes() { 

    var e = document.getElementById("braingialink"); 
    var elementList = ""; 

    for (var element in e) { 

     /** 
     * Sometimes, especially when first programming with JavaScript, you might not know what 
     * attributes are available for a given element. But you don’t have to worry about that, because 
     * of a loop that calls the getAttribute() method. 
     */ 
     var attrib = e.getAttribute(element); 
     elementList = elementList + element + ": " + attrib + "\n"; 

    } //end of for() 

    alert(elementList); 

} //end of function showAttributes 

그리고 말해,이다, 내가 쓰기와 동일 스크립트 태그의 스크립트 (예 :

)
<a href="http://www.braingia.org" id="braingialink">Steve Suehring's Web Site</a> 
<script type="text/javascript"> 
    var a1 = document.getElementById("braingialink"); 
    alert(a1.getAttribute("href")); 
    a1.setAttribute("href","http://www.microsoft.com"); 
    alert(a1.getAttribute("href")); 
</script> 

둘 다 같은 의미입니까?

감사

답변

6

브라우저는 위에서 아래로, 문서를 구문 분석하고 발생하는 경우 <script> 블록 (인라인 스크립트 또는 외부 JS 파일의 포함 여부)는 문서의 모든 이상을 분석하기 전에 스크립트 실행. 그 특정의 코드 블록이 요소를 참조하려고하면 (자), 소스의 요소 (즉, 해석 끝난 요소)의 요소에 대해서만 액세스 할 수 있습니다.

document.getElementById() 방법은 어떤 요소가 당신이 제공 한 ID에 대해 발견되지 않으면 null를 반환, 그래서 당신은 그들이 아직 분석되지 않은 한 소스에 아래의 요소에 액세스하는 데 사용하려고하면 찾을 수 없습니다. 이 다루는

가장 일반적인 두 가지 사례는 다음과 같습니다

  1. 는 실행될 때 모든 요소를 ​​구문 분석 된 것이라는 <body> 등의 하단에있는 스크립트를 모두 넣습니다.

  2. 즉시 문서로드가 완료로 실행하는 함수를 정의, 즉,에 "온로드"핸들러를 만듭니다. 가 정의 온로드 기능이 바로 실행되는 자바 스크립트,하지만 기능은 나중에 모든 것이로드 된 후을 실행 - 당신은 <head>에 스크립트 블록에서이 작업을 수행 할 수 있습니다.

다음은 옵션 2를 할 수있는 간단한 방법입니다 :

window.onload = function() { 
    var x = document.getElementById("x"); 
    // other element manipulation here 
}; 

당신이 중간에 약간의 <script> 블록을 던지는와 함께 같은 문서 1 2 일을 중지 아무것도 없다 대부분의 사람들은 한 곳에서 모든 코드를 유지하는 것이 더 낫다고 생각합니다.

+0

''을 사용할 때 묻고 싶습니다. 우리가'window.onload = someFunction() {...};'라고 쓰는 것과 같다. .js 파일에 간단한 함수를 쓰고, function someFunction() {..}을 쓰고, HTML에''줄을 사용하면, 다음과 같이 나타납니다. 내 .js 파일을 head 섹션에 넣고 .js에'window.onload = someFunction() {...};'이라고 씁니다. 둘 다 같습니까? – Basit

+0

거의 같습니다. ' html의 속성으로 설정하는 것은'window.onload = function() {something}'을 말하는 것과 같습니다. 즉, 속성에 넣은 코드는 함수는 일종의 함축적 인 함수를 가지고 있습니다. 많은 사람들은 자바 스크립트를 html로 혼합하지 않으려 고합니다. 유지하는 것이 더 어려울 수 있기 때문입니다. 참고 : html 속성에 설정된 JavaScript를 따옴표로 묶어야합니다. – nnnnnn

0

베스트 페이지 로딩 전혀 렌더링을 방해하지 않는, 닫는 body 태그 전에 잘 될 것입니다! 또한 Google에서 추천합니다 (예 : 분석 스 니펫 및 Facebook의 경우).

1

DOM이로드되지 않았으므로 머리에 null이 표시됩니다. 개체가 그 당시에 존재하지 않습니다. 이 옵션을 사용합니다 :

window.onload = function() { 
    // Your code 
} 

오 또한 jQuery를 here.ready() 기능을 살펴. 그것은 나중에 두통을 확실히 도울 것입니다.

+0

window.onload를 사용하면 스크립트를 실행하기 전에 모든 요소가로드 될 때까지 대기하거나 페이지가로드 될 때 실행됩니까 ?? – CSharpened

+1

예, 모든 항목이로드 될 때까지 기다립니다. 이 페이지를 참조하십시오 : http://makeagreatsite.com/javascript/how-execute-javascript-when-document-ready –

+0

그래서 우리는 머리 부분에 또는 오른쪽으로 본문 태그 후 스크립트를 사용하는 경우? 즉, HTML의 요소에 액세스하려면 ** Jannis M **의 제안에 따라 종료 본문 태그 바로 앞의 스크립트를 사용하는 것이 가장 좋습니다. – Basit

1

보통 스크립트 블록을 head 태그 안에 넣어야합니다. 특별한 이유가있는 경우 body 태그에 넣을 수 있습니다. 예를 들어 느린 서버에서 오는 스크립트이므로 나중에로드 할 수 있습니다.

요소에 액세스 할 수없는 이유는 브라우저가 요소의 코드를 구문 분석하기 전에 코드가 실행되므로 요소가 아직 존재하지 않기 때문입니다.

당신은 문서가로드 된 후 코드를 실행하기 위해 load 이벤트를 사용 :

window.onload = function() { 

    // here you put the code that needs to access the elements 

} 
0

브라우저가 계속 페이지를로드하는 동안 스크립트가 실행 때문에 널 (null)을 얻는다. 페이지에 아직 렌더링 된 모든 요소가 없을 수 있으므로 null이 반환됩니다. 페이지로드가 끝나면 스크립트를 실행해야합니다. 스크립트를 HEAD 요소에 넣고 본문의 onload 이벤트에서 호출합니다.

1

웹 브라우저가 리소스를 페이지에로드하는 방법을 이해해야합니다. Firefox -> Firebug 애드온 넷 탭은 자원로드 방법의 타임 라인을 보여줍니다. jQuery 나 그와 비슷한 것을 사용한다면 (그리고해야 할) - 코드가 $(document).ready(function() { .. } 안에 있어야 페이지가 완전히로드되었는지 확인할 수 있습니다.

또한 사용자 정의 js를 </body> 태그 앞에 포함하는 것이 좋습니다. 그러면 페이지 DOM이로드되었을 것입니다.당신이 깊은이 이해하려면

읽기 유무 : http://www.goodreads.com/book/show/6438581-even-faster-web-siteshttp://www.goodreads.com/book/show/1681559.High_Performance_Web_Sites

+0

'$ (document) .ready (function() {..}'을 사용하면 그 요소뿐만 아니라 그 속성도 사용 가능하거나 요소 만 사용할 수 있습니다. 만약 내가' ' (문서) .ready (fn)'실행하면 ** **의 모든 속성에 액세스 할 수 있습니까? 아니면 ** ** 속성이없는 요소입니까? – Basit

+0

속성이 있습니다. –

+0

고맙습니다. :) – Basit

2

http://www.w3schools.com/js/http://www.w3schools.com/js/js_whereto.asp 참조가

당신은 당신의 문서에 스크립트를 무제한으로 배치 할 수 있습니다, 당신은 할 수 동시에 본문과 머리 부분에 스크립트가 있습니다. 모든 기능을 헤드 섹션이나 페이지 하단에 배치하는 것이 일반적입니다. 이 방법은 모두 한 곳에서 이루어지며 페이지 내용을 방해하지 않습니다.

관련 문제