JavaScript에서 태그 속성으로서의 속성
이제 태그의 속성을 얻는 방법을 배워봅시다. 여기에는 다음과 같은 규칙이 적용됩니다: 태그의 각 속성은 DOM 요소의 동일한 이름을 가진 속성에 대응합니다.
예를 통해 살펴봅시다. 다음과 같은 태그가 있다고 가정해 보겠습니다:
html<input id="elem" type="text">
해당 요소에 대한 참조를 변수에 저장해 봅시다:
javascriptlet elem = document.querySelector('#elem');
필요한 속성의 값을 출력해 보겠습니다:
javascriptconsole.log(elem.id); // 'elem'을 출력합니다
console.log(elem.type); // 'text'를 출력합니다
이번에는 예시로 속성 값을 변경해 보겠습니다:
javascriptelem.type = 'submit';
다음 입력 필드가 주어졌습니다:
html<input id="elem" type="email">
버튼도 있습니다. 버튼을 클릭하면
위 입력 필드의 type 속성 내용을
화면에 출력하세요.
다음 입력 필드가 주어졌습니다:
html<input id="elem" type="email">
버튼도 있습니다. 버튼을 클릭하면
type 속성에 submit 값을
설정하세요.
a 태그 형태의 링크,
버튼 및 단락이 있다고 가정합니다. 버튼을 클릭하면
링크의 href 속성 내용을
단락에 출력하세요.
링크와 버튼이 있다고 가정합니다. 버튼을 클릭하면
링크 텍스트 끝에
해당 href 속성 내용을 괄호 안에
추가하세요.
이미지가 있다고 가정합니다.
img 태그를 사용하여 페이지에 배치하세요.
버튼과 단락도 있다고 가정합니다.
버튼을 클릭하면 단락에
이미지의 src 속성에 있는 경로가 기록되도록 만드세요.
img 태그에 이미지와 버튼이 있습니다.
버튼을 클릭하면 width
속성에 300 값을 설정하세요.
img 태그에 이미지와 버튼이 있습니다.
width 속성에 특정 너비가 설정되어 있다고 가정합니다.
버튼을 클릭할 때마다
이미지 너비가 2배로 증가하는 버튼을 만드세요.
두 개의 이미지가 있다고 가정합니다.
페이지에 img 태그와 두 개의 버튼을 만드세요.
첫 번째 버튼을 클릭하면
src 속성에 첫 번째 이미지 경로를 설정하고,
두 번째 버튼을 클릭하면 두 번째 이미지 경로를 설정하세요.