JS-has.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS has</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>JS hasAttribute(</h3>

    <p>
      The&nbsp;<code>hasAttribute()</code>&nbsp;method
      returns&nbsp;<code>true</code>&nbsp;if the attribute exists,
      otherwise&nbsp;<code>false</code>.
    </p>

    <h3>Syntax</h3>

    <pre
      class="language-javascript"
      tabindex="0"
    ><code class="language-javascript">element<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span>
</code></pre>

    <h3>Parameters</h3>

    <table class="table table-bordered table-striped">
      <tbody>
        <tr></tr>
        <tr>
          <td>Parameter</td>
          <td>Description</td>
        </tr>
        <tr>
          <td><em>name</em></td>
          <td>
            Required.<br />
            The name of the attribute.
          </td>
        </tr>
      </tbody>
    </table>

    <h3>Return Value</h3>

    <table class="table table-bordered table-striped">
      <tbody>
        <tr></tr>
        <tr>
          <td>Type</td>
          <td>Description</td>
        </tr>
        <tr>
          <td>Boolean</td>
          <td>
            <code>true</code>&nbsp;if the element has the attribute,
            otherwise&nbsp;<code>false</code>.
          </td>
        </tr>
      </tbody>
    </table>

    <hr />
    <h3>hasChildNodes(</h3>

    <p>
      The&nbsp;<code>hasChildNodes()</code>&nbsp;method returns true if the
      specified node has any child nodes, otherwise false.
    </p>

    <p>The&nbsp;<code>hasChildNodes()</code>&nbsp;method is read-only.</p>

    <h3>Syntax</h3>

    <pre
      class="language-javascript"
      tabindex="0"
    ><code class="language-javascript">element<span class="token punctuation">.</span><span class="token function">hasChildNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre>
    &nbsp;

    <h3>Parameters</h3>

    <table class="table table-striped table-bordered">
      <tbody>
        <tr>
          <td>NONE</td>
        </tr>
      </tbody>
    </table>

    <h3>Return Value</h3>

    <table class="table table-striped table-bordered">
      <tbody>
        <tr></tr>
        <tr>
          <td>Type</td>
          <td>Description</td>
        </tr>
        <tr>
          <td>Boolean</td>
          <td>
            <code>true</code>&nbsp;if the element has child nodes,
            otherwise&nbsp;<code>false</code>.
          </td>
        </tr>
      </tbody>
    </table>

    <h2>html file</h2>

    <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>DOM Navigation<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>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
        <span class="token selector">h2</span><span class="token punctuation">{</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0 0 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span>
        <span class="token selector">#test</span><span class="token punctuation">{</span>
            <span class="token property">background</span><span class="token punctuation">:</span> #ffff00<span class="token punctuation">;</span>
            <span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span>
            <span class="token property">min-height</span><span class="token punctuation">:</span> 250px<span class="token punctuation">;</span>
            <span class="token property">padding</span><span class="token punctuation">:</span> 10px 10px<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></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</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>test<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>abc<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>Yahoo Baba : JavaScript hasAttribute Method<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>p</span><span class="token punctuation">&gt;</span></span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo corporis adipisci alias cupiditate officiis consequatur, fuga, amet quos numquam perferendis saepe labore dolorem reiciendis reprehenderit facilis repudiandae praesentium quis delectus voluptates, repellendus recusandae. Itaque consequuntur, corrupti quasi illum iusto perferendis autem blanditiis magni eum, repellendus architecto ratione ipsum molestiae laboriosam.
        <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>h2</span><span class="token punctuation">&gt;</span></span>Yahoo Baba : JavaScript hasChildNodes Method<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>div</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-create.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>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>

    <h2>
      <br />
      dom-create.js
    </h2>

    <pre
      class="language-javascript"
      tabindex="0"
    ><code class="language-javascript"><span class="token comment">/* JavaScript hasAttribute*/</span>

<span class="token keyword">var</span> target  <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"test"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> find <span class="token operator">=</span> target<span class="token punctuation">.</span><span class="token function">hasAttribute</span><span class="token punctuation">(</span><span class="token string">"class"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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


<span class="token comment">/* JavaScript hasChildNodes*/</span>

<span class="token keyword">var</span> target  <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"test"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> find <span class="token operator">=</span> target<span class="token punctuation">.</span><span class="token function">hasChildNodes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

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