Image element by DOM

자바스크립트를 이용해서 문서에 이미지를 추가하는 방법에 관해서 알아보겠습니다.
다양한 방법이 있는데요. 각각의 방법에 대해 알아 볼까요.
우선 DOM API를 이용해서 한번 해보죠.

DOM API를 사용하기

							window.onload = function () {
								var imagePanel = document.getElementById("imagePanel");
								var img = document.createElement("img");
								img.setAttribute("src", "/florakid_lib/images/sample/photo1.jpg");
								img.setAttribute("id", "imageObj");
								img.style.width = "400px";
								var imageObj = document.getElementById("imageObj");
								alert(imageObj);
								imagePanel.appendChild(imageObj);						
							}								
						

상기의 소스를 한번 보시죠. 일단 createElement() 메서드를 이용해서 이미지 객체를 만들고 변수 img 에 저장한 후 거기에 setAttribute를 이용해서 "src", "id" attribute 값을 입력하여 id값을 이용해서 미리 생성해 놓은 imagePanel이라는 div 객체에 붙여 넣고자 합니다.
그런데 문제가 생겼네요. 이미지가 제대로 문서에 append 되지 않습니다.
왜 그럴까요?
소스를 보면 이미지 요소를 만들고 거기에 id 값을 부여하고 그 부여된 아이디 값을 가지고 imagePanel에 appendChild() 메서드를 이용해 붙여 넣고 있는데요. 이러한 절차에 문제가 있습니다.

http://florakid.nayana.com/florakid_lib/sub/javascript/dom_method_property.html를 참조해 보시죠. 거기에 노드찾기 항목에서 getElementById에 관한 설명이 있습니다. 그 설명 내용 중에 "getElementById 메서드는 이미 만들어진 문서 객체만 사용할 수 있습니다."라고 되어 있습니다.

상기 소스의 절차에서 img 요소를 동적으로 생성된 요소이고 거기에 id값은 동적으로 붙여진 attribute 값입니다. 따라서 이미 만들어진 문서 객체가 아닌 새로 만들어진 문서 객체인 것이죠. alert을 띄워보면(이미 소스에 alert으로 확인 작업을 하고 있습니다.) "null"이라고 뜹니다. 이 말은 객체가 존재하지 않는다는 말이죠? 다시 테스트를 위해서 소스를 변형해 볼께요.

							window.onload = function () {
								// 중략
								if (!imageObj) {
									alert("image Element is not exist!!");
								}	
								imagePanel.appendChild(imageObj);	
							}								
						

imageObj가 존재하지 않으면 "image Element is not exist!!"라는 경고창이 뜨도록 했습니다. 존재하지 않는다는 뜻인데 경고창이 뜨는 걸 확인할 수 있습니다.
소스를 아래와 같이 변경합니다. 이번에는 id를 이용하지 않고 이미지 element를 저장하고 있는 변수img를 직접 imagePane에 appendChild 시킵니다.
아마 재대로 작동할 것입니다. 확인해 볼까요?

							window.onload = function () {
								var imagePanel = document.getElementById("imagePanel");
								var img = document.createElement("img");
								img.setAttribute("src", "/florakid_lib/images/sample/photo1.jpg");
								img.setAttribute("id", "imageObj");
								img.style.width = "400px";
								imagePanel.appendChild(img);						
							}							
						


Image 객체를 이용하기

Image 객체를 객체 생성 방식을 이용해서 생성하여 사용하는 방법을 이용합니다.