Histroy 객체
메소드 - back(), go(), goForward()
back() : 브라우저에서 뒤로 버튼을 누른 효과를 냄
go() : 매개변수로 전달된 숫자만큼 히스토리에 적용된 페이지로 이동
goForward() : 브라우저에서 앞으로 버튼을 누른 효과를 냄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hisyory</title>
<script>
'use strict'
let goBack = function() {
history.back();
}
let go = function(){
history.back(-2);
}
const goForward = function(){
history.forward();
}
const goReload = function(){
history.go(0);
}
</script>
</head>
<body>
<h2>history</h2>
<button onclick="goBack()">뒤로</button>
<button onclick="go()">뒤로2페이지</button>
<button onclick="goForward()">앞으로</button>
<button onclick="goReload()">새로고침</button>
</body>
</html>
Document 객체
document 객체는 javascript 공부를 하면서 많이 사용을 하고 중요하다고 생각을 한다.
메소드 : getElementByTagName(), getElementById(), getElementsByClassName(), getElementsByName(), querySelectorAll()
getElementsByTagName() : 해당 태그 이름의 요소를 모두 선택
getElementById() : 해당 아이디의 요소를 선택
getElementsByClassName() : 해당 클래스에 속한 요소를 모두 선택
getElementsByName() : 해당 name 속성값을 가지는 요소를 모두 선택
querySelectorAll() : 해당 선택자로 선택되는 요소를 모두 선택
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document 객체</title>
<script>
'use strict';
window.onload = function(){
const gnb = document.getElementById('gnb');
console.log(gnb);
console.log(gnb.parentNode);
console.log(gnb.children[0]);
consoel.log(gnb.children[0].nextElementSibling);
consoel.log(gnb.children[0].children[1]);
}
</script>
</head>
<body>
<h2>document 객체</h2>
<div>
<nav id="gnb">
<ul>
<li class="first">내용 1</li>
<li>내용 2</li>
<li>내용 3</li>
</ul>
</nav>
</div>
</body>
</html>
새싹 개발자><