script - histroy, document 객체

16785 단어 JavaScriptJavaScript

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>
2021.07.20 NAVER-2
[16] Exception과 Error

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage