JavaScript에서 HTML 양식 요소에 액세스하는 방법 - 다른 HTML 요소와 마찬가지로

다른 HTML 요소와 마찬가지로 JavaScript에서 HTML5 요소와 직접 상호 작용할 수 있습니다. 트릭은 선택한 요소가 지원해야하는 브라우저 및 플랫폼에서 작동하는지 확인하는 것입니다.

이 예에서는 디스크에서 이미지를로드하여

태그에 저장하는 솔루션의 일부로 및 태그를 사용하는 방법을 보여줍니다. 다음 코드는 작업을 수행하는 데 사용하는 HTML을 보여줍니다.

태그는

및 태그를 보유하는 컨테이너 역할을합니다. 이와 같은 컨테이너를 사용하면 이미지와 캡션을 동시에 포맷하는 것과 같은 작업을 수행 할 수 있습니다.

이벤트도 공동으로 처리됩니다. 이 경우 사용자가 이미지 또는 캡션을 클릭하는지 여부는 중요하지 않으며 응용 프로그램은 Clicked ()를 호출합니다. 이 경우 Clicked ()는 다음과 같이 사용자에게 메시지를 표시합니다.

function Clicked () {// 메시지를 표시합니다. alert ("이미지를 클릭했습니다.");}

JavaScript는 이러한 요소에 완전히 액세스 할 수 있습니다. 이 경우 양식이로드 될 때

태그는 비어 있습니다. 버튼을 클릭하면

태그 내용을 변경하여 화면 상에 이미지가 표시됩니다. 다음은 이미지를로드하는 데 필요한 코드입니다.

function LoadImage () {// 이미지를 지정합니다. var Image = document. getElementById ("Image"); 영상. alt = "테스트 이미지입니다."; 영상. src = "TestImage.png"; // 캡션을 설정합니다. var Caption = document. getElementById ("Caption"); 표제. innerHTML = "테스트 이미지";}

태그로 작업 할 때 src (이미지 소스) 및 alt (이미지 대체 텍스트 설명) 속성에 직접 액세스합니다. innerHTML 속성을 사용하여 내용을 설정하십시오.

->