앞서 자바스크립트를 처음 할 때 언급했지만, 자바스크립트는 하나의 큰 class 이다. 그렇기에 우리가 document.프로퍼티를 적용할 수 있는 이유는 document=new document 가 이미 실행되어 있기 때문이다. 여기서 알 수 있는 점은 document 라는 태그는 문서를 아우르는 최상위 태그라고 볼 수 있다.
document 객체가 사용하는 프로퍼티와 메소드는 다음과 같다
- 프로퍼티
| location | url 정보를 가진 파일의 레퍼런스 정보 |
| domain | 도메인 이름 |
| referrer | HTML을 로드한 원래 문서의 url 문자열 |
| cookie | 쿠키 |
| lastModified | 문서의 최근 수정 시간 |
| readyState | 문서의 현재 로딩상태를 나타냄 |
| title | 문서의 제목 |
| body | body객체 |
| head | head 객체 |
| defaultView | 문서가 출력된 브라우저 윈도우 |
| activeElement | 문서가 포커스를 받을 때 문서 내 포커스를 받는 자식 객체 |
| documentElement | html 객체 |
| url | 현재 문서의 url |
-메소드
| getElementByTagname | 주어진 태그를 가진 모든 태그를 리턴 |
| getElementByClassName | 주어진 class 속성 값을 가진 모든 태그를 리턴 |
| getElementByName | 주어진 name 속성 값을 가진 모든 태그를 리턴 |
| getElementById | 주어진 id 속성값을 가진 모든 태그를 리턴 |
| addEventListener | document에 이벤트 리스너 등록 |
| close | 모든 컨텐츠를 브러우저에 출력하고, 더이상 쓰기를 안받음. |
| createElement | HTML의 동적 생성 |
| open | 모든 컨텐처를 지우고, 새 컨텐츠를 쓸 수 있게 열기 |
| removeEventListener | 등록된 이벤트 리스너 제거 |
| write | HTML 컨텐츠 삽입 |
| writeln | 한 칸 띄우고 출력 |
-ID로 객체 찾기
<script>
var text="문서 로딩 중일때 readyState = "+document.readyState+"\n";
</script>
</head>
<body onload="printProperties()" style="background-color: yellow; color: blue; direction: rtl;">
<a href="http://www.naver.com">네이버</a>
<div>이 곳은 div 영역입니다.</div>
<input id="input" value="여기 포커스가 있습니다.">
<script>
function printProperties(){
document.getElementById("input").focus();
text+="1.location = "+document.location+"\n";
text+="2.URL = "+document.URL+"\n";
text+="3.title = "+document.title+"\n";
text+="4.head = "+document.head.id+"\n";
text+="5.body.color = "+document.body.style.color+"\n";
text+="6.domain = "+document.domain+"\n";
text+="7.lastModified = "+document.lastModified+"\n";
text+="8.defaultView = "+document.defaultView+"\n";
text+="9.문서의 로드 완료 후 readyState = "+document.readyState+"\n";
text+="10. documentElement의 태그이름 = "+document.documentElement.tagName+"\n";
alert(text);
}
</script>
-태그 이름으로 객체 찾기
동일한 HTML 태그가 있으면 그 태그의 컬렉션으로 리턴한다.
<script>
function change(){
//태그는 여러개이기 때문에 배열로 리턴
var spanArr=document.getElementsByTagName("span");
for(i=0;i<spanArr.length;i++){
var span=spanArr[i];
span.style.color="orchid";
span.style.fontSize="30px";
}
}
</script>
</head>
<body>
<h3>내가 좋아하는 과일</h3><hr>
<button onclick="change()">클릭</button>
저는 빨간 <span>사과</span>를 좋아해서아침마다 한 개씩 먹고 있어요. 운동할 때는 중간 중간에<span>바나나</span>를 먹지요. 탄수화물 섭취가 빨라힘이 납니다. 또한 달콤한 향기를 품은 <span>체리</span>와여름 냄새 물씬 나는 <span>자두</span>를 좋아합니다.
</body>
다음과 같이 span 태그로 묶인 컨텐츠만 변하는 것을 확인할 수 있다.
- document.write 사용 시 주의할 점
document 객체는 파일이 전부 로드 되고 나면 브라우저의 내용을 지우기 때문에, 로드 된 후 document.write를 사용하면 이전의 내용이 삭제되고 새로 쓰이기 때문에 로드 후 사용하지 않도록 주의한다.
잘못 쓴 예시
<body onclick="document.write('<h3>클릭되었습니다.</h3>')">
아무때나 클릭하세요.
</body>
-document의 열기와 닫기
document.open() 메소드를 이용하여 내부의 HTML 소스를 모두 지우고 새 HTML 텍스트를 작성받을 준비를 할 수 있다. 또 document.close() 메소드를 이용해서 닫고 출력한다.
<script>
var win=null;
function showHTML(){
if(win==null||win.close){
win=window.open("","outWin","width=250,height=150");
}
ta=document.getElementById("srcText");
win.document.open();
win.document.write(ta.value);
win.document.close();
}
</script>
</head>
<body>
<h3>HTML 문서 작성기 만들기</h3>
<textarea id="srcText" rows="10" cols="40"></textarea><br>
<button onclick="showHTML()">HTML 문서 작성</button>
</body>
반응형
'HTML+CSS+Javascript > Javascript' 카테고리의 다른 글
| Javascript] 강력한 캔버스 라이브러리, fabric (0) | 2021.04.08 |
|---|---|
| 12. HTML 문서의 동적 구성 (0) | 2020.03.13 |
| 10. DOM 객체 다루기 (0) | 2020.03.12 |
| 9. HTML DOM 개요 (0) | 2020.03.12 |
| 8. 배열 (0) | 2020.03.11 |
