zepto-vs-jquery-vs-raw-vs-quojs_class-selectors

JavaScript performance comparison

Revision 12 of this test case created by Michael Klaus

Info

With jQuery 2.0.0b1, latest stable zepto, latest stable quojs and Robert Nyman implementation for pure js case ( http://code.google.com/p/getelementsbyclassname/ )

Preparation code

<script src="//code.jquery.com/jquery-2.0.0b1.js">
</script>
<script src="//zeptojs.com/zepto.min.js">
</script>
<script src="https://raw.github.com/soyjavi/package-quojs/master/quo.js">
</script>
<div id="banner">
  <h1 id="title">
    <a href="http://www.w3.org/"><img alt="W3C" width="110" height="61" id="logo" src="./images/w3c.png"></a>
    <a href="./"><span>Markup Validation Service</span></a>
  </h1>
  <p id="tagline">
    Check the markup (HTML, XHTML, …) of Web documents
  </p>
</div>
<div id="frontforms">
  <ul id="tabset_tabs">
    <li class="selected">
      <a href="#validate_by_uri"><span>Validate by</span> URI</a>
    </li>
    <li class="">
      <a href="#validate_by_upload"><span>Validate by</span> File Upload</a>
    </li>
    <li class="">
      <a href="#validate_by_input"><span>Validate by</span> Direct Input</a>
    </li>
  </ul>
  <div id="fields">
    <fieldset id="validate-by-uri" class="tabset_content front" style="visibility: visible; zoom: 1; opacity: 1; display: block; ">
      <legend class="tabset_label">
        Validate by URI
      </legend>
      <form method="get" action="check">
        <p class="instructions">
          Validate a document online:
        </p>
        <p>
          <label title="Address of page to Validate" for="uri">
            Address:
          </label>
          <input type="text" name="uri" id="uri" size="45">
        </p>
        <fieldset id="extra_opt_uri" class="moreoptions">
          <legend class="toggletext">
            <a href="#validate_by_uri+with_options"><img id="toggleiconURI" class="toggleicon" src="./images/arrow-closed.png" alt="Show "> More Options</a>
          </legend>
          <div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: static; overflow-x: hidden; overflow-y: hidden; height: 0px; ">
            <div class="options" style="margin-right: 0px; margin-bottom: 0px; margin-left: 0px; margin-top: -192px; ">
              <table>
                <tbody>
                  <tr>
                    <th>
                      <label for="uri-charset">
                        Character Encoding
                      </label>
                    </th>
                    <td>
                      <select id="uri-charset" name="charset">
                        <option value="(detect automatically)" selected="selected">
                          (detect automatically)
                        </option>
                        <option value="utf-8">
                          utf-8 (Unicode, worldwide)
                        </option>
                        <option value="utf-16">
                          utf-16 (Unicode, worldwide)
                        </option>
                        <option value="iso-8859-1">
                          iso-8859-1 (Western Europe)
                        </option>
                        <option value="iso-8859-2">
                          iso-8859-2 (Central Europe)
                        </option>
                        <option value="iso-8859-3">
                          iso-8859-3 (Southern Europe)
                        </option>
                        <option value="iso-8859-4">
                          iso-8859-4 (North European)
                        </option>
                        <option value="iso-8859-5">
                          iso-8859-5 (Cyrillic)
                        </option>
                        <option value="iso-8859-6-i">
                          iso-8859-6-i (Arabic)
                        </option>
                        <option value="iso-8859-7">
                          iso-8859-7 (Greek)
                        </option>
                        <option value="iso-8859-8">
                          iso-8859-8 (Hebrew, visual)
                        </option>
                        <option value="iso-8859-8-i">
                          iso-8859-8-i (Hebrew, logical)
                        </option>
                        <option value="iso-8859-9">
                          iso-8859-9 (Turkish)
                        </option>
                        <option value="iso-8859-10">
                          iso-8859-10 (Latin 6)
                        </option>
                        <option value="iso-8859-11">
                          iso-8859-11 (Latin/Thai)
                        </option>
                        <option value="iso-8859-13">
                          iso-8859-13 (Latin 7, Baltic Rim)
                        </option>
                        <option value="iso-8859-14">
                          iso-8859-14 (Latin 8, Celtic)
                        </option>
                        <option value="iso-8859-15">
                          iso-8859-15 (Latin 9)
                        </option>
                        <option value="iso-8859-16">
                          iso-8859-16 (Latin 10)
                        </option>
                        <option value="us-ascii">
                          us-ascii (basic English)
                        </option>
                        <option value="euc-jp">
                          euc-jp (Japanese, Unix)
                        </option>
                        <option value="shift_jis">
                          shift_jis (Japanese, Win/Mac)
                        </option>
                        <option value="iso-2022-jp">
                          iso-2022-jp (Japanese, email)
                        </option>
                        <option value="euc-kr">
                          euc-kr (Korean)
                        </option>
                        <option value="ksc_5601">
                          ksc_5601 (Korean)
                        </option>
                        <option value="gb2312">
                          gb2312 (Chinese, simplified)
                        </option>
                        <option value="gb18030">
                          gb18030 (Chinese, simplified)
                        </option>
                        <option value="big5">
                          big5 (Chinese, traditional)
                        </option>
                        <option value="big5-HKSCS">
                          Big5-HKSCS (Chinese, Hong Kong)
                        </option>
                        <option value="tis-620">
                          tis-620 (Thai)
                        </option>
                        <option value="koi8-r">
                          koi8-r (Russian)
                        </option>
                        <option value="koi8-u">
                          koi8-u (Ukrainian)
                        </option>
                        <option value="iso-ir-111">
                          iso-ir-111 (Cyrillic KOI-8)
                        </option>
                        <option value="macintosh">
                          macintosh (MacRoman)
                        </option>
                        <option value="windows-1250">
                          windows-1250 (Central Europe)
                        </option>
                        <option value="windows-1251">
                          windows-1251 (Cyrillic)
                        </option>
                        <option value="windows-1252">
                          windows-1252 (Western Europe)
                        </option>
                        <option value="windows-1253">
                          windows-1253 (Greek)
                        </option>
                        <option value="windows-1254">
                          windows-1254 (Turkish)
                        </option>
                        <option value="windows-1255">
                          windows-1255 (Hebrew)
                        </option>
                        <option value="windows-1256">
                          windows-1256 (Arabic)
                        </option>
                        <option value="windows-1257">
                          windows-1257 (Baltic Rim)
                        </option>
                      </select>
                    </td>
                    <td>
                      <input id="uri-fbc" name="fbc" type="checkbox" value="1">
                      <label for="uri-fbc" title="Use selected Character encoding only if missing in the document">
                        Only if missing
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      <label for="uri-doctype">
                        Document Type
                      </label>
                    </th>
                    <td>
                      <select id="uri-doctype" name="doctype">
                        <option value="Inline" selected="selected">
                          (detect automatically)
                        </option>
                        <option value="HTML5">
                          HTML5 (experimental)
                        </option>
                        <option value="XHTML 1.0 Strict">
                          XHTML 1.0 Strict
                        </option>
                        <option value="XHTML 1.0 Transitional">
                          XHTML 1.0 Transitional
                        </option>
                        <option value="XHTML 1.0 Frameset">
                          XHTML 1.0 Frameset
                        </option>
                        <option value="HTML 4.01 Strict">
                          HTML 4.01 Strict
                        </option>
                        <option value="HTML 4.01 Transitional">
                          HTML 4.01 Transitional
                        </option>
                        <option value="HTML 4.01 Frameset">
                          HTML 4.01 Frameset
                        </option>
                        <option value="HTML 4.01 + RDFa 1.1">
                          HTML 4.01 + RDFa 1.1
                        </option>
                        <option value="HTML 3.2">
                          HTML 3.2
                        </option>
                        <option value="HTML 2.0">
                          HTML 2.0
                        </option>
                        <option value="ISO/IEC 15445:2000 (&quot;ISO HTML&quot;)">
                          ISO/IEC 15445:2000 ("ISO HTML")
                        </option>
                        <option value="XHTML 1.1">
                          XHTML 1.1
                        </option>
                        <option value="XHTML + RDFa">
                          XHTML + RDFa
                        </option>
                        <option value="XHTML Basic 1.0">
                          XHTML Basic 1.0
                        </option>
                        <option value="XHTML Basic 1.1">
                          XHTML Basic 1.1
                        </option>
                        <option value="XHTML Mobile Profile 1.2">
                          XHTML Mobile Profile 1.2
                        </option>
                        <option value="XHTML-Print 1.0">
                          XHTML-Print 1.0
                        </option>
                        <option value="XHTML 1.1 plus MathML 2.0">
                          XHTML 1.1 plus MathML 2.0
                        </option>
                        <option value="XHTML 1.1 plus MathML 2.0 plus SVG 1.1">
                          XHTML 1.1 plus MathML 2.0 plus SVG 1.1
                        </option>
                        <option value="MathML 2.0">
                          MathML 2.0
                        </option>
                        <option value="SVG 1.0">
                          SVG 1.0
                        </option>
                        <option value="SVG 1.1">
                          SVG 1.1
                        </option>
                        <option value="SVG 1.1 Tiny">
                          SVG 1.1 Tiny
                        </option>
                        <option value="SVG 1.1 Basic">
                          SVG 1.1 Basic
                        </option>
                        <option value="SMIL 1.0">
                          SMIL 1.0
                        </option>
                        <option value="SMIL 2.0">
                          SMIL 2.0
                        </option>
                      </select>
                    </td>
                    <td>
                      <label for="uri-fbd">
                        <input id="uri-fbd" name="fbd" type="checkbox" value="1" title="Use selected Document Type only if missing in the document">
                        Only if missing
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="3">
                      <input type="radio" name="group" id="urigroup_no" value="0" checked="checked">
                      <label for="urigroup_no">
                        List Messages Sequentially
                      </label>
                      <input type="radio" name="group" id="urigroup_yes" value="1">
                      <label for="urigroup_yes">
                        Group Error Messages by Type
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input id="uri-ss" name="ss" type="checkbox" value="1">
                      <label title="Show Page Source" for="uri-ss">
                        Show Source
                      </label>
                    </td>
                    <td colspan="2">
                      <input id="uri-st" name="st" type="checkbox" value="1">
                      <label for="uri-st">
                        Clean up Markup with HTML-Tidy
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input id="uri-outline" name="outline" type="checkbox" value="1">
                      <label title="Show an Outline of the document" for="uri-outline">
                        Show Outline
                      </label>
                    </td>
                    <td>
                      <input id="uri-No200" name="No200" type="checkbox" value="1">
                      <label title="Validate also pages for which the HTTP status code indicates an error"
                     for="uri-No200">
                        Validate error pages
                      </label>
                    </td>
                    <td>
                      <input id="uri-verbose" name="verbose" type="checkbox" value="1">
                      <label title="Verbose Output" for="uri-verbose">
                        Verbose Output
                      </label>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </fieldset>
        <p class="submit_button">
          <input type="submit" title="Submit for validation" value="Check" style="display: none; ">
          <a class="submit" href="#"><span>Check</span></a>
        </p>
      </form>
    </fieldset>
    <fieldset id="validate-by-upload" class="tabset_content front" style="display: none; ">
      <legend class="tabset_label">
        Validate by File Upload
      </legend>
      <form method="post" enctype="multipart/form-data" action="check">
        <p class="instructions targetedClass">
          Upload a document for validation:
        </p>
        <p>
          <label title="Choose a Local File to Upload and Validate" for="uploaded_file">
            File:
          </label>
          <input type="file" id="uploaded_file" name="uploaded_file" size="30">
        </p>
        <fieldset id="extra_opt_upload" class="moreoptions">
          <legend class="toggletext">
            <a href="#validate_by_upload+with_options"><img class="toggleicon" src="./images/arrow-closed.png" alt="Show "> More Options</a>
          </legend>
          <div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: static; overflow-x: hidden; overflow-y: hidden; ">
            <div class="options" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">
              <table>
                <tbody>
                  <tr>
                    <th>
                      <label for="upload-charset">
                        Character Encoding
                      </label>
                    </th>
                    <td>
                      <select id="upload-charset" name="charset">
                        <option value="(detect automatically)" selected="selected">
                          (detect automatically)
                        </option>
                        <option value="utf-8">
                          utf-8 (Unicode, worldwide)
                        </option>
                        <option value="utf-16">
                          utf-16 (Unicode, worldwide)
                        </option>
                        <option value="iso-8859-1">
                          iso-8859-1 (Western Europe)
                        </option>
                        <option value="iso-8859-2">
                          iso-8859-2 (Central Europe)
                        </option>
                        <option value="iso-8859-3">
                          iso-8859-3 (Southern Europe)
                        </option>
                        <option value="iso-8859-4">
                          iso-8859-4 (North European)
                        </option>
                        <option value="iso-8859-5">
                          iso-8859-5 (Cyrillic)
                        </option>
                        <option value="iso-8859-6-i">
                          iso-8859-6-i (Arabic)
                        </option>
                        <option value="iso-8859-7">
                          iso-8859-7 (Greek)
                        </option>
                        <option value="iso-8859-8">
                          iso-8859-8 (Hebrew, visual)
                        </option>
                        <option value="iso-8859-8-i">
                          iso-8859-8-i (Hebrew, logical)
                        </option>
                        <option value="iso-8859-9">
                          iso-8859-9 (Turkish)
                        </option>
                        <option value="iso-8859-10">
                          iso-8859-10 (Latin 6)
                        </option>
                        <option value="iso-8859-11">
                          iso-8859-11 (Latin/Thai)
                        </option>
                        <option value="iso-8859-13">
                          iso-8859-13 (Latin 7, Baltic Rim)
                        </option>
                        <option value="iso-8859-14">
                          iso-8859-14 (Latin 8, Celtic)
                        </option>
                        <option value="iso-8859-15">
                          iso-8859-15 (Latin 9)
                        </option>
                        <option value="iso-8859-16">
                          iso-8859-16 (Latin 10)
                        </option>
                        <option value="us-ascii">
                          us-ascii (basic English)
                        </option>
                        <option value="euc-jp">
                          euc-jp (Japanese, Unix)
                        </option>
                        <option value="shift_jis">
                          shift_jis (Japanese, Win/Mac)
                        </option>
                        <option value="iso-2022-jp">
                          iso-2022-jp (Japanese, email)
                        </option>
                        <option value="euc-kr">
                          euc-kr (Korean)
                        </option>
                        <option value="ksc_5601">
                          ksc_5601 (Korean)
                        </option>
                        <option value="gb2312">
                          gb2312 (Chinese, simplified)
                        </option>
                        <option value="gb18030">
                          gb18030 (Chinese, simplified)
                        </option>
                        <option value="big5">
                          big5 (Chinese, traditional)
                        </option>
                        <option value="big5-HKSCS">
                          Big5-HKSCS (Chinese, Hong Kong)
                        </option>
                        <option value="tis-620">
                          tis-620 (Thai)
                        </option>
                        <option value="koi8-r">
                          koi8-r (Russian)
                        </option>
                        <option value="koi8-u">
                          koi8-u (Ukrainian)
                        </option>
                        <option value="iso-ir-111">
                          iso-ir-111 (Cyrillic KOI-8)
                        </option>
                        <option value="macintosh">
                          macintosh (MacRoman)
                        </option>
                        <option value="windows-1250">
                          windows-1250 (Central Europe)
                        </option>
                        <option value="windows-1251">
                          windows-1251 (Cyrillic)
                        </option>
                        <option value="windows-1252">
                          windows-1252 (Western Europe)
                        </option>
                        <option value="windows-1253">
                          windows-1253 (Greek)
                        </option>
                        <option value="windows-1254">
                          windows-1254 (Turkish)
                        </option>
                        <option value="windows-1255">
                          windows-1255 (Hebrew)
                        </option>
                        <option value="windows-1256">
                          windows-1256 (Arabic)
                        </option>
                        <option value="windows-1257">
                          windows-1257 (Baltic Rim)
                        </option>
                      </select>
                    </td>
                    <td>
                      <input id="upload-fbc" name="fbc" type="checkbox" value="1">
                      <label for="upload-fbc" title="Use selected Character encoding only if missing in the document">
                        Only if missing
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <th>
                      <label for="upload-doctype">
                        Document Type
                      </label>
                    </th>
                    <td>
                      <select id="upload-doctype" name="doctype">
                        <option value="Inline" selected="selected">
                          (detect automatically)
                        </option>
                        <option value="HTML5">
                          HTML5 (experimental)
                        </option>
                        <option value="XHTML 1.0 Strict">
                          XHTML 1.0 Strict
                        </option>
                        <option value="XHTML 1.0 Transitional">
                          XHTML 1.0 Transitional
                        </option>
                        <option value="XHTML 1.0 Frameset">
                          XHTML 1.0 Frameset
                        </option>
                        <option value="HTML 4.01 Strict">
                          HTML 4.01 Strict
                        </option>
                        <option value="HTML 4.01 Transitional">
                          HTML 4.01 Transitional
                        </option>
                        <option value="HTML 4.01 Frameset">
                          HTML 4.01 Frameset
                        </option>
                        <option value="HTML 4.01 + RDFa 1.1">
                          HTML 4.01 + RDFa 1.1
                        </option>
                        <option value="HTML 3.2">
                          HTML 3.2
                        </option>
                        <option value="HTML 2.0">
                          HTML 2.0
                        </option>
                        <option value="ISO/IEC 15445:2000 (&quot;ISO HTML&quot;)">
                          ISO/IEC 15445:2000 ("ISO HTML")
                        </option>
                        <option value="XHTML 1.1">
                          XHTML 1.1
                        </option>
                        <option value="XHTML + RDFa">
                          XHTML + RDFa
                        </option>
                        <option value="XHTML Basic 1.0">
                          XHTML Basic 1.0
                        </option>
                        <option value="XHTML Basic 1.1">
                          XHTML Basic 1.1
                        </option>
                        <option value="XHTML Mobile Profile 1.2">
                          XHTML Mobile Profile 1.2
                        </option>
                        <option value="XHTML-Print 1.0">
                          XHTML-Print 1.0
                        </option>
                        <option value="XHTML 1.1 plus MathML 2.0">
                          XHTML 1.1 plus MathML 2.0
                        </option>
                        <option value="XHTML 1.1 plus MathML 2.0 plus SVG 1.1">
                          XHTML 1.1 plus MathML 2.0 plus SVG 1.1
                        </option>
                        <option value="MathML 2.0">
                          MathML 2.0
                        </option>
                        <option value="SVG 1.0">
                          SVG 1.0
                        </option>
                        <option value="SVG 1.1">
                          SVG 1.1
                        </option>
                        <option value="SVG 1.1 Tiny">
                          SVG 1.1 Tiny
                        </option>
                        <option value="SVG 1.1 Basic">
                          SVG 1.1 Basic
                        </option>
                        <option value="SMIL 1.0">
                          SMIL 1.0
                        </option>
                        <option value="SMIL 2.0">
                          SMIL 2.0
                        </option>
                      </select>
                    </td>
                    <td>
                      <label for="upload-fbd">
                        <input id="upload-fbd" name="fbd" type="checkbox" value="1" title="Use selected Document Type only if missing in the document">
                        Only if missing
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="3">
                      <input type="radio" name="group" id="uploadgroup_no" value="0" checked="checked">
                      <label for="uploadgroup_no">
                        List Messages Sequentially
                      </label>
                      <input type="radio" name="group" id="uploadgroup_yes" value="1">
                      <label for="uploadgroup_yes">
                        Group Error Messages by Type
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input id="upload-ss" name="ss" type="checkbox" value="1">
                      <label title="Show Page Source" for="upload-ss">
                        Show Source
                      </label>
                    </td>
                    <td colspan="2">
                      <input id="upload-st" name="st" type="checkbox" value="1">
                      <label for="upload-st">
                        Clean up Markup with HTML-Tidy
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input id="upload-outline" name="outline" type="checkbox" value="1">
                      <label title="Show an Outline of the document" for="upload-outline">
                        Show Outline
                      </label>
                    </td>
                    <td>
                      <input id="upload-No200" name="No200" type="checkbox" value="1">
                      <label title="Validate also pages for which the HTTP status code indicates an error"
                     for="upload-No200">
                        Validate error pages
                      </label>
                    </td>
                    <td>
                      <input id="upload-verbose" name="verbose" type="checkbox" value="1">
                      <label title="Verbose Output" for="upload-verbose">
                        Verbose Output
                      </label>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </fieldset>
        <!-- invisible -->
        <p class="submit_button">
          <input title="Submit for validation" type="submit" value="Check" style="display: none; ">
          <a class="submit" href="#"><span>Check</span></a>
        </p>
      </form>
      <p>
        <strong>
          Note
        </strong>
        : file upload may not work with Internet Explorer on some versions of Windows XP
        Service Pack 2, see our
        <a href="http://www.w3.org/QA/2005/01/Validator-IE_WinXP_SP2">information page</a>
        on the W3C QA Website.
      </p>
    </fieldset>
    <fieldset id="validate-by-input" class="tabset_content front" style="display: none; ">
      <legend class="tabset_label">
        Validate by direct input
      </legend>
      <form method="post" enctype="multipart/form-data" action="check">
        <p class="instructions">
          <label title="Paste a complete (HTML) Document here" for="fragment">
            Enter the Markup to validate
          </label>
          :
          <br>
          <textarea id="fragment" name="fragment" rows="12" cols="80">
          </textarea>
          <!-- <br />
         <label for="parsemodel">
           Treat as:
         </label>
         <select id="parsemodel" name="parsemodel">
           <option value="sgml">
             HTML
           </option>
           <option value="xml">
             XML (and XHTML)
           </option>
         </select>
         -->
        </p>
        <fieldset id="extra_opt_direct" class="moreoptions">
          <legend class="toggletext">
            <a href="#validate_by_input+with_options"><img class="toggleicon" src="./images/arrow-closed.png" alt="Show "> More Options</a>
          </legend>
          <div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; position: static; overflow-x: hidden; overflow-y: hidden; ">
            <div class="options" style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; ">
              <table>
                <tbody>
                  <tr>
                    <th colspan="3">
                      <input id="direct_prefill_no" name="prefill" type="radio" value="0" checked="checked">
                      <label for="direct_prefill_no">
                        Validate Full Document
                      </label>
                    </th>
                  </tr>
                  <tr class="subchoice" id="choice_full">
                    <th class="subchoice_head">
                      <label for="direct-doctype">
                        Use Doctype:
                      </label>
                    </th>
                    <td>
                      <select id="direct-doctype" name="doctype">
                        <option value="Inline" selected="selected">
                          (detect automatically)
                        </option>
                        <option value="HTML5">
                          HTML5 (experimental)
                        </option>
                        <option value="XHTML 1.0 Strict">
                          XHTML 1.0 Strict
                        </option>
                        <option value="XHTML 1.0 Transitional">
                          XHTML 1.0 Transitional
                        </option>
                        <option value="XHTML 1.0 Frameset">
                          XHTML 1.0 Frameset
                        </option>
                        <option value="HTML 4.01 Strict">
                          HTML 4.01 Strict
                        </option>
                        <option value="HTML 4.01 Transitional">
                          HTML 4.01 Transitional
                        </option>
                        <option value="HTML 4.01 Frameset">
                          HTML 4.01 Frameset
                        </option>
                        <option value="HTML 4.01 + RDFa 1.1">
                          HTML 4.01 + RDFa 1.1
                        </option>
                        <option value="HTML 3.2">
                          HTML 3.2
                        </option>
                        <option value="HTML 2.0">
                          HTML 2.0
                        </option>
                        <option value="ISO/IEC 15445:2000 (&quot;ISO HTML&quot;)">
                          ISO/IEC 15445:2000 ("ISO HTML")
                        </option>
                        <option value="XHTML 1.1">
                          XHTML 1.1
                        </option>
                        <option value="XHTML + RDFa">
                          XHTML + RDFa
                        </option>
                        <option value="XHTML Basic 1.0">
                          XHTML Basic 1.0
                        </option>
                        <option value="XHTML Basic 1.1">
                          XHTML Basic 1.1
                        </option>
                        <option value="XHTML Mobile Profile 1.2">
                          XHTML Mobile Profile 1.2
                        </option>
                        <option value="XHTML-Print 1.0">
                          XHTML-Print 1.0
                        </option>
                        <option value="XHTML 1.1 plus MathML 2.0">
                          XHTML 1.1 plus MathML 2.0
                        </option>
                        <option value="XHTML 1.1 plus MathML 2.0 plus SVG 1.1">
                          XHTML 1.1 plus MathML 2.0 plus SVG 1.1
                        </option>
                        <option value="MathML 2.0">
                          MathML 2.0
                        </option>
                        <option value="SVG 1.0">
                          SVG 1.0
                        </option>
                        <option value="SVG 1.1">
                          SVG 1.1
                        </option>
                        <option value="SVG 1.1 Tiny">
                          SVG 1.1 Tiny
                        </option>
                        <option value="SVG 1.1 Basic">
                          SVG 1.1 Basic
                        </option>
                        <option value="SMIL 1.0">
                          SMIL 1.0
                        </option>
                        <option value="SMIL 2.0">
                          SMIL 2.0
                        </option>
                      </select>
                    </td>
                    <td>
                      <input id="direct-fbd" name="fbd" type="checkbox" value="1">
                      <label for="direct-fbd">
                        Only if Doctype is missing
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <th colspan="3">
                      <input id="direct_prefill_yes" name="prefill" type="radio" value="1">
                      <label for="direct_prefill_yes">
                        Validate HTML fragment
                      </label>
                    </th>
                  </tr>
                  <tr class="subchoice" id="choice_frag">
                    <th class="subchoice_head">
                      Use Doctype:
                    </th>
                    <td colspan="2">
                      <input type="radio" name="prefill_doctype" id="directfill_doctype_html401" value="html401"
                     checked="checked">
                      <label for="directfill_doctype_html401">
                        HTML 4.01
                      </label>
                      <input type="radio" name="prefill_doctype" id="directfill_doctype_xhtml10" value="xhtml10">
                      <label for="directfill_doctype_xhtml10">
                        XHTML 1.0
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="3">
                      <input type="radio" name="group" id="directgroup_no" value="0" checked="checked">
                      <label for="directgroup_no">
                        List Messages Sequentially
                      </label>
                      <input type="radio" name="group" id="directgroup_yes" value="1">
                      <label for="directgroup_yes">
                        Group Error Messages by Type
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input id="direct-ss" name="ss" type="checkbox" value="1">
                      <label title="Show Page Source" for="direct-ss">
                        Show Source
                      </label>
                    </td>
                    <td colspan="2">
                      <input id="direct-st" name="st" type="checkbox" value="1">
                      <label for="direct-st">
                        Clean up Markup with HTML-Tidy
                      </label>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      <input id="direct-outline" name="outline" type="checkbox" value="1">
                      <label title="Show an Outline of the document" for="direct-outline">
                        Show Outline
                      </label>
                    </td>
                    <td>
                      <input id="direct-No200" name="No200" type="checkbox" value="1">
                      <label title="Validate also pages for which the HTTP status code indicates an error"
                     for="direct-No200">
                        Validate error pages
                      </label>
                    </td>
                    <td>
                      <input id="direct-verbose" name="verbose" type="checkbox" value="1">
                      <label title="Verbose Output" for="direct-verbose">
                        Verbose Output
                      </label>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </fieldset>
        <p class="submit_button">
          <input title="Submit for validation" type="submit" value="Check" style="display: none; ">
          <a class="submit" href="#"><span>Check</span></a>
        </p>
      </form>
    </fieldset>
  </div>
  <!-- fields -->
</div>
<!-- frontforms -->
<div class="intro">
  <p>
    This validator checks the
    <a href="docs/help.html#validation_basics" title="What is markup validation?">markup validity</a>
    of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific
    content such as
    <a href="http://validator.w3.org/feed/" title="Feed validator, hosted at W3C">RSS/Atom feeds</a>
    or
    <a href="http://jigsaw.w3.org/css-validator/" title="W3C CSS Validation Service">CSS stylesheets</a>
    ,
    <a href="http://validator.w3.org/mobile/" title="MobileOK Checker">MobileOK content</a>
    , or to
    <a href="http://validator.w3.org/checklink" title="W3C Link Checker">find broken links</a>
    , there are
    <a href="http://www.w3.org/QA/Tools/">other validators and tools</a>
    available. As an alternative you can also try our
    <a href="http://validator.w3.org/nu">non-DTD-based validator</a>
    .
  </p>
</div>
<div class="intro" id="don_program" style="min-height: 76px; ">
  <script type="text/javascript" async="" src="http://api.flattr.com/js/0.6/load.js?mode=auto">
  </script>
  <span id="don_program_img" lang="en" dir="ltr">
    <a href="http://www.mozilla.com"><img src="http://www.w3.org/QA/Tools/logos_sup/moz_logo.jpg" alt="Mozilla Foundation Logo"></a>
  </span>
  <span style="float:right;">
    <iframe src="http://api.flattr.com/button/view/?url=http%3A%2F%2Fvalidator.w3.org&amp;title=View%20W3C-Validator%20on%20flattr.com&amp;"
   class="FlattrButton" width="55" height="62" frameborder="0" scrolling="no" border="0"
   marginheight="0" marginwidth="0" allowtransparency="true">
    </iframe>
  </span>
  <span id="don_program_text" lang="en" dir="ltr" style="padding-top: 36px; padding-bottom: 36px; ">
    The W3C validators are developed with assistance from the Mozilla Foundation, and
    supported by community donations.
    <br>
    <a href="http://www.w3.org/QA/Tools/Donate">Donate</a>
    and help us build better tools for a better web.
  </span>
  <div style="clear:both">
  </div>
</div>
<script type="text/javascript" src="http://www.w3.org/QA/Tools/don_prog.js">
</script>
<ul class="navbar" id="menu">
  <li>
    <a href="./" accesskey="1" title="Go to the Home Page for The W3C Markup Validation Service">Home</a>
    <span>
      |
    </span>
  </li>
  <li>
    <a href="./about.html" title="Information About this Service">About...</a>
    <span>
      |
    </span>
  </li>
  <li>
    <a href="./whatsnew.html" title="The changes made to this service recently">News</a>
    <span>
      |
    </span>
  </li>
  <li>
    <a href="./docs/" accesskey="3" title="Documentation for this Service">Docs</a>
    <span>
      |
    </span>
  </li>
  <li>
    <a href="./docs/help.html" title="Help and answers to frequently asked questions">Help&nbsp;&amp;&nbsp;<acronym title="Frequently Asked Questions">FAQ</acronym></a>
    <span>
      |
    </span>
  </li>
  <li>
    <a href="./feedback.html" accesskey="4" title="How to provide feedback on this service">Feedback</a>
  </li>
  <li>
    <a href="./contribute.html" title="How to contribute to the validator project">Contribute</a>
  </li>
</ul>
<div id="footer">
  <p id="activity_logos">
    <a href="http://www.w3.org/Status" title="W3C's Open Source, bringing you free Web quality tools and more"><img src="http://www.w3.org/Icons/WWW/w3c_home_nb" alt="W3C" width="72" height="47"><img src="./images/opensource-55x48.png" alt="Open-Source" title="We are building certified Open Source/Free Software. - see www.opensource.org" width="55" height="48"></a>
  </p>
  <p id="support_logo">
    <a href="http://www.w3.org/QA/Tools/Donate">
    <img src="http://www.w3.org/QA/Tools/I_heart_validator" alt="I heart Validator logo" title=" Validators Donation Program" width="80" height="15">
    </a>
  </p>
  <p id="version_info">
    This service runs the W3C Markup Validator,
    <a href="./whatsnew.html#v13"><abbr title="version">v</abbr>1.3</a>
    .
  </p>
  <p class="copyright">
    <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
    © 1994-2012
    <a href="http://www.w3.org/"><acronym title="World Wide Web Consortium">W3C</acronym></a>
    ® (
    <a href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute of Technology">MIT</acronym></a>
    ,
    <a href="http://www.ercim.eu/"><acronym title="European Research Consortium for Informatics and Mathematics">ERCIM</acronym></a>
    ,
    <a href="http://www.keio.ac.jp/">Keio</a>
    ), All Rights Reserved. W3C
    <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>
    ,
    <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
    ,
    <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a>
    and
    <a rel="Copyright" href="http://www.w3.org/Consortium/Legal/copyright-software">software licensing</a>
    rules apply. Your interactions with this site are in accordance with our
    <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Public">public</a>
    and
    <a href="http://www.w3.org/Consortium/Legal/privacy-statement#Members">Member</a>
    privacy statements.
  </p>
</div>
<script>
Benchmark.prototype.setup = function() {
    var el, res;
    /*
        Developed by Robert Nyman, http://www.robertnyman.com
        Code/licensing: http://code.google.com/p/getelementsbyclassname/
    */
 
    var getElementsByClassName = function (className, tag, elm){
        if (document.getElementsByClassName) {
                getElementsByClassName = function (className, tag, elm) {
                        elm = elm || document;
                        var elements = elm.getElementsByClassName(className),
                                nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
                                returnElements = [],
                                current;
                        for(var i=0, il=elements.length; i<il; i+=1){
                                current = elements[i];
                                if(!nodeName || nodeName.test(current.nodeName)) {
                                        returnElements.push(current);
                                }
                        }
                        return returnElements;
                };
        }
        else if (document.evaluate) {
                getElementsByClassName = function (className, tag, elm) {
                        tag = tag || "*";
                        elm = elm || document;
                        var classes = className.split(" "),
                                classesToCheck = "",
                                xhtmlNamespace = "http://www.w3.org/1999/xhtml",
                                namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
                                returnElements = [],
                                elements,
                                node;
                        for(var j=0, jl=classes.length; j<jl; j+=1){
                                classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
                        }
                        try     {
                                elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
                        }
                        catch (e) {
                                elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
                        }
                        while ((node = elements.iterateNext())) {
                                returnElements.push(node);
                        }
                        return returnElements;
                };
        }
        else {
                getElementsByClassName = function (className, tag, elm) {
                        tag = tag || "*";
                        elm = elm || document;
                        var classes = className.split(" "),
                                classesToCheck = [],
                                elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
                                current,
                                returnElements = [],
                                match;
                        for(var k=0, kl=classes.length; k<kl; k+=1){
                                classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
                        }
                        for(var l=0, ll=elements.length; l<ll; l+=1){
                                current = elements[l];
                                match = false;
                                for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
                                        match = classesToCheck[m].test(current.className);
                                        if (!match) {
                                                break;
                                        }
                                }
                                if (match) {
                                        returnElements.push(current);
                                }
                        }
                        return returnElements;
                };
        }
        return getElementsByClassName(className, tag, elm);
    };
};
</script>

Preparation code output

Validate by URI

Validate a document online:

Show More Options

Check

This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets , MobileOK content , or to find broken links , there are other validators and tools available. As an alternative you can also try our non-DTD-based validator .

Mozilla Foundation Logo The W3C validators are developed with assistance from the Mozilla Foundation, and supported by community donations.
Donate and help us build better tools for a better web.

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
zepto class
el = Zepto('.targetedClass');
pending…
jquery class
el = jQuery('.targetedClass');
pending…
raw class
el = getElementsByClassName('targetedClass');
pending…
QuoJS class
el = $$('.targetedClass');
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment