Body 요소에있는 자식 노드의 수 javascript

-1

Body 요소에있는 자식 노드의 수는 아무 것도 없지만 1입니다. 이것은 Body 요소에서만 발생하지만 div와 같은 다른 요소에서는 발생하지 않습니다. 이 경우 결과는 0입니다. 이유가 무엇입니까? 이 결과가 0Body 요소에있는 자식 노드의 수 javascript

<!Doctype html> 
<html> 
<head> 
<script> 
    function run() { 
    alert(document.body.getElementsByTagName("div")[0].childNodes.length); 
    } 
    window.addEventListener("load",run,false); 
</script> 
</head> 
<body> 
<div></div> 
</body> 
</html>

출처

2017-01-04 Kristjan Kica

몇 가지 세부 정보 (예 : 일부 코드)를 제공해주십시오. 이걸보세요 : http://stackoverflow.com/help/mcve – ppovoski

스크린 샷을 찍었습니다. 지금은 어때? @pp –

DOM에서 body의 코드 조각에 두 줄 바꿈이 포함되어 있습니다. 따라서 DOM에는 텍스트 노드 자식이 있습니다. 당신이 다시 얻을 것이다 것은 이것이다

<head> 
<script> 
    function run() { 
    alert(document.body.childNodes.length); 
    alert(document.documentElement.innerHTML); 
    } 
    window.addEventListener("load", run, false); 
</script> 
</head> 

<body></body> 

</html>

... 그리고 :

그 문서 - 예를 들면, 단지 같은 코드를 수정과 document.documentElement.innerHTML을 시도

<head> 
<script> 
    function run() { 
    alert(document.body.childNodes.length); 
    alert(document.documentElement.innerHTML); 
    } 
    window.addEventListener("load", run, false); 
</script> 
</head> 

<body> 


</body>

또는 단지에서 문서를 검사 브라우저 devtools에서 질문하거나 Live DOM Viewer을 사용하십시오.

출처

2017-01-04 15:30:57 sideshowbarker

동안

<head> 
<script> 
    function run() { 
    alert(document.body.childNodes.length); 
    } 
    window.addEventListener("load", run, false); 
</script> 
</head> 

<body></body> 

</html>

체내 공백있다. 공백은 '텍스트'로 간주되고 '텍스트'는 노드로 간주됩니다.

코드를 약간 변경하면 nodeName을 출력 할 수 있습니다. 이 경우 #text을 출력합니다.

이미 노드가 하나 있다는 것을 알고 있으므로 간단히 childNodes[0]을 출력 할 수 있습니다. 둘 이상인 경우 루프를 반복하여 출력 할 수 있습니다.

<head> 
<script> 
    function run() { 
     alert(document.body.childNodes[0].nodeName); 
    } 
    window.addEventListener("load", run, false); 
</script> 
</head> 

<body></body> 

</html>

나는 body 태그에 공백을 제거 할 수는 없지만 나는 div 태그 할 수 있습니다.

<!Doctype html> 
<html> 
<head> 
<script> 
    function run() { 
     var length = document.body.getElementsByTagName("div")[0].childNodes.length; 
     if(length > 0) { 
      length += "\n" + document.body.getElementsByTagName("div")[0].childNodes[0].nodeName; 
     } 
    alert(length); 
    } 
    window.addEventListener("load",run,false); 
</script> 
</head> 
<body> 
<div></div> 
</body> 
</html>

당신이 div 태그 (공백, 줄 바꿈 등) 사이에 공백을 추가하는 경우

은 경고 텍스트 노드를해야합니다.

EDIT : 그것은 브라우저와 관련된 것으로 나타납니다. 이것은 IE, Firefox 및 Chrome의 동작입니다. 이 방법으로 다른 브라우저가 작동하는지 확신 할 수 없습니다.

출처

2017-01-04 01:52:54 ppovoski

그건 정확히 내가 말한 것입니다. body 태그에 공백이 없지만 텍스트 노드가있는 것으로 보입니다. 그러나 div 태그에서는 그렇지 않습니다. 이 현상에 대한 설명을 찾고 있습니다. –

요소 인 노드가 개이고 텍스트 노드 나 다른 종류가 아닌 경우 document.body.children을 대신 사용하십시오.

는 https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children를 참조하십시오

Node.children는 노드의 하위 요소의 라이브 HTMLCollection를 반환하는 읽기 전용 속성입니다.

출처

2017-01-04 02:37:20 sideshowbarker

그건 내가 묻는 것이 아니다. 나는 모든 텍스트 노드를 원하지만 div는 그렇지 않은데 왜 본문에는 텍스트 노드가 있습니까? 그들 중 누구도 공백이나 어떤 종류의 텍스트를 가지고 있지 않습니다. –

아아, 알았어. 왜 그런지 알 겠어. 또 다른 해답을 설명과 함께 게시 할거야. – sideshowbarker

Body 요소에있는 자식 노드의 수 javascript

답변

관련 문제