728x90
dom : 문서 객체 모델 (document object model)
문서의 정보가 담아져있다.
document 라는 변수명으로 문서에 접근 할 수 있다.
1. 객체 검색 메서드
① 아이디 검색 : getElementById('아이디명');
② 태그명으로 검색 : document.getElementsByTagName('태그명'); -> 배열로 반환
③ 클래스명으로 검색 : document.getElementsByClassName('클래스명'); -> 배열로 반환
④ 속성 name의 값으로 접근 : document.네임명 (name이라는 속성은 form 객체에만 적용)
<body>
<form id="myForm" name = "myForm">
<input type = "text" name ="myName">
<input type = "text" name ="myAge">
<input type= "checkbox" name ="add" value ="전주" class = "myCheck" checked = "checked">
<input type= "checkbox" name ="add" value ="군산" class = "myCheck">
<input type= "checkbox" name ="add" value ="익산" class = "myCheck">
<button type="button" id="myBtm" onclick="myFunction();"> 버튼 </button>
</form>
<div id ="myTag">
<h1>안늉 오눌은 워료일</h1>
</div>
</body>
1] 폼 하위 접근하기
document.myForm.myName; //<-속성값 name으로 접근
document.getElementById('myForm').myName;
2] 폼 객체에 접근시 폼 객체의 속성을 접근 할 수 있다. 값을 가져올 수도 입력 할 수 도 있다.
var myName = document.myForm.myName;
console.log(myName.value);
myName.value = 'yeriel'
3] 태그 검색하거나 삽입하기
- innerHTML, innerText의 속성으로 접근 및 요소값 변경 가능
var myTag = document.getElementById('myTag');
myTag.innerHTML = '<h1>한국스마트정보교육원</h1>'; //변경하기
4] 다중 객체 접근하여 반복문 풀기
var checkArray = document.getElementsByClassName('myCheck');
for(var i = 0;i< checkArray.length; i++){
//checkArray[i].checked = true; //체크박스 모두 체크하기
if(checkArray[i].checked){//체크된 체크박스만 콘솔에 출력하기
console.log(checkArray[i].value);
}
} <script type="text/javascript">
console.log('하위에서 객체 검색', document.getElementById('myForm'));
var myFunction = function () {
console.log('내 함수 실행');
var myForm =document.getElementById('myForm');
console.log('myName : ',myForm.myName.value);
console.log('myAge : ',myForm.myAge.value);
var checkArray = document.getElementsByClassName('myCheck');
for(var i = 0;i< checkArray.length; i++){
//checkArray[i].checked = true;
if(checkArray[i].checked){//체크된 체크박스만 콘솔에 출력하기
console.log(checkArray[i].value);
}
}
}
</script>
5] 폼태그의 포커스 잡기 - 마지막에 선택된 객체에 속성 focus()로 접근가능
객체.focus( ) -> 해당 객체에 커서 이동하기
6] form 객체 속성 변경 및 submit 하기
var myForm = document.getElementById('myForm');
myForm.action = './';
myForm.method = 'POST';
myForm.submit(); //action 속성에 기입 된 경로로 데이터 전송 - 폼자체에 있는 메서드
반응형
'Frontend > Javascript' 카테고리의 다른 글
| javascript - 문서 객체 모델 style - display, tab 버튼 만들기 (0) | 2020.03.17 |
|---|---|
| javascript - 문서 객체 모델 style (0) | 2020.03.17 |
| java script 반복문 (0) | 2020.03.09 |
| java script 연산자 실습 (0) | 2020.03.09 |
| java script 연산자 (0) | 2020.03.09 |
댓글