- form 태그 접근
<form id ="joinForm" name="joinForm">
<input id="in1" type="text" name="in1">
</form>
<!-- 폼태그 접근 -->
<!-- 자바스크립트 코드 -->
let frm = document.joinForm;
let inputTag = frm.in1;
inputTag.value;document.폼태그의 이름으로 접근한다.
- location 객체
현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저의 새 문서를 불러올 때 사용할 수 있다. location 객체의 프로퍼티와 함수를 이용하면 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있다.
| 함수 | 의미 |
| location.href | 현재 페이지의 URL 정보가 담겨있는 프로퍼티 대입을 통해 새로운 문자열을 넣게 되면 이동이 일어난다. |
| location.reload() | 새로고침 |
| location.assign("URL 주소") | 현재 URL을 지정한 URL로 바꿔서 이동 |
| location.replace("URL 주소") | 현재 URL을 지정한 URL로 대체해서 바꾸고 이전으로 이동 불가 |
location 객체 이용해서 사이트 이동해보기!
<title>1_location1</title>
</head>
<body>
<form name="myForm">
<p>
<label>
네이버 <input type="radio" value="naver" name="site">
</label>
</p>
<p>
<label>
다음 <input type="radio" value="daum" name="site">
</label>
</p>
<p>
<label>
구글 <input type="radio" value="google" name="site">
</label>
</p>
<p>
<label>
네이트 <input type="radio" value="nate" name="site">
</label>
</p>
<p>
<input type ="button" onclick="sendit()" value="이동">
</p>
</form>
</body>
<script>
function sendit() {
let frm = document.myForm;
let inputTag = frm.site;
switch(inputTag.value) {
case "naver" :
location.href = "https://www.naver.com";
break;
case "daum" :
location.href ="https://www.daum.net";
break;
case "google" :
location.href = "https://www.google.com";
break;
}
case "nate" :
location.href = "https://www.nate.com";
break;
}
}
</script>
</html>
- history 객체
브라우저의 히스토리 정보를 문서 상태 목록으로 저장하는 객체
| 함수 | 의미 |
| history.go(n) | n만큼 페이지 이동 양수 : 앞으로 이동 음수 : 뒤로 이동 0 : 새로고침 |
| history.back() | 뒤로 가기 |
| history.forward() | 앞으로 가기 |
- DOM
문서 객체 모델 (DOM : Document Object Model)
XML이나 HTML 문서에 접근하기 위한 인터페이스, 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공한다.
- Document 객체
웹 페이지 그 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때에는 반드시 document 객체부터 시작한다.
| 함수 | 의미 |
| getElementById("아이디") | 해당 아이디를 가진 요소를 선택하여 객체로 가져오는 함수 |
| getElementsByTagName("태그명") | 해당 태그인 요소들을 선택하여 배열로 가져오는 함수 |
| getElementByClassName("클래스명") | 해당 클래스를 가진 요소들을 선택하여 배열로 가져오는 함수 |
| querySelectorAll("CSS 선택자") | 선택자에 해당하는 요소를 배열로 가져오는 함수 CSS 선택자는 .클래스명 등등 을 의미한다. |
- DOM 요소의 내용 변경
innerHTML 프로퍼티를 이용해서 간단한 요소의 내용을 변경할 수 있다.
DOM 객체를 이용해서 스타일 주기!
<title>3_DOM1</title>
</head>
<style>
#even{
color:blue;
}
</style>
<body>
<ul>
<li class="odd">첫 번째 아이템</li>
<li id="even">두 번째 아이템</li>
<li class="odd">세 번째 아이템</li>
<li id="even">네 번째 아이템</li>
<li class="odd">다섯 번째 아이템</li>
</ul>
</body>
<script>
//id태그는 자바스크립트로 스타일을 주면 하나만 적용된다.
let liTag = document.getElementById("even");
liTag.style.color="deepskyblue";
liTag.style.background="deeppink";
let oddItems = document.getElementsByClassName("odd");
console.log(oddItems.length);
for (let li of oddItems){
li.style.color = "red";
}
for (let i =0; i< oddItems.length; i++) {
oddItems[i].style.background = "#dddddd";
}
</script>
</html>
'WEB > Javascript' 카테고리의 다른 글
| DAY 20 : jQuery (0) | 2022.07.20 |
|---|---|
| DAY 18 : 객체, 상속 (0) | 2022.05.03 |
| DAY 17 : 함수 (0) | 2022.03.16 |
| DAY 16 : 연산자, 대화상자, 배열 , ... (0) | 2022.03.03 |
| DAY 15 : 자바 스크립트 (1) | 2022.03.02 |