오늘 작은 캔버스 프로그램을 작성했을 때 그 둘이 다르다는 것을 발견했습니다. alert()를 직접 사용하여 이 두 가지 방법이 무엇을 얻는지 보여줍니다. 코드는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. jb51 href="css/index .css" rel="stylesheet" type="text/css"> </ script> <br></head> <br><body> <br><div class="warp"> <br><canvas id="jb51">< ;/canvas> <br></div> <br>var canvas_jb51=$("#jb51") <br>alert(document.getElementById( "jb51")); <br>var jb51_2d=canvas_jb51.getContext("2d"); <br>var jb51_img=new Image() <br>jb51_img.src="images/Boston-III-48px.png" ; <br>jb51_2d.drawImage(jb51_img,0,0) <br></body> <br><br> <br> Alert()는 [object Object] 및 [object HTMLCanvasElement]로 표시됩니다. 여기에서 $("#jb51")가 내가 예상한 것과 다르다는 것을 확인하는 것은 어렵지 않습니다. Firebug를 사용하여 디버깅하고 <br>$("#jb51") 및 document.getElementById("jb51")의 내용이 무엇인지 확인하세요. 디버깅 결과는 다음과 같습니다. <br><br> </div> <br><br>코드 복사<br><div class="codetitle"><span> 코드는 다음과 같습니다.<a style="CURSOR: pointer" data="82785" class="copybut" id="copybut82785" onclick="doCopy('code82785')"><u> </u>$( "#jb51") [ canvas#jb51] </a>document.getElementById("jb51") canvas#jb51 </span></div> <div class="codebody" id="code82785">아마 이걸 보고 다들 그렇게 생각할 거라고는 말할 필요도 없을 것 같아요. 결과의. <br>실제로 $("#jb51")[0]은 document.getElementById("jb51")와 동일합니다.</div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
