HTML 요소

LocatingNodes.htmlHTML 요소

<!DOCTYPE html> 
<html> 
    <head> 
     <script src = "../js/LocatingNodes.js" type="text/javascript"> 
     </script> 
    </head> 
    <body> 
     <h2 style = "color:black" id="cute_text">Click on a button to change the color</h2> 
     <form> 
     <input onclick="change_color1()" type="button" value="Change using method 1"> 
     </form> 
    </body> 
</html>

LocatingNodes.js

function change_color1() 
{ 
    alert(document.childNodes[0]); 
    alert(document.childNodes[1]); 
    alert(document.childNodes[1].childNodes[0]); 
    alert(document.childNodes[1].childNodes[1]); 
    alert(document.childNodes[1].childNodes[2]); 
    alert(document.childNodes[1].childNodes[2].childNodes[0]); 
    alert(document.childNodes[1].childNodes[2].childNodes[1]); 
    alert(document.childNodes[1].childNodes[2].childNodes[2]); 
    alert(document.childNodes[1].childNodes[2].childNodes[3]); 
    alert(document.childNodes[1].childNodes[2].childNodes[4]); 
    alert(document.childNodes[1].childNodes[2].childNodes[5]); 
    document.childNodes[1].childNodes[2].childNodes[1].style.color="red"; 
}

I 상기 프로그램 실행하려고. 나는 11 개 경고 창에서 얻을 출력은 아래와 같습니다 :

[object DocumentType], 
[object HTMLhtmlElement], 
[object HTMLHeadElement], 
[object Text], 
[object HTMLBodyElement], 
[object Text], 
[object HTMLHeadingElement], 
[object Text], 
[object HTMLFormElement], 
[object Text], 
undefined

을 빨간색으로 제목 변경의 색상 후에 내가 마지막 경고 창의 '확인'을 클릭하면. 나는 이것이 어떻게 요소들을 집어 들고 있는지 궁금해하고있다. 또한 본문의 태그에 액세스하는 동안 요소 태그를 얻지 못했습니다. 누군가 출력을 수행하는 방법을 설명해 주시겠습니까? 또한 태그 내에있는 모든 태그 다음에 [object text]가 인쇄되는 이유는 무엇입니까?

출처

2017-05-13 kanchan

필자는 요소를 선택하는 방법에 대해 궁금해합니다.

는 문서 목적은 그래서 모든 자식 노드가 childNodes에 속성을 통해 사용할 수는 NodeList interface 구현합니다. 또한 MDN: Node.childNodes을 참조하십시오.

또한 본문의 태그에 액세스하는 동안 요소 태그를 얻지 못했습니다.
alert(document.childNodes[1].childNodes[2]); 
누군가가 출력이 수행되는 방법을 설명하시기 바랍니다 수 :

회원님이 여기에 무슨 뜻인지 확인, [object HTMLBodyElement]는 OP 코드의 다섯 번째 요소는 무엇입니까? 당신이 경고에 DOM 요소를 보낼 때

, 그것은 메서드가 호출됩니다 toString입니다. 결과는 구현에 따라 다르며, 호스트에서 보는 것을 얻습니다. 다른 호스트는 다른 문자열을 반환 할 수 있습니다.

태그 내에있는 모든 태그 다음에 [object text]가 인쇄되는 이유는 무엇입니까?

공백은 텍스트 노드로 보존되므로 공백이있는 곳이면 텍스트 노드가 있습니다. 일부 브라우저는 완전히 공백이거나 텍스트 노드가 허용되지 않는 텍스트 노드를 제거합니다. 다른 것은 없습니다. 즉, 공백을 보존하는 것과 관련하여 다른 호스트에서 다른 결과를 얻을 수도 있습니다.

출처

2017-05-13 08:09:08 RobG

감사합니다. @RobG. 위의 정보는 매우 유용합니다. 태그를 추적하려면 어떻게해야합니까? – kanchan

"경고에 DOM 요소를 보내면 toString 메서드가 호출됩니다. 결과는 구현에 따라 다르며 호스트에서 볼 수있는 것을 얻을 수 있습니다. 다른 호스트는 다른 문자열을 반환 할 수 있습니다." 다른 결과를보고 싶다면 어떻게해야합니까? 결과가 구현에 따라 어떻게 달라지는 것입니까? 코드 변경이 필요합니까? – kanchan

@ kanchan- 당신이 바꿀 수있는 건 아무것도 없습니다. 다른 호스트를 테스트하여 호스트가하는 일을 확인하거나 자신의 기능을 작성할 수 있습니다.또한 콘솔에서 다른 결과를 얻습니다. – RobG

답변

관련 문제