JS-BOM-Introduction.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS BOM Introduction</title>
    <style>
      * {
        font-family: Arial, Helvetica, sans-serif;
      }

      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 50%;
      }

      td,
      th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
      }

      tr:nth-child(even) {
        background-color: #dddddd;
      }
      .xyz {
        background-color: green;
        color: red;
      }

      code[class*="language-"],
      pre[class*="language-"] {
        color: black;
        background: none;
        background-color: rgba(0, 0, 0, 0);
        font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
        font-size: 1em;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        line-height: 1.5;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
      }

      :not(pre) > code[class*="language-"]::after,
      pre[class*="language-"]::after {
        right: 0.75em;

        left: auto;

        -webkit-transform: rotate(2deg);

        -moz-transform: rotate(2deg);

        -ms-transform: rotate(2deg);

        -o-transform: rotate(2deg);

        transform: rotate(2deg);
      }
      pre[class*="language-"]::before,
      pre[class*="language-"]::after {
        content: "";

        z-index: -2;

        display: block;

        position: absolute;

        bottom: 0.75em;

        left: 0.18em;

        width: 40%;

        height: 20%;

        max-height: 13em;

        -webkit-transform: rotate(-2deg);

        -moz-transform: rotate(-2deg);

        -ms-transform: rotate(-2deg);

        -o-transform: rotate(-2deg);

        transform: rotate(-2deg);
      }

      :not(pre) > code[class*="language-"],
      pre[class*="language-"] {
        background-color: #fdfdfd;

        -webkit-box-sizing: border-box;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

        margin-bottom: 1em;
      }
      pre[class*="language-"] {
        position: relative;

        margin: 0.5em 0;

        margin-bottom: 0.5em;

        overflow: visible;

        padding: 0;
      }
      code[class*="language-"],
      pre[class*="language-"] {
        color: black;

        background: none;

        background-color: rgba(0, 0, 0, 0);

        font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

        font-size: 1em;

        text-align: left;

        white-space: pre;

        word-spacing: normal;

        word-break: normal;

        word-wrap: normal;

        line-height: 1.5;

        -moz-tab-size: 4;

        -o-tab-size: 4;

        tab-size: 4;

        -webkit-hyphens: none;

        -moz-hyphens: none;

        -ms-hyphens: none;

        hyphens: none;
      }
      pre {
        display: block;

        font-size: 87.5%;

        color: #212529;
      }
      pre {
        margin-top: 0;

        margin-bottom: 1rem;

        overflow: auto;

        -ms-overflow-style: scrollbar;
      }
      code,
      kbd,
      pre,
      samp {
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
          "Courier New", monospace;

        font-size: 1em;
      }

      pre[class*="language-"] > code {
        position: relative;
        border-left: 10px solid #358ccb;
        box-shadow: -1px 0px 0px 0px #358ccb, 0px 0px 0px 1px #dfdfdf;
        background-color: #fdfdfd;
        background-image: linear-gradient(
          transparent 50%,
          rgba(69, 142, 209, 0.04) 50%
        );
        background-size: 3em 3em;
        background-origin: content-box;
        background-attachment: local;
      }

      code[class*="language"] {
        max-height: inherit;
        height: inherit;
        padding: 0 1em;
        display: block;
        overflow: auto;
      }

      code[class*="language-"],
      pre[class*="language-"] {
        color: black;
        background: none;
        background-color: rgba(0, 0, 0, 0);
        background-attachment: scroll;
        background-image: none;
        background-size: auto;
        background-origin: padding-box;
        font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
        font-size: 1em;
        text-align: left;
        white-space: pre;
        word-spacing: normal;
        word-break: normal;
        word-wrap: normal;
        line-height: 1.5;
        -moz-tab-size: 4;
        -o-tab-size: 4;
        tab-size: 4;
        -webkit-hyphens: none;
        -moz-hyphens: none;
        -ms-hyphens: none;
        hyphens: none;
      }

      pre code {
        font-size: inherit;
        color: inherit;
        word-break: normal;
      }

      code {
        font-size: 87.5%;
        color: #e83e8c;
        word-wrap: break-word;
      }
      code,
      kbd,
      pre,
      samp {
        font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
          "Courier New", monospace;
        font-size: 1em;
      }
      *,
      ::after,
      ::before {
        box-sizing: border-box;
      }
      @import "color.css";

      * {
        box-sizing: border-box;
      }
      body {
        font: 18px/24px arial;
      }
      #wrapper {
        border: 1px solid black;
        width: 1000px;
        background: white;
        margin: 0 auto;
      }

      #top-bar {
        background: MEDIUMPURPLE;
      }
      #top-bar ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      #top-bar ul li {
        display: inline-block;
        margin: 5px;
      }
      #top-bar a {
        color: #fff;
        font-size: 20px;
      }
      #top-bar a:hover {
        color: crimson;
      }
      #header {
        min-height: 100px;
        font-family: arial;
        border-bottom: 1px solid black;
      }

      #header h1 {
        padding: 30px 0 0 20px;
        margin: 0;
      }
      #menu {
        border-bottom: 1px solid black;
      }
      #menu ul {
        margin: 0;
        padding: 0;
      }
      #menu li {
        display: inline-block;
      }
      #menu li a {
        display: block;
        padding: 10px 13px;
        text-decoration: none;
      }
      #menu li a:hover {
      }
      #content {
        width: 795px;
        min-height: 500px;
        padding: 15px;
        float: left;
        box-sizing: border-box;
        position: relative;
      }
      #content h2 {
        font-family: arial;
      }
      .content-image {
        float: left;
        margin: 0 15px 10px 0;
      }
      #sidebar {
        width: 200px;
        min-height: 500px;
        float: right;
        border-left: 1px solid black;
      }
      #sidebar a {
        text-decoration: none;
        color: black;
      }
      #footer {
        padding: 5px 10px;
        text-align: right;
        font-size: 14px;
        clear: both;
        border-top: 1px solid black;
      }
      @import "mediatest.css" screen and (max-width: 1020px);

      @media screen and (max-width: 810px) {
        #wrapper {
          width: 500px;
        }
        #content {
          width: 65%;
        }
        #sidebar {
          width: 34%;
        }
      }
      @media screen and (max-width: 510px) {
        #wrapper {
          width: auto;
        }

        #content {
          width: 100%;
          float: none;
        }
        #sidebar {
          width: 100%;
          float: none;
        }
        #header h1 {
          padding: 30px 0 0 0;
          text-align: center;
        }
      }
    </style>
  </head>
  <body>
    <hr />
    <h3>Browser Object Model</h3>
    The Browser Object Model (BOM) is used to interact with the browser. The
    default object of browser is window means you can call all the functions of
    window by specifying window or directly. For example: window.alert("hello
    javatpoint"); is same as: alert("hello javatpoint"); You can use a lot of
    properties (other objects) defined underneath the window object like
    document, history, screen, navigator, location, innerHeight, innerWidth.

    <h3>
      <br />
      The Window Object
    </h3>

    <p>
      The&nbsp;<code>window</code>&nbsp;object is supported by all browsers. It
      represents the browser's window.
    </p>

    <p>
      All global JavaScript objects, functions, and variables automatically
      become members of the window object.
    </p>

    <p>Global variables are properties of the window object.</p>

    <p>Global functions are methods of the window object.</p>

    <p>
      Even the document object (of the HTML DOM) is a property of the window
      object:
    </p>

    <pre
      class="language-javascript"
      tabindex="0"
    ><code class="language-javascript">window<span class="token punctuation">.</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"header"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>

    <p>is the same as:</p>

    <pre
      class="language-javascript"
      tabindex="0"
    ><code class="language-javascript">document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"header"</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>
    <hr />
  </body>
</html>