DOM객체
- Document Object Model 또는 요소
- 내부적으로 new div("흥") 객체 생성
<div>흥</div>
<div>치</div>
<div>뿡</div><a> : 하이버링크
<a href="//daum.net">다음은 없당</a> <br>
<a href="//naver.com">이웃도 없당</a><button> : 버튼
<button onclick="fDaum('/\/\daum.net',this)">다음으로 가용</button>
<button onclick='fDaum("\/\/naver.com",this)'>이웃없어용</button>- 버튼을 클릭(onclick)하면 fDaum 이벤트 발생
fDaum(site,oThis)
function fDaum(site,oThis){
console.log("document.head.innerHTML : ",document.head.innerHTML); //<head>에서 연 태그와 닫은 태그 사이의 값
console.log("oThis.innerHTML : ",oThis.innerHTML); //연 태그와 닫은 태그 사이의 값의미
console.log("this가 뭐임?",oThis);
원본
더보기
이웃도 없당
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- DOM객체 : Document Object Model 또는 요소라고 불림-->
<!-- 내부적으로 new div("흥") 객체 생성 -->
<div>흥</div>
<div>치</div>
<div>뿡</div>
<a href="//daum.net">다음은 없당</a> <br>
<a href="//naver.com">이웃도 없당</a>
<!-- this 버튼 자체를 가르킴 -->
<button onclick="fDaum('/\/\daum.net',this)">다음으로 가용</button>
<button onclick='fDaum("\/\/naver.com",this)'>이웃없어용</button>
</body>
<script>
//refactoring
// function은 자바의 메소드에 해당
function fDaum(site,oThis){
console.log("document.head.innerHTML : ",document.head.innerHTML); //<head>에서 연 태그와 닫은 태그 사이의 값
console.log("oThis.innerHTML : ",oThis.innerHTML); //연 태그와 닫은 태그 사이의 값의미
console.log("this가 뭐임?",oThis);
// location.href = site;
// if(site == 'daum'){
// location.href = "//daum.net";
// }else{
// location.href = "//naver.com";
// }
// alert(site); //확인용
//location.href = "//ddit.or.kr";
}
/*
function fNaver(){
location.href = "//naver.com"; // /는 절대경로,홈디렉토리가 시작지점
}
*/
// 기억해야 함
// window(브라우져 탭)
//window.document(html 문서)
//window.location
// navigator 브라우져를 나타냄(별로 쓸일이 많지 않음)
//우리가 출력문을 가장 먼저 배우는 이유는
//디버깅에 사용하라는 의미
// console.log(window.document);
// console.log(document); //window를 생략한 것를 좋아함.
//head 하고 body는 문서에 오직 한번만 나와야하기 때문에
// 그냥 태그명으로 바로 접근 가능
// console.log(document.head);
// console.log(document.body);
// console.log(window.location);
// console.log(location.href); //location 객체에서 자주 쓰는 속성
</script>흥
치
뿡
다음은 없당 이웃도 없당
'JavaScript > 수업' 카테고리의 다른 글
| html2 (1) | 2024.02.06 |
|---|---|
| 시작.html (1) | 2024.02.06 |
