DOM
- document object model, js에서 효과적으로 동적인 처리를 하기 위해 화면을 객체로 인식하여 해당 객체의 속성을 로직에 의해서 변경하여 처리하는 객체 모델링 형태이다
- 기본 코드
1) 단일 객체 인식
var obj01 = document.qeurySelector("선택자")- 단일 객체 선언과 할당
- 여러 개 선언되어 있더라도 첫번째 선택자만 처리할 때
- #아이디명 형식으로 단일 내용을 선택자로 처리할 때 주로 사용된다
2) 다중 객체 인식
var array = document.querySelectorAll("선택자") - 하나가 아닌 여러 개 객체를 선언하고 각각의 DOM 객체에 대한 속성을 따로 처리할 때 활용
- array[0].innerText="첫번째 입력내용", array[1].innerText="두번째 입력내용"
- DOM 객체 인식 방법
1) 선언한 태그 하단에서 호출
2) 함수를 통해서 특정한 이벤트가 처리된 후에 호출 - DOM 객체의 속성 활용
1) 화면 출력 형태에 따른 코드
- innerText : 문자열 그대로 해당 요소 객체에 출력처리
- innerHTML : HTML 태그를 랜더링 하여 처리
<script>
function apple(){
var h5 = document.querySelector("h5")
var h6 = document.querySelector("h6")
h5.innerText="사과"
h6.innerText="사과"
}
</script>
<body>
<h4 onclick="apple()">사과를 먹고싶네요</h4>
// 클릭할 시점에는 h2가 화면에 메모리로 로딩된 상황이기에 해당 DOM객체를 인식할 수 있는 상황에서 처리가 가능하다
<h5></h5>
<h6></h6>
</body>js 함수 처리
- 함수는 기능 처리를 위한 코드의 집합체라고 할 수 있다
- 기본 형식
function 함수명(매개변수,...){
프로세스 처리
return 리턴값;
}
function plus(num01, num02){
var sum = (num01+num02);
return sum;
}
alert( plus(10,20) ); ==> 경고창에 30 출력이벤트와 이벤트 핸들러
- js에서의 이벤트
js에서는 속성으로 on이벤트명="이벤트핸들러"를 설정해서 해당 이벤트가 발생했을 때, 특정한 함수를 작동시킬수 있다 - 처리순서
1) 이벤트 핸들러 함수 선언 : 이벤트를 통해 처리할 내용 함수 선언
2) 이벤트 속성 선언 및 이벤트 핸들러 함수 호출
태그 on이벤트명 = "이벤트핸들러함수()"
3) 이벤트핸들러에 매개변수 전달
- 함수에 매개변수를 선언하여 문자열, 숫자 데이터를 전달할 수 있다
<script>
function call(){
// form 요소 객체에 입력된 데이터는 value 속성을 통해 가져온다
var num01Val = document.qeurySelector("[name=num01"]).value;
var num02Val = document.querySelector("[name=num02"]).value;
// + 연산처리는 문자열을 이어주는 처리도 하기 때문에 자동형변환 불가하여 Number() 함수를 통해 변환 후 합계를 구한다
var tot = Number(num01Val)+Number(num02Val);
// 출력할 대상 객체를 DOM으로 선언한다
var h3Obj = document.querySelector("h3")
// .innerText로 출력
h3Obj.innerText = num01Val+"+"+num02Val+"="+tot
}
</script>
<body>
<h3>연산 출력 결과</h3>
숫자 1 : <input type="text" name="num01">
숫자 2 : <input type="text" name="num02">
<input type="button" value="합산" onclick="call()">
</body>
핸들러 함수에 객체 매개변수 전달 및 여러가지 속성 활용
- 핸들러 함수에 this 키워드로 매개변수에 전달하면 DOM객체가 전체 넘어간다.
- 객체는 참조명으로 받아 가지고 있는 여러가지 속성을 할당하여 처리할 수 있다.
ex) 과일 리스트 테이블을 만들고 과일명을 클릭할 때마다 <h2 id=buyList>에 추가적으로 과일 항목이 담기게 처리
<script>
function buyFruit(obj){
// js에서 띄어쓰기 처리
var text = document.createTextNode("\u00a0");
document.querySelector("#buyList").innerText+=obj.innerText+"\u00a0";
}
</script>
<body>
<table>
<tr><td onclick="buyFruit(this)">사과</td><td onclick="buyFruit(this)">바나나</td><td onclick="buyFruit(this)">딸기</td></tr>
<tr><td onclick="buyFruit(this)">복숭아</td><td onclick="buyFruit(this)">수박</td><td onclick="buyFruit(this)">자두</td></tr>
</table>
<h2 id="buyList"></h2>
</body> 
아자아자 화이팅