JS-DOM-Targeting-Methods.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS DOM Targeting Methods</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;
      }

      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;
      }
    </style>
  </head>
  <body>
    <hr />
    <h3>JS DOM Targeting Methods</h3>

    <p>
      Most often, you want to manipulate HTML elements. To manipulate element
      you have to find the elements first.<br />
      Javascript provides us with various methods to find an element within the
      document.
    </p>

    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>Methods</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>document.getElementById()</td>
          <td>
            Select the unique element with given id. In case there are 2 same ID
            then it selects the first element.
          </td>
        </tr>
        <tr>
          <td>document.getElementsByClassName()</td>
          <td>Select collection elements with given classname</td>
        </tr>
        <tr>
          <td>document.getElementsByTagName()</td>
          <td>Select collection elements with given tagname</td>
        </tr>
      </tbody>
    </table>

    <hr />
    <h3>DOM getElementsById() Method</h3>

    <p>
      The&nbsp;<strong>getElementById()</strong>&nbsp;method returns the
      elements that have given an ID which is passed to the function. This
      function is a widely used&nbsp;HTML DOM&nbsp;method in web designing to
      change the value of any particular element or get a particular element. If
      the passed ID to the function does not exist then it returns null. The
      element is required to have a unique&nbsp;<em>id</em>, in order to get
      access to that specific element quickly, &amp; also that
      particular&nbsp;<em>id</em>&nbsp;should only be used once in the entire
      document.
    </p>

    <p><strong>Syntax:</strong></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> element_ID <span class="token punctuation">)</span>
</code></pre>

    <p>
      <strong>Parameter:</strong>&nbsp;This function accepts single
      parameter&nbsp;<em>element_ID</em>&nbsp;which is used to hold the ID of
      the element.
    </p>

    <p>
      <strong>Return Value:</strong>&nbsp;It returns the object of the given ID.
      If no element exists with the given ID then it returns null.
    </p>

    <hr />
    <h3>DOM getElementsByClassName() Method</h3>

    <p>
      The&nbsp;<strong>getElementsByClassName()</strong>&nbsp;method in
      Javascript returns an object containing all the elements with the
      specified class names in the document as objects. Each element in the
      returned object can be accessed by its index. The index value will start
      with 0. This method can be called upon by any individual element to search
      for its descendant elements with the specified class names.
    </p>

    <p><strong>Syntax:</strong></p>

    <pre
      class="language-javascript"
      tabindex="0"
    ><code class="language-javascript">document<span class="token punctuation">.</span><span class="token function">getElementsByClassName</span><span class="token punctuation">(</span>classnames<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>

    <p>
      <strong>Parameters:</strong>&nbsp;This is a required method that takes
      only one parameter, which is a string containing space-separated class
      names of the elements that are to be searched for. For searching with
      multiple class names, it must be separated with space.
    </p>

    <hr />
    <h3>DOM getElementsByTagName() Method</h3>

    <p>
      The HTML<strong>&nbsp;DOM getElementsByTagName()&nbsp;</strong>method in
      HTML returns the collection of all the elements in the document with the
      given tag name. To extract any info just iterate through all the elements
      using the length property.&nbsp;
    </p>

    <p>
      <strong>Syntax:</strong><br />
      &nbsp;
    </p>

    <pre
      class="language-javascript"
      tabindex="0"
    ><code class="language-javascript"><span class="token keyword">var</span> elements <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>

    <hr />
    <pre>var elements = document.getElementsByTagName(name);</pre>

    <p><strong>Parameters:</strong></p>

    <ul>
      <li>
        <strong>elements</strong>&nbsp;is a collection of all the found elements
        in the order they appear with the given tag name.
      </li>
      <li>
        <strong>name</strong>&nbsp;is a string representing the name of the
        elements. The special string “*” represents all elements.
      </li>
    </ul>
    <hr />

    <h3>html file</h3>

    <pre
      class="language-markup"
      tabindex="0"
    ><code class="language-markup"><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>Basic Layout<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>css/main.css<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>js/dom-main.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wrapper<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>header<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
			   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">&gt;</span></span>Yahoo Baba<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>About Us<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Gallery<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Contact Us<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>Sub Heading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>images/flower.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>200px<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content-image<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, veniam eius architecto ullam cupiditate quam aspernatur quis facilis tempora vel! Aspernatur, consequatur, laborum, explicabo consequuntur minima beatae perferendis impedit accusantium ex animi odit quisquam sint pariatur minus amet ullam reprehenderit rerum inventore sed officiis voluptas? Dolore, perferendis, minus eum debitis vero ipsam tempora voluptate nam ut autem itaque provident consequatur nobis quia libero! Magni, molestiae, laborum architecto natus inventore facere quis pariatur quia quos quasi quo dicta dolores. Deleniti, facere, fugit sed minus ducimus ut modi voluptatum eaque praesentium saepe aperiam nam quidem laboriosam assumenda voluptate vitae inventore et quibusdam!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
				   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Lorem ipsum dolor sit amet. <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
				   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Modi nihil in animi necessitatibus.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
				   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Consectetur adipisicing elit.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
				   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Lorem ipsum dolor sit amet.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
				   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span>Modi nihil in animi dolore natus.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>list<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, quam.<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sidebar<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Home<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>About Us<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Gallery<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
					<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Contact Us<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
				<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
				yahoobaba@copyright 2018.
			<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
		<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre>
    <hr />

    <h3>main.css</h3>

    <pre
      class="language-css"
      tabindex="0"
    ><code class="language-css"><span class="token atrule"><span class="token rule">@import</span> <span class="token string">"color.css"</span><span class="token punctuation">;</span></span>

<span class="token selector">*</span><span class="token punctuation">{</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">body</span><span class="token punctuation">{</span>
  <span class="token property">font</span><span class="token punctuation">:</span> 18px/24px arial<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#wrapper</span><span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span>1px solid black<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">#top-bar</span><span class="token punctuation">{</span>
  <span class="token property">background</span><span class="token punctuation">:</span> MEDIUMPURPLE<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#top-bar ul</span><span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#top-bar ul li</span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#top-bar a</span><span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#top-bar a:hover</span><span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> crimson<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#header</span><span class="token punctuation">{</span>
  <span class="token property">min-height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> arial<span class="token punctuation">;</span>
  <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">#header h1</span><span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span>30px 0 0 20px<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#menu</span><span class="token punctuation">{</span>
      <span class="token property">border-bottom</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#menu ul</span><span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#menu li</span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span>inline-block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#menu li a</span><span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span>block<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 10px 13px<span class="token punctuation">;</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>

<span class="token punctuation">}</span>
<span class="token selector">#menu li a:hover</span><span class="token punctuation">{</span>

<span class="token punctuation">}</span>
<span class="token selector">#content</span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span>795px<span class="token punctuation">;</span>
  <span class="token property">min-height</span><span class="token punctuation">:</span>500px<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
  <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span>
  <span class="token property">box-sizing</span><span class="token punctuation">:</span>border-box<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#content h2</span><span class="token punctuation">{</span>
  <span class="token property">font-family</span><span class="token punctuation">:</span> arial<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.content-image</span><span class="token punctuation">{</span>
  <span class="token property">float</span><span class="token punctuation">:</span>left<span class="token punctuation">;</span><span class="token property">margin</span><span class="token punctuation">:</span>0 15px 10px 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#sidebar</span><span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span>200px<span class="token punctuation">;</span>
  <span class="token property">min-height</span><span class="token punctuation">:</span>500px<span class="token punctuation">;</span>
  <span class="token property">float</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span>
  <span class="token property">border-left</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#sidebar a</span><span class="token punctuation">{</span>
  <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span>black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">#footer</span><span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 5px 10px<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span>right<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span>
  <span class="token property">border-top</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@import</span> <span class="token string">"mediatest.css"</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>1020px<span class="token punctuation">)</span><span class="token punctuation">;</span></span>

<span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>810px<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
  <span class="token selector">#wrapper</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span>500px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">#content</span><span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span>65%<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">#sidebar</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span>34%
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span>510px<span class="token punctuation">)</span></span><span class="token punctuation">{</span>
  <span class="token selector">#wrapper</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span>auto<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">#content</span><span class="token punctuation">{</span>
      <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
    <span class="token property">float</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">#sidebar</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span>100%<span class="token punctuation">;</span>
    <span class="token property">float</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token selector">#header h1</span><span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span>30px 0 0 0<span class="token punctuation">;</span>
  <span class="token property">text-align</span><span class="token punctuation">:</span>center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
    <hr />

    <h3>dom-main.js</h3>

    <pre
      class="language-javascript"
      tabindex="0"
    ><code class="language-javascript"><span class="token keyword">var</span> element<span class="token punctuation">;</span>

<span class="token comment">//element = document.all;</span>

<span class="token comment">//element = document.head;</span>

<span class="token comment">//element = document.title;</span>

<span class="token comment">//element = document.body;</span>

<span class="token comment">//element = document.links;</span>

<span class="token comment">//element = document.links[0];</span>

<span class="token comment">//element = document.images;</span>

<span class="token comment">//element = document.forms;</span>

<span class="token comment">//element = document.doctype;</span>

<span class="token comment">//element = document.URL;</span>

<span class="token comment">//element = document.domain;</span>

<span class="token comment">//element = document.baseURI;</span>

<span class="token comment">//element = document.getElementById("header");</span>

<span class="token comment">//element = document.getElementsByClassName("list");</span>

<span class="token comment">//element = document.getElementsByClassName("list")[0]</span>

<span class="token comment">//element = document.getElementsByTagName("ul");</span>

element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"ul"</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>element<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre>

    <hr />
  </body>
  <script></script>
</html>