2014-11-12 4 views
-3

내 코드DOM 탐색 - 예기치 않은 값

<!DOCTYPE html> 
<html> 
<body> 

<h1 id="H1">H1 text H1 text H1 text</h1> 

<p id="P2">P2 P2 P2</p> 

<script> 
var Text = document.getElementById("H1").childNodes[-5].nodeValue; 
document.getElementById("P2").innerHTML = Text; 
</script> 

</body> 
</html> 

이 어떻게 내 페이지가로드 될 때 나도 같은 텍스트 단락 P2에서 볼 수 있음을 참조하십시오?

왜 "정의되지 않음"또는 "null"이라고 쓰여 있지 않습니까?

+2

: 당신의 생각은 노드가 존재하는지 확인 할 수 있었다면

, 당신은 뭔가를 할 수 있습니다. 당신의 콘솔을보십시오. Uncaught TypeError : undefined의 nodeValue '속성을 읽을 수 없습니다. 'Text'를 지정하는 줄에 오류가 생기므로 두번째 줄을 절대 실행하지 않습니다. –

+0

확인. 그러나 333이나 -10과 같은 잘못된 색인을 작성하면 페이지에서 "정의되지 않은"또는 "null"이라는 단어가 보이지 않는 이유는 무엇입니까? 스크립트가 나를 무시하는 이유는 무엇입니까? – asker22

+2

스크립트가 손상 되었기 때문에 오류가 발생하면 어떻게해야할까요? 상관없이 계속? 그것이 작동하는 방식이 아닙니다. 첫 번째 오류가 발생하면 실행이 중지됩니다. 스크립트가 사용자를 무시하지 않고 오류가 발생하면 무시합니다. –

답변

0

H1 요소에는 텍스트 노드 인 하나의 하위 노드 만 있습니다. 이 같은 0으로 색인을 변경하는 경우 : 당신이 무엇을하려고 나에게 분명하지 않지만

<!DOCTYPE html> 
<html> 
<body> 

<h1 id="H1">H1 text H1 text H1 text</h1> 

<p id="P2">P2 P2 P2</p> 

<script> 
var Text = document.getElementById("H1").childNodes[0].nodeValue; 
document.getElementById("P2").innerHTML = Text; 
</script> 

</body> 
</html> 

당신은

0

..., 지금 실행하는 것을 볼 수 있습니다 두 번째 줄 때문에 절대 실행하지 않습니다. 당신의 콘솔을보십시오. Chrome에서 적어도 다른 브라우저에는 약간 다른 verbage가있을 수 있습니다. Uncaught TypeError: Cannot read property 'nodeValue' of undefined.

스크립트는 처음 발생했을 때 중지을 실행합니다.

var Text = document.getElementById("H1").childNodes[-5].nodeValue; // <-- execution 
                    // stops here 
document.getElementById("P2").innerHTML = Text;  // <!-- this line never executes 

어떤 일이 일어나고 것은 즉 :

document.getElementById("H1").childNodes[-5] 

(I, 당신이 알고, 따라서 귀하의 질문에 의심) undefined를 반환합니다 즉, 작동 단지 방법입니다. 그런 다음 .nodeValueundefined에있는 속성에 액세스 해보십시오. 이렇게하면 직접 입력 한 것과 똑같은 오류가 발생합니다.

undefined.nodeValue 

콘솔에 (계속 시도해보십시오). 오류를 무시하고 결과를 계속 실행하려는 경우 예기치 않게 발생하고 이후에 스크립트에서 더 심각한 오류가 발생할 수 있습니다. 두 번째 줄은 실행되지 않습니다 때문에

var Text = undefined; 
 
if (document.getElementById("H1").childNodes[-5]) { 
 
    // undefined is falsy - so this next line won't execute and we'll get no errors 
 
    Text = document.getElementById("H1").childNodes[-5].nodeValue; 
 
} 
 
// now .innerHTML will get "undefined" 
 
document.getElementById("P2").innerHTML = Text;
<h1 id="H1">H1 text H1 text H1 text</h1> 
 

 
<p id="P2">P2 P2 P2</p>