[JavaScript] DOM (Document Object Model) ①

2020. 3. 16. 11:53

객체 생성자 함수

	/*
		객체 생성자 함수는 new 연산자로 메모리를 생성하여 활용한다.
		또한 함수내에서 this 키워드도 활용이 가능하다.
		****************중요****************
		this 키워드로 속성 및 메서드 작업시 외부에서 접근이 가능하다
	*/
	//this 키워드 없이 함수 작업
	var myFn1 = function(){
		//함수 내부에 var 라는 키워드로 변수 선언시 외부에서 접근 불가
		var name = '홍길동';
		//this 키워드로 변수 선언시 외부에서 접근이 가능하다.
		this.age = 20;
	}
	var my = new myFn1();
	//new 연산자를 통하여 메모리 할당시 객체(object) 형태로 메모리 할당
	console.log(my);

new 연산자를 통해 메모리 할당시 객체(object) 형태로 메모리 할당.

** var 키워드로 선언한 변수 name에는 접근이 불가능하다.

** this 키워드로 선언한 변수 age 에는 접근이 가능하다.

prototype

	var MyFn1 = function(){
		//함수 내부에 var 라는 키워드로 변수 선언시 외부에서 접근 불가
		var name = '홍길동';
		//this 키워드로 변수 선언시 외부에서 접근이 가능하다.
		this.age = 20;
		this.fn = function(){
			console.log('메서드 호출');
		}
		this.setName = function(setName){
			name = setName;
		}
		this.getName = function () {
			return name;
		}
	}
	
	//prototype으로 객체를 생성할 때 함수를 등록하는 기본형 (확장시킬 때 이용)
	MyFn1.prototype.setAge = function(changeAge){
		this.age = changeAge;
	}
	MyFn1.prototype.getAge = function(){
		return this.age;
	}

프로토타입을 사용하여 등록한 함수는 원형(객체 생성자함수)에서 생성된 객체를 공유할 수 있다.

	/*
		실습 3. fn함수와 obj객체가 있다. fn함수를 실행할 때 obj를 인수로 넘기고
		fn함수 실행시 obj 내부에 있는 n1, n2 속성값을 합산시켜
		결과값을 반환하여라.
	*/
	
	var obj = {n1 : 10, n2 : 20};
	var fn = function (o) {
		var result = o.n1 + o.n2;
		return result;		
	}
	
	var result = fn(obj);
	console.log(result);

문서객체모델

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서객체모델</title>
<script type="text/javascript">
	/*
		dom -> 문서객체모델 : Document Object Model
		문서의 정보가 담겨있다.
		document 라는 변수명으로 문서에 접근할 수 있다.
	*/
</script>
</head>
<body>

</body>
</html>

문서 객체 모델

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서객체모델</title>
<script type="text/javascript">
	/*
		dom -> 문서객체모델 : Document Object Model
		문서의 정보가 담겨있다.
		document 라는 변수명으로 문서에 접근할 수 있다.
		
		<< 객체 검색 메서드 >>
			- id 검색		: document.getElementById('아이디명');
			- tag명 검색	: document.getElementsByTagName('태그명');
			- class명 검색	: document.getElementsByClassName ('클래스명');
			- 속성 name 값 검색 : document.네임명 (**name이라는 속성은 form객체에만 적용**)
		
		//폼 하위 접근
		ex) document.myForm.myName;
			document.getElementById('myForm').myName;
			
		//폼 객체에 접근시 폼 객체의 속성에 접근할 수 있다.
		ex)	var myName = document.myForm.myName;
			console.log(myName.value);
		
		
		//태그 검색과 삽입
		innerHTML, innerText의 속성으로 접근 및 요소값 변경 가능
		ex)	var myTag = document.getElementById('myTag');
			myTag.innerHTML = '<h2>한국스마트정보교육원</h2>';
		
		//다중 객체 접근하여 반복문 풀기
		var checkArray = document.getElementsByClassName('myCheck');
		
		for(var i = 0; i <checkArray.length ; i++){
    		checkArray[i].checked = true;
    	}
		
		//체크된 체크박스의 value만 콘솔에 출력하기
		for(var i = 0; i <checkArray.length ; i++){
    		if(checkArray[i].checked){
                console.log(checkArray[i].value);
            }
    	}
		
		//form 태그에 포커스 잡기
		//마지막에 선택된 객체에 속성 focus()로 접근 가능
		객체.focus() : 해당 객체에 커서 이동하기
		
        //form 객체 속성 변경 및 submit 하기
		var myForm = document.getElementById('myForm');
		myForm.action = './';
		myForm.method = 'post';
		myForm.submit(); // action속성으로 전송
		
	*/
	
	console.log('상위에서 객체 검색', document.getElementById('myForm'));
</script>
</head>
<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="myBtn">버튼</button>
	</form>
	
	<div id = "myTag">
		<h1>안녕하세요.</h1>
	</div>
	
	<script type="text/javascript">
		console.log('하위에서 객체 검색', document.getElementById('myForm'));
	</script>
</body>
</html>

문서를 읽는 순서는 위에서 아래 방향이기 때문에 script의 위치는 html의 하단에 위치해야 한다.

객체 검색 메서드

document.getElementById();를 통해 form에 접근하여 value를 변경할 수 있다.

document.getElementById();를 통해 <div> 태그에 접근하여

innerHTML을 사용해 html을 변경할 수 있다.

document.getElementByClassName();를 통해 객체에 접근하여 객체 내부의 값을 array로 get 가능. array를 for 반복문으로 값을 추출, 변경할 수 있다.

버튼 클릭시 함수를 호출하는 이벤트 발생

var myFunction = function() { 
	console.log('함수호출')
}

<html>
<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="myBtn" onclick="myFunction();">버튼</button>
	</form>
	
	<div id = "myTag">
		<h1>안녕하세요.</h1>
	</div>
	

</body>
	<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++){
    		if(checkArray[i].checked){
                console.log(checkArray[i].value);
    		}
		}
	}
	</script>
</html>

문서 객체 모델 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서 객체 모델</title>

</head>
<body>
	<form action="./domEx01.html" method="get" id = "mF"> 
		<input type = "text" name="memberName">
		<input type = "number" name="memberAge">
		<button type = "button" onclick="v();" >전송하기</button>
	</form>
	<script type="text/javascript">
		/*  
			실습 4.위의 전송하기 버튼 클릭시 input 태그의 값을 콘솔창에 출력시키고 submit 시키시오. 
		*/
		var mF = document.getElementById('mF');
		var v = function() {
			console.log(mF.memberName.value);
			console.log(mF.memberAge.value);
			mF.submit();			
		}
		
		
		
	</script>


</body>
</html>

저작자표시

'JavaScript' 카테고리의 다른 글

[JavaScript] DOM (Document Object Model) ③ - style (0)	2020.03.17
[JavaScript] DOM (Document Object Model) ② - event / 유효성검사 (0)	2020.03.16
[JavaScript] 객체 + 함수 + 반복문 복습 (0)	2020.03.16
[JavaScript] 함수 (1)	2020.03.10

N'Che는 초보개발자