Benchmark: Find a comment 3

HTML Preparation code:

<div id="react-container" data-component-name="SPA"><div class="loading-bar"></div><ul id="nav-access"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-language" href="#language">Select language</a></li><li><a id="skip-search" href="#main-q">Skip to search</a></li></ul><header class="page-header"><a href="/en-US/" class="logo" aria-label="MDN Web Docs"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219 48" role="img"><path d="M49.752 30.824h59.917v17.132H49.75zm57.23 12.3c-.103.03-.21.048-.316.05-.338 0-.514-.15-.514-.582v-3.256c0-1.71-1.352-2.543-2.976-2.543a7.206 7.206 0 0 0-3.21.676l-.29 1.724 1.71.182.245-.842a2.338 2.338 0 0 1 1.147-.216c1.214 0 1.23.913 1.23 1.69v.234c-.407-.048-.818-.07-1.23-.068-1.71 0-3.49.433-3.49 2.276 0 1.563 1.23 2.144 2.31 2.144a2.7 2.7 0 0 0 2.41-1.494c.018.88.77 1.563 1.648 1.494a2.89 2.89 0 0 0 1.353-.338zm-4.604-.05a.787.787 0 0 1-.88-.867c0-.815.677-1.015 1.432-1.015.36.008.722.04 1.078.098-.05 1.235-.852 1.783-1.63 1.783zM97.388 33l-3.24 11.433h2.11L99.5 33.002zm-4.353 0l-3.24 11.433h2.11L95.145 33zm-6.89 6.645h2.243V36.94h-2.242zm0 4.802h2.243v-2.706h-2.242zm-3.617-1.64H80.1l4.156-4.736-.166-1.13h-6.58l-.268 2.63 1.546.164.338-1.163h2.343l-4.123 4.734.216 1.13h6.544l.467-2.63-1.69-.164zM72.143 36.79c-2.706 0-4.02 1.812-4.02 4.004 0 2.394 1.595 3.804 3.905 3.804 2.394 0 4.122-1.51 4.122-3.905-.003-2.093-1.32-3.906-4.01-3.906zm-.054 6.154c-1.165 0-1.763-.997-1.763-2.292 0-1.414.676-2.23 1.778-2.23 1.015 0 1.83.677 1.83 2.196 0 1.438-.73 2.327-1.846 2.327zm-5.906-3.564c0-1.78-1.224-2.594-2.577-2.594a2.51 2.51 0 0 0-2.44 1.612c-.367-1.1-1.364-1.613-2.443-1.613a2.48 2.48 0 0 0-2.276 1.278v-1.13h-3.14v1.63h.996v4.24h-.997v1.63h4.572v-1.63h-1.432V40.2c0-1.048.433-1.78 1.448-1.78.845 0 1.278.502 1.278 1.797v4.224h3.14v-1.63h-.996v-2.612c0-1.048.433-1.78 1.447-1.78.846 0 1.278.502 1.278 1.797v4.214h3.142V42.8h-.998zm78.791-22.39h-6.29c.23-1.935 1.16-3.558 3.274-3.558 2.245 0 3.2 1.857 3.016 3.558zM218.952 0v29.137h-169.2V0zM71.706 6.885h-3.85L61.51 20.01h-.104L54.882 6.884h-3.84v1.65h2.19V21.98H51.12v1.65h5.927v-1.65h-2.012V11.24h.1l5.75 11.553H61.9l5.62-11.474h.105v10.66h-1.962v1.65h5.942v-1.65h-2.09V8.536h2.19zm9.993 16.76c5.285 0 8.484-3.48 8.484-8.42 0-4.847-3.094-8.353-8.56-8.353H74.12v1.623h2.114v13.527H74.12v1.623zm27.05-16.76h-6.426v1.65h2.526v11.268h-.1L95.21 6.885H91.6v1.65h2.22V21.98h-1.935v1.65h6.385v-1.65h-2.655V10.444h.1l9.724 13.202h1.21V8.535h2.09zm26.71 5.29h-5.156v1.467h1.83l-1.857 7.247h-.128l-3.586-8.716h-1.21l-3.423 8.718h-.127l-2.14-7.247h1.933v-1.47h-5.41v1.467h1.522l3.25 10.003h1.352l3.432-8.766h.13l3.496 8.765h1.393l3.122-10.003h1.573zm6.704 11.727c2.837 0 4.514-1.583 4.83-3.568l-1.523-.338c-.36 1.42-1.365 2.347-3.17 2.347-2.283 0-3.53-1.468-3.636-4.02h8.058c.1-.445.153-.898.156-1.354-.024-2.71-1.728-5.03-4.873-5.03-3.246 0-5.26 2.58-5.26 6.14 0 3.712 2.162 5.825 5.412 5.825zm13.408 0c3.663 0 5.134-3.25 5.134-6.294 0-3.642-2.063-5.67-4.924-5.67-2.19 0-3.402 1.186-4.1 2.603V5.905h-3.53v1.47h1.692v12.923a22.8 22.8 0 0 1-.338 3.35h1.805a44.05 44.05 0 0 0 .235-1.906c.747 1.39 2.242 2.165 4.02 2.165zm26.198-1.728h-1.985V5.904h-4.6v1.47h2.798v6.653c-.748-1.342-2.15-2.09-3.842-2.09-3.74 0-5.183 3.2-5.183 6.267 0 3.584 1.958 5.698 4.924 5.698 2.087 0 3.352-1.224 4.1-2.577v2.323h3.784zm6.963 1.728c3.53 0 5.75-2.526 5.742-6.006 0-3.25-1.934-5.982-5.647-5.982s-5.67 2.735-5.67 6.087c0 3.457 2.09 5.905 5.568 5.905zm12.942 0c3.172 0 4.538-2.114 4.866-4.112l-1.548-.34c-.334 1.885-1.315 2.917-3.094 2.917-2.27 0-3.507-1.637-3.507-4.397 0-2.475.982-4.487 3.43-4.487a4.4 4.4 0 0 1 2.45.646l.42 1.936 1.496-.18-.44-2.758c-1.16-.876-2.397-1.187-3.92-1.187-3.556 0-5.362 2.966-5.362 6.14 0 3.685 2.036 5.825 5.208 5.825zm11.166 0c2.76 0 4.874-1.34 4.847-3.595 0-4.565-7.1-2.195-7.1-5.184 0-1.177 1.03-1.69 2.474-1.69.826-.015 1.64.18 2.368.567l.267 1.864 1.495-.18-.284-2.68a8.135 8.135 0 0 0-3.997-1.06c-2.088 0-4.255.903-4.255 3.328 0 4.46 7.193 2.063 7.193 5.208 0 1.315-1.495 1.934-3.095 1.934a5.812 5.812 0 0 1-2.553-.568l.078-1.522-1.444-.156-.362 2.604c.977.643 2.736 1.133 4.36 1.133zm-54.042-6.11c0 2.373-1.058 4.564-3.584 4.564a3.455 3.455 0 0 1-3.534-3.456v-1.728c.05-1.7 1.444-3.686 3.635-3.686 1.948 0 3.48 1.444 3.483 4.305zm19.18-1.06v1.833c-.076 1.73-1.57 3.79-3.634 3.79-1.985 0-3.48-1.47-3.48-4.28 0-2.425 1.133-4.59 3.686-4.59a3.36 3.36 0 0 1 3.43 3.248zm14.597 1.133c0 2.58-1.34 4.488-3.79 4.488-2.453 0-3.74-1.958-3.74-4.46 0-2.55 1.34-4.434 3.74-4.434 2.397 0 3.79 1.778 3.79 4.405zm-104.39-2.593c0 4.16-2.32 6.763-6.574 6.763h-3.478V8.508h3.466c4.254 0 6.574 2.71 6.587 6.764zM.116 0h47.956v47.956H.116zM42.01 22.02c-.036-.723-.12-1.448-.17-2.166a1.74 1.74 0 0 0-.395-.98 2.465 2.465 0 0 0-1.026-.74c-.808-.314-1.622-.664-2.435-.975a21.509 21.509 0 0 1-3.342-1.472 2.626 2.626 0 0 1-1.296-1.972 2.954 2.954 0 0 0-1.47-2.228 4.062 4.062 0 0 0-2.958-.35c-.734.176-1.5.165-2.23-.033l-1.112-.34-.302-.09-.873-.26c-1.57-.468-2.228-.713-4.773-.278a14.678 14.678 0 0 0-7.09 3.897l-6.37 6.76h5.72l-3.504 3.71h6.026l-3.503 3.71h4.844l-1.548 4.06c5.93 6.07 12.25 7.295 12.25 7.295 0-1.673.38-8.24.826-9.34a5.25 5.25 0 0 1 .762-1.54 4.211 4.211 0 0 1 3.393-1.547c1.303 0 2.597.238 3.815.702.74.31 1.577.264 2.277-.122a38.42 38.42 0 0 0 1.498-.94.839.839 0 0 1 .556-.18c.54.06 1.054-.237 1.27-.734.16-.33.35-.64.524-.97.472-.884.69-1.88.633-2.88z"></path></svg></a><nav class="main-nav" role="navigation"><ul><li class="top-level-entry-container"><button type="button" class="top-level-entry" aria-haspopup="true">Technologies<span class="main-menu-arrow" aria-hidden="true">▼</span></button><ul><li data-item="Technologies" role="menuitem"><a href="/en-US/docs/Web">Technologies Overview</a></li><li data-item="Technologies" role="menuitem"><a href="/en-US/docs/Web/HTML">HTML</a></li><li data-item="Technologies" role="menuitem"><a href="/en-US/docs/Web/CSS">CSS</a></li><li data-item="Technologies" role="menuitem"><a href="/en-US/docs/Web/JavaScript">JavaScript</a></li><li data-item="Technologies" role="menuitem"><a href="/en-US/docs/Web/Guide/Graphics">Graphics</a></li><li data-item="Technologies" role="menuitem"><a href="/en-US/docs/Web/HTTP">HTTP</a></li><li data-item="Technologies" role="menuitem"><a href="/en-US/docs/Web/API">APIs / DOM</a></li><li data-item="Technologies" role="menuitem"><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">Browser Extensions</a></li><li data-item="Technologies" role="menuitem"><a href="/en-US/docs/Web/MathML">MathML</a></li></ul></li><li class="top-level-entry-container"><button type="button" class="top-level-entry" aria-haspopup="true">References &amp; Guides<span class="main-menu-arrow" aria-hidden="true">▼</span></button><ul><li data-item="References &amp; Guides" role="menuitem"><a href="/en-US/docs/Learn">Learn web development</a></li><li data-item="References &amp; Guides" role="menuitem"><a href="/en-US/docs/Web/Tutorials">Tutorials</a></li><li data-item="References &amp; Guides" role="menuitem"><a href="/en-US/docs/Web/Reference">References</a></li><li data-item="References &amp; Guides" role="menuitem"><a href="/en-US/docs/Web/Guide">Developer Guides</a></li><li data-item="References &amp; Guides" role="menuitem"><a href="/en-US/docs/Web/Accessibility">Accessibility</a></li><li data-item="References &amp; Guides" role="menuitem"><a href="/en-US/docs/Games">Game development</a></li><li data-item="References &amp; Guides" role="menuitem"><a href="/en-US/docs/Web">...more docs</a></li></ul></li><li class="top-level-entry-container"><button type="button" class="top-level-entry" aria-haspopup="true">Feedback<span class="main-menu-arrow" aria-hidden="true">▼</span></button><ul><li data-item="Feedback" role="menuitem"><a href="/en-US/docs/MDN/Feedback">Send Feedback</a></li><li data-item="Feedback" role="menuitem"><a target="_blank" rel="noopener noreferrer" href="https://support.mozilla.org/">Get Firefox help<!-- --> 🌐</a></li><li data-item="Feedback" role="menuitem"><a target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/">Get web development help<!-- --> 🌐</a></li><li data-item="Feedback" role="menuitem"><a href="/en-US/docs/MDN/Community">Join the MDN community</a></li><li data-item="Feedback" role="menuitem"><a target="_blank" rel="noopener noreferrer" href="https://github.com/mdn/sprints/issues/new?template=issue-template.md&amp;projects=mdn/sprints/2&amp;labels=user-report&amp;title=%2Fen-US%2Fdocs%2FWeb%2FAPI%2FDocument%2FgetElementById">Report a content problem<!-- --> 🌐</a></li><li data-item="Feedback" role="menuitem"><a target="_blank" rel="noopener noreferrer" href="https://github.com/mdn/kuma/issues/new">Report an issue<!-- --> 🌐</a></li></ul></li></ul></nav><form class="header-search" id="nav-main-search" action="/en-US/search" method="get" role="search"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 28" aria-hidden="true" class="search-icon"><path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zm8 13c0 1.094-.906 2-2 2a1.96 1.96 0 0 1-1.406-.594l-5.359-5.344a10.971 10.971 0 0 1-6.234 1.937c-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-.672 4.406-1.937 6.234l5.359 5.359c.359.359.578.875.578 1.406z"></path></svg><label for="main-q" class="visually-hidden">Search MDN</label><input type="search" class="search-input-field" id="main-q" name="q" placeholder="Search MDN" pattern="(.|\s)*\S(.|\s)*" required=""></form><a href="/en-US/users/account/signup-landing?next=/en-US/docs/Web/API/Document/getElementById" rel="nofollow" class="signin-link">Sign in</a></header><main role="main"><div class="titlebar-container"><div class="titlebar"><h1 class="title">Document.getElementById()</h1></div></div><div class="full-width-row-container"><div class="max-content-width-container"><nav class="breadcrumbs" role="navigation"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web" class="breadcrumb-chevron" property="item" typeof="WebPage"><span property="name">Web technology for developers</span></a><meta property="position" content="1"></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/API" class="breadcrumb-chevron" property="item" typeof="WebPage"><span property="name">Web APIs</span></a><meta property="position" content="2"></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/API/Document" class="breadcrumb-chevron" property="item" typeof="WebPage"><span property="name">Document</span></a><meta property="position" content="3"></li><li property="itemListElement" typeof="ListItem"><a href="/en-US/docs/Web/API/Document/getElementById" class="crumb-current-page" property="item" typeof="WebPage"><span property="name" aria-current="page">Document.getElementById()</span></a><meta property="position" content="4"></li></ol></nav><div class="dropdown-container"><button id="header-language-menu" type="button" class="dropdown-menu-label" aria-haspopup="true" aria-owns="language-menu" aria-label="Current language is English. Choose your preferred language.">English<span class="dropdown-arrow-down" aria-hidden="true">▼</span></button><ul id="language-menu" class="dropdown-menu-items right" role="menu"><li lang="de" role="menuitem"><a href="/de/docs/Web/API/Document/getElementById" title="German"><bdi>Deutsch</bdi></a></li><li lang="es" role="menuitem"><a href="/es/docs/Web/API/Document/getElementById" title="Spanish"><bdi>Español</bdi></a></li><li lang="fr" role="menuitem"><a href="/fr/docs/Web/API/Document/getElementById" title="French"><bdi>Français</bdi></a></li><li lang="it" role="menuitem"><a href="/it/docs/Web/API/Document/getElementById" title="Italian"><bdi>Italiano</bdi></a></li><li lang="ja" role="menuitem"><a href="/ja/docs/Web/API/Document/getElementById" title="Japanese"><bdi>日本語</bdi></a></li><li lang="ko" role="menuitem"><a href="/ko/docs/Web/API/Document/getElementById" title="Korean"><bdi>한국어</bdi></a></li><li lang="nl" role="menuitem"><a href="/nl/docs/Web/API/Document/getElementById" title="Dutch"><bdi>Nederlands</bdi></a></li><li lang="pl" role="menuitem"><a href="/pl/docs/Web/API/Document/getElementById" title="Polish"><bdi>Polski</bdi></a></li><li lang="pt-BR" role="menuitem"><a href="/pt-BR/docs/Web/API/Document/getElementById" title="Portuguese (Brazilian)"><bdi>Português (do&nbsp;Brasil)</bdi></a></li><li lang="ru" role="menuitem"><a href="/ru/docs/Web/API/Document/getElementById" title="Russian"><bdi>Русский</bdi></a></li><li lang="zh-CN" role="menuitem"><a href="/zh-CN/docs/Web/API/Document/getElementById" title="Chinese (Simplified)"><bdi>中文 (简体)</bdi></a></li><li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document/getElementById$locales" rel="nofollow" id="translations-add">Add a translation</a></li></ul></div></div></div><div class="wiki-left-present content-layout"><aside class="document-toc-container"><section class="document-toc"><header><h2>On this Page</h2></header><ul><li><a href="#Syntax" rel="internal">Syntax</a></li><li><a href="#Example" rel="internal">Example</a></li><li><a href="#Usage_notes" rel="internal">Usage notes</a></li><li><a href="#Example_2" rel="internal">Example</a></li><li><a href="#Specification" rel="internal">Specification</a></li><li><a href="#Browser_compatibility" rel="internal">Browser compatibility</a></li><li><a href="#See_also" rel="internal">See also</a></li></ul></section></aside><div id="content" class="article text-content"><article id="wikiArticle"><div></div>

<p>The <a href="/en-US/docs/Web/API/Document"><code>Document</code></a> method <code><strong>getElementById()</strong></code> returns an <a href="/en-US/docs/Web/API/Element"><code>Element</code></a> object representing the element whose <a href="/en-US/docs/Web/API/Element/id"><code>id</code></a> property matches the specified string. Since element IDs are required to be unique if specified, they're a useful way to get access to a specific element quickly.</p>

<p>If you need to get access to an element which doesn't have an ID, you can use <a href="/en-US/docs/Web/API/Document/querySelector"><code>querySelector()</code></a> to find the element using any <a href="/en-US/docs/Glossary/CSS_selector">selector</a>.</p>

<h2 id="Syntax">Syntax</h2>

<pre class="eval">var <var>element</var> = <var>document</var>.getElementById(<var>id</var>);
</pre>

<h3 id="Parameters">Parameters</h3>

<dl>
 <dt><code><var>id</var></code></dt>
 <dd>The ID of the element to locate. The ID is case-sensitive string which is unique within the document; only one element may have any given ID.</dd>
</dl>

<h3 id="Return_value">Return value</h3>

<p>An <a href="/en-US/docs/Web/API/Element"><code>Element</code></a> object describing the DOM element object matching the specified ID, or <code>null</code> if no matching element was found in the document.</p>

<h2 id="Example">Example</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html line-numbers  language-html"><code class="  language-html"><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>getElementById example<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>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>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>para<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>Some text here<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>button</span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>changeColor('blue');<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>blue<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>changeColor('red');<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>red<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</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><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js line-numbers  language-js"><code class="  language-js"><span class="token keyword">function</span> <span class="token function">changeColor</span><span class="token punctuation">(</span><span class="token parameter">newColor</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">var</span> elem <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">'para'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
  elem<span class="token punctuation">.</span>style<span class="token punctuation">.</span>color <span class="token operator">=</span> newColor<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="Result">Result</h3>

<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="100" id="frame_Example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Document/getElementById$samples/Example?revision=1593008" width="250"></iframe></p>

<h2 id="Usage_notes">Usage notes</h2>

<p>The capitalization of <code>"Id"</code> in the name of this method <em>must</em> be correct for the code to function; <code>getElementByID()</code> is <em>not</em> valid and will not work, however natural it may seem.</p>

<p>Unlike some other element-lookup methods such as <a href="/en-US/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a> and <a href="/en-US/docs/Web/API/Document/querySelectorAll"><code>Document.querySelectorAll()</code></a>, <code>getElementById()</code> is only available as a method of the global <code>document</code> object, and <em>not</em> available as a method on all element objects in the DOM. Because ID values must be unique throughout the entire document, there is no need for "local" versions of the function.</p>

<h2 id="Example_2">Example</h2>

<pre class="line-numbers  language-html"><code class="  language-html"><span class="token doctype">&lt;!doctype html&gt;</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>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<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>title</span><span class="token punctuation">&gt;</span></span>Document<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>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">=</span><span class="token punctuation">"</span>parent-id<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>hello word1<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>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>test1<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>hello word2<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>p</span><span class="token punctuation">&gt;</span></span>hello word3<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>p</span><span class="token punctuation">&gt;</span></span>hello word4<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>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
        <span class="token keyword">var</span> parentDOM <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">'parent-id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> test1 <span class="token operator">=</span> parentDOM<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'test1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">//throw error</span>
        <span class="token comment">//Uncaught TypeError: parentDOM.getElementById is not a function</span>
    </span></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><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>If there is no element with the given <code>id</code>, this function returns <code>null</code>. Note that the <code>id</code> parameter is case-sensitive, so <code>document.getElementById("<strong>M</strong>ain")</code> will return <code>null</code> instead of the element <code>&lt;div id="<strong>m</strong>ain"&gt;</code> because "M" and "m" are different for the purposes of this method.</p>

<p><strong>Elements not in the document</strong> are not searched by <code>getElementById()</code>. When creating an element and assigning it an ID, you have to insert the element into the document tree with <a href="/en-US/docs/Web/API/Node/insertBefore"><code>Node.insertBefore()</code></a> or a similar method before you can access it with <code>getElementById()</code>:</p>

<pre class="brush: js line-numbers  language-js"><code class="  language-js"><span class="token keyword">var</span> element <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
element<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token string">'testqq'</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> el <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">'testqq'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// el will be null!</span>
<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p><strong>Non-HTML documents</strong>. The DOM implementation must have information that says which attributes are of type ID. Attributes with the name "id" are not of type ID unless so defined in the document's DTD. The <code>id</code> attribute is defined to be of ID type in the common cases of <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, and other. Implementations that do not know whether attributes are of type ID or not are expected to return <code>null</code>.</p>

<h2 id="Specification">Specification</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a class="external" href="https://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html#method-getElementById" hreflang="en" lang="en" rel="noopener">Document Object Model (DOM) Level 1 Specification<br><small lang="en-US">The definition of 'getElementById' in that specification.</small></a></td>
   <td><span class="spec-Obsolete">Obsolete</span></td>
   <td>Initial definition for the interface</td>
  </tr>
  <tr>
   <td><a class="external" href="https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId" hreflang="en" lang="en" rel="noopener">Document Object Model (DOM) Level 2 Core Specification<br><small lang="en-US">The definition of 'getElementById' in that specification.</small></a></td>
   <td><span class="spec-Obsolete">Obsolete</span></td>
   <td>Supersede DOM 1</td>
  </tr>
  <tr>
   <td><a class="external" href="https://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-getElBId" hreflang="en" lang="en" rel="noopener">Document Object Model (DOM) Level 3 Core Specification<br><small lang="en-US">The definition of 'getElementById' in that specification.</small></a></td>
   <td><span class="spec-Obsolete">Obsolete<!--findme--><meta id="findme" class="findme" itemprop="findme"></span></td>
   <td>Supersede DOM 2</td>
  </tr>
  <tr>
   <td><a class="external" href="https://dom.spec.whatwg.org/#interface-nonelementparentnode" hreflang="en" lang="en" rel="noopener">DOM<br><small lang="en-US">The definition of 'getElementById' in that specification.</small></a></td>
   <td><span class="spec-Living">Living Standard</span></td>
   <td>Intend to supersede DOM 3</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<div class="bc-data" id="bcd:api.Document.getElementById"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a><table class="bc-table bc-table-web"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th><th class="bc-platform-mobile" colspan="6"><span>Mobile</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">Android webview</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome for Android</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera for Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">Safari on iOS</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th></tr></thead><tbody><tr><th scope="row"><code>getElementById</code></th><td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support">
                <span>Full support</span>
              </abbr>
              1</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name" id="my-id">Edge</span><abbr class="bc-level-yes only-icon" title="Full support">
                <span>Full support</span>
              </abbr>
              12</td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
                <span>Full support</span>
              </abbr>
              1</td><td class="bc-supports-yes bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-yes only-icon" title="Full support">
                <span>Full support</span>
              </abbr>
              5.5</td><td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
                <span>Full support</span>
              </abbr>
              7</td><td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support">
                <span>Full support</span>
              </abbr>
              1</td><td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support">
                <span>Full support</span>
              </abbr>
              1</td><td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support">
                <span>Full support</span>
              </abbr>
              18</td><td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
                <span>Full support</span>
              </abbr>
              4</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
                <span>Full support</span>
              </abbr>
              10.1</td><td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support">
                <span>Full support</span>
              </abbr>
              1</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
                <span>Full support</span>
              </abbr>
              1.0</td></tr></tbody></table><div class="column-container bc-signal-block complete"><div class="column-half left-block"><div class="close-button-wrapper"><button class="button close-btn"></button></div><div class="complete-left-block-image" style="display: block;"></div><h2 class="complete-left-block-header">Thank you!</h2></div><div class="column-half right-block"><h3 class="right-block-header"><span>Report sent</span></h3><div class="right-block-main-text"><h4>What happens next?</h4><p>Our team will review your report. Once we verify the information you have supplied we will update this browser compatability table accordingly.</p><h4>Can I keep track of my report?</h4><p>You can join the GitHub repository to see updates and commits for this table data:</p><p><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data <span class="external external-icon"></span></a></p></div><div class="navigation-buttons"><button class="button neutral main-btn">Finish</button></div></div></div><div class="column-container bc-signal-block"><div class="column-4 left-block"><div class="close-button-wrapper"><button class="button close-btn"></button></div><span class="left-block-image"></span><h2 class="left-block-header">Tell us what’s wrong with this table</h2><p>Our goal is to provide accurate, real values for all our compatibility data tables. Notifying MDN of inaccurate data or supplying new data pushes us further towards our goal of providing 100% real values to the developer community.<br>Thank you for helping.</p></div><div class="column-8 right-block form-control-block"><h3 class="highlight-spanned"><span class="highlight-span"></span></h3><div class="inner-step" id="step-1"><div class="controls"><div class="control"><div class="control-wrap"><div class="control-header"><div class="control-header-wrap"><span class="step-num">1</span>Which browsers are affected?</div></div><div class="control-description">Please select the browser or browsers which are affected.</div><div class="select-browser-block"><div class="browser"><div class="browser-logo"><span class="browser-selected-icon"></span><img src="https://developer.mozilla.org/static/browsers/chrome.b49946f7739f.svg" alt="Chrome" role="img" aria-hidden="true"></div><div class="browser-name">Chrome</div></div><div class="browser"><div class="browser-logo"><span class="browser-selected-icon"></span><img src="https://developer.mozilla.org/static/browsers/edge.a5b352eb863f.svg" alt="Edge" role="img" aria-hidden="true"></div><div class="browser-name">Edge</div></div><div class="browser"><div class="browser-logo"><span class="browser-selected-icon"></span><img src="https://developer.mozilla.org/static/browsers/firefox.1c9f202ae696.svg" alt="Firefox" role="img" aria-hidden="true"></div><div class="browser-name">Firefox</div></div><div class="browser"><div class="browser-logo"><span class="browser-selected-icon"></span><img src="https://developer.mozilla.org/static/browsers/internet-explorer.4bb2b5f99e82.svg" alt="Internet Explorer" role="img" aria-hidden="true"></div><div class="browser-name">Internet Explorer</div></div><div class="browser"><div class="browser-logo"><span class="browser-selected-icon"></span><img src="https://developer.mozilla.org/static/browsers/opera.da441711d2f6.svg" alt="Opera" role="img" aria-hidden="true"></div><div class="browser-name">Opera</div></div><div class="browser"><div class="browser-logo"><span class="browser-selected-icon"></span><img src="https://developer.mozilla.org/static/browsers/safari.aca6ae03b671.svg" alt="Safari" role="img" aria-hidden="true"></div><div class="browser-name">Safari</div></div><div class="browser"><div class="browser-logo"><span class="browser-selected-icon"></span><img src="https://developer.mozilla.org/static/platforms/android.201ce5d041f7.svg" alt="Android webview" role="img" aria-hidden="true"></div><div class="browser-name">Android webview</div></div><div class="browser"><div class="browser-logo"><span class="browser-selected-icon"></span><img src="https://developer.mozilla.org/static/browsers/chrome.b49946f7739f.svg" alt="Chrome for Android" role="img" aria-hidden="true"></div><div class="browser-name">Chrome for Android</div></div><div class="browser"><div class="browser-logo"><span class="browser-selected-icon"></span><img src="https://developer.mozilla.org/static/browsers/firefox.1c9f202ae696.svg" alt="Firefox for Android" role="img" aria-hidden="true"></div><div class="browser-name">Firefox for Android</div></div><div class="browser"><div class="browser-logo"><span class="browser-selected-icon"></span><img src="https://developer.mozilla.org/static/browsers/opera.da441711d2f6.svg" alt="Opera for Android" role="img" aria-hidden="true"></div><div class="browser-name">Opera for Android</div></div><div class="browser"><div class="browser-logo"><span class="browser-selected-icon"></span><img src="https://developer.mozilla.org/static/browsers/safari.aca6ae03b671.svg" alt="Safari on iOS" role="img" aria-hidden="true"></div><div class="browser-name">Safari on iOS</div></div><div class="browser"><div class="browser-logo"><span class="browser-selected-icon"></span><img src="https://developer.mozilla.org/static/browsers/samsung-internet.8faa2ee1b8a1.svg" alt="Samsung Internet" role="img" aria-hidden="true"></div><div class="browser-name">Samsung Internet</div></div></div></div></div><div class="control"><div class="control-wrap"><div class="control-header has-control"><div class="control-header-wrap"><span class="step-num">2</span>Which table row is affected?</div><span class="select-wrapper"><select id="select-row"><option value="getElementById">getElementById</option></select></span></div><div class="control-description"></div></div></div></div><div class="navigation-buttons reverse mob-reduced-space"><button class="button neutral disabled next-step-btn">Next step (2 of 2)<span class="icon-next"></span></button></div></div><div id="step-2" class="inner-step"><div class="controls"><div class="control"><div class="control-wrap"><div class="control-header with-optional-label"><div class="control-header-wrap"><span class="step-num">3</span>Can you provide a brief explanation?</div></div><div class="control-description">Briefly outline the issue you are highlighting. Minimum 10 and maximum 1,000 characters.</div><textarea class="control-input" id="brief-explanation" maxlength="1000" minlength="10" required=""></textarea></div></div><div class="control"><div class="control-wrap"><div class="control-header with-optional-label"><div class="control-header-wrap"><span class="step-num">4</span>Do you have any supporting material?</div><span class="optional-text">Optional</span></div><div class="control-description">Browser documentation and release notes are good supporting items to accompany your message. A demo hosted on services like Codepen or JSBin are perfect for providing real examples of your findings.</div><textarea class="control-input" id="supporting-material" maxlength="1000"></textarea></div></div><div class="warning error-message"><span class="error-label">Connection error:</span><span>Sorry, we can’t seem to reach the server. We are working to fix the problem. Please try again later.</span></div></div><div class="navigation-buttons reverse"><button class="button neutral disabled main-btn scroll-to-signal">Send report</button><button class="button prev-step-btn btn-dark"><span class="icon-back"></span>Previous step</button></div></div></div></div><div class="signal-link-ext-container"><div class="signal-link-container"><hr><a class="scroll-to-signal" href="#">What are we missing?</a></div></div><section class="bc-legend" id="sect1"><h3 class="offscreen" id="Legend">Legend</h3><dl><dt><span class="bc-supports-yes bc-supports">
                <abbr class="bc-level bc-level-yes only-icon" title="Full support">
                 <span>Full support</span>
                 &nbsp;
                </abbr></span></dt><dd>Full support</dd></dl></section></div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/API/Document"><code>Document</code></a> reference for other methods and properties you can use to get references to elements in the document.</li>
 <li><a href="/en-US/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a> for selectors via queries like <code>'div.myclass'</code></li>
 <li><a class="new" rel="nofollow" title="en-US/docs/xml/id">xml:id</a> - has a utility method for allowing <code>getElementById()</code> to obtain 'xml:id' in XML documents (such as returned by Ajax calls)</li>
</ul></article><div class="metadata"><section class="document-meta"><header class="visually-hidden"><h4>Metadata</h4></header> <ul><li class="last-modified"><b>Last modified:</b> <time datetime="2019-11-29T22:51:36.156707">Nov 29, 2019</time>,<!-- --> <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document/getElementById$history" rel="nofollow">by MDN contributors</a></li></ul></section></div></div><div class="sidebar"><div class="quick-links"><div class="quick-links-head sidebar-heading">Related Topics</div><div><ol><li><strong><a href="/en-US/docs/Web/API/Document_Object_Model">Document Object Model</a></strong></li><li><strong><a href="/en-US/docs/Web/API/Document"><code>Document</code></a></strong></li><li class="toggle"><details open=""><summary>Constructor</summary><ol><li><a href="/en-US/docs/Web/API/Document/Document" title="The Document constructor creates a new Document object that is a web page loaded in the browser and serving as an entry point into the page's content."><code>Document()</code></a></li></ol></details></li><li class="toggle"><details open=""><summary>Properties</summary><ol><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/alinkColor" title="Returns or sets the color of an active link in the document body. A link is active during the time between mousedown and mouseup events."><code>alinkColor</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/all" title="The Document interface's read-only all property returns an HTMLAllCollection rooted at the document node. In other words, it returns the entire contents of the page."><code>all</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/anchors" title="The anchors read-only property of the Document interface returns a list of all of the anchors in the document."><code>anchors</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/applets" title="The applets property of the Document interface returns a list of the applets within a document."><code>applets</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/bgColor" title="The deprecated &nbsp;bgColor property gets or sets the background color of the current document."><code>bgColor</code></a></li><li><a href="/en-US/docs/Web/API/Document/body" title="The Document.body property represents the <body> or <frameset> node of the current document, or null if no such element exists."><code>body</code></a></li><li><a href="/en-US/docs/Web/API/Document/characterSet" title="The Document.characterSet read-only property returns the character encoding of the document that it's currently rendered with."><code>characterSet</code></a></li><li><a href="/en-US/docs/Web/API/ParentNode/childElementCount" title="The ParentNode.childElementCount read-only property returns an unsigned long representing the number of child elements of the given element."><code>childElementCount</code></a></li><li><a href="/en-US/docs/Web/API/ParentNode/children" title="The ParentNode property children is a read-only property that returns a live HTMLCollection which contains all of the child elements of the node upon which it was called."><code>children</code></a></li><li><a href="/en-US/docs/Web/API/Document/compatMode" title="The Document.compatMode property indicates whether the document is rendered in Quirks mode or Standards mode."><code>compatMode</code></a></li><li><a href="/en-US/docs/Web/API/Document/contentType" title="The Document.contentType read-only property returns the MIME type that the document is being rendered as. This may come from HTTP headers or other sources of MIME information, and might be affected by automatic type conversions performed by either the browser or extensions."><code>contentType</code></a></li><li><a href="/en-US/docs/Web/API/Document/currentScript" title="The Document.currentScript property returns the <script> element whose script is currently being processed and isn't a JavaScript module. (For modules use import.meta instead.)"><code>currentScript</code></a></li><li><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>defaultView</code></a></li><li><a href="/en-US/docs/Web/API/Document/designMode" title="document.designMode controls whether the entire document is editable. Valid values are &quot;on&quot; and &quot;off&quot;. According to the specification, this property is meant to default to &quot;off&quot;. Firefox follows this standard. The earlier versions of Chrome and IE default to &quot;inherit&quot;. Starting in Chrome 43, the default is &quot;off&quot; and &quot;inherit&quot; is no longer supported. In IE6-10, the value is capitalized."><code>designMode</code></a></li><li><a href="/en-US/docs/Web/API/Document/dir" title="The Document.dir property is a DOMString representing the directionality of the text of the document, whether left to right (default) or right to left. Possible values are 'rtl', right to left, and 'ltr', left to right."><code>dir</code></a></li><li><a href="/en-US/docs/Web/API/Document/doctype" title="Returns the Document Type Declaration (DTD) associated with current document. The returned object implements the DocumentType interface. Use DOMImplementation.createDocumentType() to create a DocumentType."><code>doctype</code></a></li><li><a href="/en-US/docs/Web/API/Document/documentElement" title="Document.documentElement returns the Element that is the root element of the document (for example, the <html> element for HTML documents)."><code>documentElement</code></a></li><li><a href="/en-US/docs/Web/API/Document/documentURI" title="The documentURI read-only property of the Document interface returns the document location as a string."><code>documentURI</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span><a href="/en-US/docs/Web/API/Document/documentURIObject" title="The Document.documentURIObject read-only property returns an nsIURI object representing the URI of the document."><code>documentURIObject</code></a></li><li><a href="/en-US/docs/Web/API/Document/domain" title="The domain property of the Document interface gets/sets the domain portion of the origin of the current document, as used by the same origin policy."><code>domain</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/domConfig" title="This should return the DOMConfiguration for the document."><code>domConfig</code></a></li><li><a href="/en-US/docs/Web/API/Document/embeds" title="The embeds read-only property of the Document interface returns a list of the embedded <object> elements within the current document."><code>embeds</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/fgColor" title="fgColor gets/sets the foreground color, or text color, of the current document."><code>fgColor</code></a></li><li><a href="/en-US/docs/Web/API/ParentNode/firstElementChild" title="The ParentNode.firstElementChild read-only property returns the object's first child Element, or null if there are no child elements."><code>firstElementChild</code></a></li><li><a href="/en-US/docs/Web/API/Document/forms" title="The forms read-only property of the Document interface returns an HTMLCollection&nbsp;listing all the <form> elements contained in the document."><code>forms</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/fullscreen" title="The obsolete Document interface's fullscreen read-only property reports whether or not the document is currently displaying content in full-screen mode."><code>fullscreen</code></a></li><li><a href="/en-US/docs/Web/API/Document/fullscreenEnabled" title="The read-only fullscreenEnabled property on the Document interface indicates whether or not full-screen mode is available."><code>fullscreenEnabled</code></a></li><li><a href="/en-US/docs/Web/API/Document/head" title="The head read-only property of the Document interface returns the <head> element of the current document."><code>head</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span></span><s class="obsoleteElement"><a href="/en-US/docs/Web/API/Document/height" title="Returns the height of the document object. In most cases, this is equal to the <body> element of the current document."><code>height</code></a></s></li><li><a href="/en-US/docs/Web/API/Document/hidden" title="The Document.hidden read-only property returns a Boolean value indicating if the page is considered hidden or not."><code>hidden</code></a></li><li><a href="/en-US/docs/Web/API/Document/images" title="The images read-only property of the Document interface returns a collection of the images in the current HTML document."><code>images</code></a></li><li><a href="/en-US/docs/Web/API/Document/implementation" title="The Document.implementation property returns a DOMImplementation object associated with the current document."><code>implementation</code></a></li><li><a href="/en-US/docs/Web/API/ParentNode/lastElementChild" title="The ParentNode.lastElementChild read-only property returns the object's last child Element or null if there are no child elements."><code>lastElementChild</code></a></li><li><a href="/en-US/docs/Web/API/Document/lastModified" title="The lastModified property of the Document interface returns a string containing the date and time on which the current document was last modified."><code>lastModified</code></a></li><li><a href="/en-US/docs/Web/API/Document/lastStyleSheetSet" title="The Document.lastStyleSheetSet property returns the last enabled style sheet set. This property's value changes whenever the document.selectedStyleSheetSet property is changed."><code>lastStyleSheetSet</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/linkColor" title="The Document.linkColor property gets/sets the color of links within the document."><code>linkColor</code></a></li><li><a href="/en-US/docs/Web/API/Document/links" title="The links read-only property of the Document interface returns a collection of all <area> elements and <a> elements in a document with a value for the href attribute."><code>links</code></a></li><li><a href="/en-US/docs/Web/API/Document/location" title="The Document.location read-only property returns a Location object, which contains information about the URL of the document and provides methods for changing that URL and loading another URL."><code>location</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span><a href="/en-US/docs/Web/API/Document/mozSyntheticDocument" title="The Document.mozSyntheticDocument property indicates whether or not the document is a synthetic one; that is, a document representing a standalone image, video, audio, or the like."><code>mozSyntheticDocument</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/onabort" title="The onabort property of the GlobalEventHandlers mixin is the EventHandler for processing abort events sent to the window."><code>onabort</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span><a href="/en-US/docs/Web/API/Document/onafterscriptexecute" title="The Document.onafterscriptexecute property references a function that fires when a static <script> element finishes executing its script. It does not fire if the element is added dynamically, such as with appendChild()."><code>onafterscriptexecute</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationcancel" title="The onanimationcancel property of the GlobalEventHandlers mixin is the EventHandler for processing animationcancel events."><code>onanimationcancel</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationend" title="The onanimationend property of the GlobalEventHandlers mixin is the EventHandler for processing animationend events."><code>onanimationend</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/onanimationiteration" title="The onanimationiteration property of the GlobalEventHandlers mixin is the EventHandler for processing animationiteration events."><code>onanimationiteration</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/onauxclick" title="The onauxclick property of the GlobalEventHandlers mixin is an EventHandler for processing auxclick events."><code>onauxclick</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span><a href="/en-US/docs/Web/API/Document/onbeforescriptexecute" title="Fired when the code in a <script>&nbsp;element declared in an HTML document&nbsp;is about to start executing. Does not fire if the element is added dynamically, eg with appendChild()."><code>onbeforescriptexecute</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur" title="The onblur property of the GlobalEventHandlers mixin is the EventHandler for processing blur events. It's available on Element, Document, and Window."><code>onblur</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/oncancel" title="The oncancel property of the GlobalEventHandlers mixin is an EventHandler for processing cancel events sent to a <dialog> element."><code>oncancel</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/oncanplay" title="The oncanplay property of the GlobalEventHandlers mixin is the EventHandler for processing canplay events."><code>oncanplay</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/oncanplaythrough" title="The oncanplaythrough property of the GlobalEventHandlers mixin is the EventHandler for processing canplaythrough events."><code>oncanplaythrough</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange" title="The onchange property of the GlobalEventHandlers mixin is an EventHandler for processing change events."><code>onchange</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick" title="The onclick property of the GlobalEventHandlers mixin is the EventHandler for processing click events on a given element."><code>onclick</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclose" title="The onclose property of the GlobalEventHandlers mixin is an EventHandler for processing close events sent to a <dialog> element."><code>onclose</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/oncontextmenu" title="The oncontextmenu property of the GlobalEventHandlers mixin is an EventHandler that processes contextmenu events."><code>oncontextmenu</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/oncuechange" title="The oncuechange property of the GlobalEventHandlers mixin is the EventHandler for processing cuechange events."><code>oncuechange</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick" title="The ondblclick property of the GlobalEventHandlers mixin is an EventHandler that processes dblclick events on the given element."><code>ondblclick</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondurationchange" title="The ondurationchange property of the GlobalEventHandlers mixin is the EventHandler for processing durationchange events."><code>ondurationchange</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onended" title="The onended property of the GlobalEventHandlers mixin is the EventHandler for processing ended events."><code>onended</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onerror" title="The onerror property of the GlobalEventHandlers mixin is an EventHandler that processes error events."><code>onerror</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus" title="The onfocus property of the GlobalEventHandlers mixin is an EventHandler that processes focus events on the given element."><code>onfocus</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/onformdata" title="The onformdata property of the GlobalEventHandlers mixin is the EventHandler for processing formdata events, fired&nbsp;after the entry list representing the form's data is constructed. This happens when the form is submitted, but can also be triggered by the invocation of a FormData() constructor. onformdata is available on HTMLFormElement."><code>onformdata</code></a></li><li><a href="/en-US/docs/Web/API/Document/onfullscreenchange" title="The Document interface's onfullscreenchange property is an event handler for the fullscreenchange event that is fired immediately before a document transitions into or out of full-screen mode."><code>onfullscreenchange</code></a></li><li><a href="/en-US/docs/Web/API/Document/onfullscreenerror" title="The Document.onfullscreenerror property is an event handler for the fullscreenerror event that is sent to the&nbsp; document when it fails to transition into full-screen mode after a prior call to Element.requestFullscreen()."><code>onfullscreenerror</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/ongotpointercapture" title="The ongotpointercapture property of the GlobalEventHandlers mixin is an EventHandler that processes gotpointercapture events."><code>ongotpointercapture</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninput" title="The oninput property of the GlobalEventHandlers mixin is an EventHandler that processes input events on the <input>, <select>, and <textarea> elements. It also handles these events on elements where contenteditable or&nbsp;designMode are turned on."><code>oninput</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/oninvalid" title="The oninvalid property of the GlobalEventHandlers mixin is an EventHandler that processes invalid events."><code>oninvalid</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown" title="The onkeydown property of the GlobalEventHandlers mixin is an EventHandler that processes keydown events."><code>onkeydown</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress" title="The onkeypress property of the GlobalEventHandlers mixin is an EventHandler that processes keypress events."><code>onkeypress</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup" title="The onkeyup property of the GlobalEventHandlers mixin is an EventHandler that processes keyup events."><code>onkeyup</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onload" title="The onload property of the GlobalEventHandlers mixin is an EventHandler that processes load events on a Window, XMLHttpRequest, <img> element, etc."><code>onload</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onloadeddata" title="The onloadeddata property of the GlobalEventHandlers mixin is the EventHandler for processing loadeddata events."><code>onloadeddata</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onloadedmetadata" title="The onloadedmetadata property of the GlobalEventHandlers mixin is the EventHandler for processing loadedmetadata events."><code>onloadedmetadata</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onloadend" title="The onloadend property of the GlobalEventHandlers mixin is an EventHandler representing the code to be called when the loadend event is raised (when progress has stopped on the loading of a resource.)"><code>onloadend</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onloadstart" title="The onloadstart property of the GlobalEventHandlers mixin is an EventHandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.)"><code>onloadstart</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onlostpointercapture" title="The onlostpointercapture property of the GlobalEventHandlers mixin is an EventHandler that processes lostpointercapture events."><code>onlostpointercapture</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmousedown" title="The onmousedown property of the GlobalEventHandlers mixin is an EventHandler that processes mousedown events."><code>onmousedown</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseenter" title="The onmouseenter property of the GlobalEventHandlers mixin is the EventHandler for processing mouseenter events."><code>onmouseenter</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseleave" title="The onmouseleave property of the GlobalEventHandlers mixin is the EventHandler for processing mouseleave events."><code>onmouseleave</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmousemove" title="The onmousemove property of the GlobalEventHandlers mixin is an EventHandler that processes mousemove events."><code>onmousemove</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout" title="The onmouseout property of the GlobalEventHandlers mixin is an EventHandler that processes mouseout events."><code>onmouseout</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover" title="The onmouseover property of the GlobalEventHandlers mixin is an EventHandler that processes mouseover events."><code>onmouseover</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseup" title="The onmouseup property of the GlobalEventHandlers mixin is an EventHandler that processes mouseup events."><code>onmouseup</code></a></li><li><a href="/en-US/docs/Web/API/Document/onoffline" title="The Document.onoffline event handler is called when an offline is fired on the <body> element and bubbles up, when navigator.onLine property changes and becomes false."><code>onoffline</code></a></li><li><a href="/en-US/docs/Web/API/Document/ononline" title="The Document.online event is fired on the <body> of each page when the browser switches between online and offline mode. Additionally, the events bubble up from document.body, to document, ending at window. Both events are non-cancellable (you can't prevent the user from coming online, or going offline)."><code>ononline</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpause" title="The onpause property of the GlobalEventHandlers mixin is the EventHandler for processing pause events."><code>onpause</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onplay" title="The onplay property of the GlobalEventHandlers mixin is the EventHandler for processing play events."><code>onplay</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointercancel" title="The onpointercancel property of the GlobalEventHandlers mixin is an EventHandler that processes pointercancel events."><code>onpointercancel</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerdown" title="The GlobalEventHandlers event handler onpointerdown is used to specify the event handler for the pointerdown event, which is fired when the pointing device is initially pressed. This event can be sent to Window, Document, and Element objects."><code>onpointerdown</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerenter" title="The onpointerenter property of the GlobalEventHandlers mixin is an EventHandler that processes pointerenter events."><code>onpointerenter</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerleave" title="The global event handler for the pointerleave event, which is delivered to a Node when the pointer (mouse cursor, fingertip, etc.) exits its hit test area (for example, if the cursor exits an Element or Window's content area). This event is part of the Pointer Events API."><code>onpointerleave</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointermove" title="The onpointermove property of the GlobalEventHandlers mixin is an EventHandler that processes pointermove events."><code>onpointermove</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerout" title="The onpointerout property of the GlobalEventHandlers mixin is an EventHandler that processes pointerout events."><code>onpointerout</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerover" title="The onpointerover property of the GlobalEventHandlers mixin is an EventHandler that processes pointerover events."><code>onpointerover</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onpointerup" title="The onpointerup property of the GlobalEventHandlers mixin is an EventHandler that processes pointerup events."><code>onpointerup</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onreset" title="The onreset property of the GlobalEventHandlers mixin is an EventHandler that processes reset events."><code>onreset</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onresize" title="The onresize property of the GlobalEventHandlers interface is an EventHandler that processes resize events."><code>onresize</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onscroll" title="The onscroll property of the GlobalEventHandlers mixin is an EventHandler that processes scroll events."><code>onscroll</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onselect" title="The onselect property of the GlobalEventHandlers mixin is an EventHandler that processes select events."><code>onselect</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/onselectionchange" title="The onselectionchange property of the GlobalEventHandlers mixin is an EventHandler that processes selectionchange events."><code>onselectionchange</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/onselectstart" title="The onselectstart property of the GlobalEventHandlers mixin is an EventHandler that processes selectstart events."><code>onselectstart</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit" title="The onsubmit property of the GlobalEventHandlers mixin is an EventHandler that processes submit events."><code>onsubmit</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontouchcancel" title="The ontouchcancel property of the GlobalEventHandlers mixin is an EventHandler that processes touchcancel events."><code>ontouchcancel</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontouchstart" title="The ontouchstart property of the GlobalEventHandlers mixin is an EventHandler that processes touchstart events."><code>ontouchstart</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitioncancel" title="The ontransitioncancel property of the GlobalEventHandlers mixin is an EventHandler that processes transitioncancel events."><code>ontransitioncancel</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend" title="The ontransitionend property of the GlobalEventHandlers mixin is an EventHandler that processes transitionend events."><code>ontransitionend</code></a></li><li><a href="/en-US/docs/Web/API/Document/onvisibilitychange" title="The Document.onvisibilitychange property represents the event handler that is called when a visibilitychange event reaches this object."><code>onvisibilitychange</code></a></li><li><a href="/en-US/docs/Web/API/GlobalEventHandlers/onwheel" title="The onwheel property of the GlobalEventHandlers mixin is an EventHandler that processes wheel events."><code>onwheel</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/Document/origin" title="The Document.origin read-only property returns the document's origin. In most cases, this property is equivalent to document.defaultView.location.origin."><code>origin</code></a></li><li><a href="/en-US/docs/Web/API/Document/plugins" title="The plugins read-only property of the Document interface returns an HTMLCollection object containing one or more HTMLEmbedElements representing the <embed> elements in the current document."><code>plugins</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/popupNode" title="When a popup attached via the popup or context attributes is opened, the XUL document's popupNode property is set to the node that was clicked on. This will be the target of the mouse event that activated the popup. If the popup was opened via the keyboard, the popup node may be set to null. Typically, this property will be checked during a popupshowing event handler for a context menu to initialize the menu based on the context."><code>popupNode</code></a></li><li><a href="/en-US/docs/Web/API/Document/preferredStyleSheetSet" title="The preferredStyleSheetSet property returns the preferred style sheet set as set by the page author."><code>preferredStyleSheetSet</code></a></li><li><a href="/en-US/docs/Web/API/Document/readyState" title="The Document.readyState property describes the loading state of the document."><code>readyState</code></a></li><li><a href="/en-US/docs/Web/API/Document/referrer" title="The Document.referrer property returns the URI of the page that linked&nbsp;to this page."><code>referrer</code></a></li><li><a href="/en-US/docs/Web/API/Document/scripts" title="The scripts property of the Document interface returns a list of the <script> elements in the document. The returned object is an HTMLCollection."><code>scripts</code></a></li><li><a href="/en-US/docs/Web/API/Document/scrollingElement" title="The scrollingElement read-only property of the Document interface returns a reference to the Element that scrolls the document. In standards mode, this is the root element of the document,&nbsp;document.documentElement."><code>scrollingElement</code></a></li><li><a href="/en-US/docs/Web/API/Document/selectedStyleSheetSet" title="The selectedStyleSheetSet property indicates the name of the style sheet set that's currently in use."><code>selectedStyleSheetSet</code></a></li><li><a href="/en-US/docs/Web/API/Document/styleSheetSets" title="The styleSheetSets read-only property returns a live list of all of the currently-available style sheet sets."><code>styleSheetSets</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/Document/timeline" title="The timeline readonly property of the Document interface represents the default timeline of the current document. This timeline is a special instance of&nbsp;DocumentTimeline that is automatically created on page load."><code>timeline</code></a></li><li><a href="/en-US/docs/Web/API/Document/title" title="The document.title property gets or sets the current title of the document."><code>title</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span><a href="/en-US/docs/Web/API/Document/tooltipNode" title="The Document.tooltipNode property returns the node which is the target of the current <xul:tooltip>."><code>tooltipNode</code></a></li><li><a href="/en-US/docs/Web/API/Document/URL" title="The URL read-only property of the Document interface returns the document location as a string."><code>URL</code></a></li><li><a href="/en-US/docs/Web/API/Document/visibilityState" title="The Document.visibilityState read-only property returns the visibility of the document, that is in which context this element is now visible. It is useful to know if the document is in the background or an invisible tab, or only loaded for pre-rendering."><code>visibilityState</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/vlinkColor" title="The Document.vlinkColor property gets/sets the color of links that the user has visited in the document."><code>vlinkColor</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span></span><s class="obsoleteElement"><a href="/en-US/docs/Web/API/Document/width" title="Returns the width of the <body> element of the current document in pixels."><code>width</code></a></s></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span></span><s class="obsoleteElement"><a href="/en-US/docs/Web/API/Document/xmlEncoding" title="Returns the encoding as determined by the XML declaration. Should be null if unspecified or unknown."><code>xmlEncoding</code></a></s></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span></span><s class="obsoleteElement"><a href="/en-US/docs/Web/API/Document/xmlVersion" title="Returns the version number as specified in the XML declaration (e.g., <?xml version=&quot;1.0&quot;?>) or &quot;1.0&quot; if the declaration is absent."><code>xmlVersion</code></a></s></li></ol></details></li><li class="toggle"><details open=""><summary>Methods</summary><ol><li><a href="/en-US/docs/Web/API/Document/adoptNode" title="Document.adoptNode() transfers a node from another document into the method's document. The adopted node and its subtree is removed from its original document (if any), and its ownerDocument is changed to the current document. The node can then be inserted into the current document."><code>adoptNode()</code></a></li><li><a href="/en-US/docs/Web/API/ParentNode/append" title="The ParentNode.append() method inserts a set of Node objects or DOMString objects after the last child of the ParentNode. "><code>append()</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span><a href="/en-US/docs/Web/API/Document/caretRangeFromPoint" title="The caretRangeFromPoint() method of the Document interface returns a Range object for the document fragment under the specified coordinates."><code>caretRangeFromPoint()</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/clear" title="The Document.clear() method clears the whole specified document in early (pre-1.0) versions of Mozilla."><code>clear()</code></a></li><li><a href="/en-US/docs/Web/API/Document/close" title="The Document.close() method finishes writing to a document, opened with Document.open()."><code>close()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createAttribute" title="The Document.createAttribute() method creates a new attribute node, and returns it. The object created a node implementing the Attr interface. The DOM does not enforce what sort of attributes can be added to a particular element in this manner."><code>createAttribute()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createCDATASection" title="createCDATASection() creates a new CDATA section node, and returns it."><code>createCDATASection()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createComment" title="createComment() creates a new comment node, and returns it."><code>createComment()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createDocumentFragment" title="Creates a new empty DocumentFragment into which DOM nodes can be added to build an offscreen DOM tree."><code>createDocumentFragment()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createElement" title="In an HTML document, the document.createElement() method creates the HTML element specified by tagName, or an HTMLUnknownElement if tagName isn't recognized."><code>createElement()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createElementNS" title="Creates an element with the specified namespace URI and qualified name."><code>createElementNS()</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span></span><s class="obsoleteElement"><a href="/en-US/docs/Web/API/Document/createEntityReference" title="Prior to Gecko&nbsp;7.0 this method showed up as present, due to bug bug&nbsp;9850, it always only returned null. The only workaround is to create a text node, CDATA section, attribute node value, etc. which has the value referred to by the entity, using Unicode escape sequences or fromCharCode() as necessary."><code>createEntityReference()</code></a></s></li><li><a href="/en-US/docs/Web/API/Document/createEvent" title="Creates an event of the type specified. The returned object should be first initialized and can then be passed to EventTarget.dispatchEvent."><code>createEvent()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createExpression" title="This method compiles an XPathExpression which can then be used for (repeated) evaluations."><code>createExpression()</code></a></li><li><a href="/en-US/docs/Web/API/XPathEvaluator/createExpression" title="This method compiles an XPathExpression which can then be used for (repeated) evaluations of the XPath expression."><code>createExpression()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createNodeIterator" title="Returns a new NodeIterator object."><code>createNodeIterator()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createNSResolver" title="Creates an XPathNSResolver which resolves namespaces with respect to the definitions in scope for a specified node."><code>createNSResolver()</code></a></li><li><a href="/en-US/docs/Web/API/XPathEvaluator/createNSResolver" title="This method adapts any DOM node to resolve namespaces so that an XPath expression can be easily evaluated relative to the context of the node where it appeared within the document."><code>createNSResolver()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createProcessingInstruction" title="createProcessingInstruction() generates a new processing instruction node and returns it."><code>createProcessingInstruction()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createRange" title="The Document.createRange() method returns a new Range object."><code>createRange()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createTextNode" title="Creates a new Text node. This method can be used to escape HTML characters."><code>createTextNode()</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/createTouch" title="The Document.createTouch() method creates and returns a new Touch object."><code>createTouch()</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/createTouchList" title="The Document.createTouchList() method creates and returns a new TouchList object."><code>createTouchList()</code></a></li><li><a href="/en-US/docs/Web/API/Document/createTreeWalker" title="The Document.createTreeWalker() creator method returns a newly created TreeWalker object."><code>createTreeWalker()</code></a></li><li><a href="/en-US/docs/Web/API/Document/enableStyleSheetsForSet" title="Enables the style sheets matching the specified name in the current style sheet set, and disables all other style sheets (except those without a title, which are always enabled)."><code>enableStyleSheetsForSet()</code></a></li><li><a href="/en-US/docs/Web/API/Document/evaluate" title="Returns an XPathResult based on an XPath expression and other given parameters."><code>evaluate()</code></a></li><li><a href="/en-US/docs/Web/API/XPathEvaluator/evaluate" title="The evaluate() method of the XPathEvaluator interface executes an XPath expression on the given node or document and returns an XPathResult."><code>evaluate()</code></a></li><li><a href="/en-US/docs/Web/API/Document/execCommand" title="When an HTML document has been switched to designMode, its document object exposes an execCommand method to run commands that manipulate the current editable region, such as form inputs or contentEditable elements."><code>execCommand()</code></a></li><li><a href="/en-US/docs/Web/API/Document/exitFullscreen" title="The Document method exitFullscreen() requests that the element on this document which is currently being presented in full-screen mode be taken out of full-screen mode, restoring the previous state of the screen."><code>exitFullscreen()</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/Document/exitPointerLock" title="The exitPointerLock() method asynchronously releases a pointer lock previously requested through Element.requestPointerLock."><code>exitPointerLock()</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an experimental API that should not be used in production code."><i class="icon-beaker"> </i></span></span><a href="/en-US/docs/Web/API/Document/getAnimations" title="The getAnimations()&nbsp;method of the Document interface returns an array&nbsp;of all Animation objects currently in effect whose target elements are descendants of the document. This array includes CSS Animations, CSS Transitions, and Web Animations."><code>getAnimations()</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This is an obsolete API and is no longer guaranteed to work."><i class="icon-trash"> </i></span></span><s class="obsoleteElement"><a href="/en-US/docs/Web/API/Document/getBoxObjectFor" title="Returns a boxObject (x, y, width, height) for a specified element."><code>getBoxObjectFor()</code></a></s></li><li><em><code>getElementById()</code></em></li><li><a href="/en-US/docs/Web/API/Document/getElementsByClassName" title="returns an array-like object of all child elements which have all of the given class name(s)."><code>getElementsByClassName()</code></a></li><li><a href="/en-US/docs/Web/API/Document/getElementsByName" title="The getElementsByName() method of the Document object returns a NodeList Collection of elements with a given name in the document."><code>getElementsByName()</code></a></li><li><a href="/en-US/docs/Web/API/Document/getElementsByTagName" title="returns an HTMLCollection of elements with the given tag name."><code>getElementsByTagName()</code></a></li><li><a href="/en-US/docs/Web/API/Document/getElementsByTagNameNS" title="Returns a list of elements with the given tag name belonging to the given namespace. The complete document is searched, including the root node."><code>getElementsByTagNameNS()</code></a></li><li><a href="/en-US/docs/Web/API/Document/hasFocus" title="The hasFocus() method of the Document interface returns a Boolean value indicating whether the document or any element inside the document has focus. This method can be used to determine whether the active element in a document has focus."><code>hasFocus()</code></a></li><li><a href="/en-US/docs/Web/API/Document/hasStorageAccess" title="The hasStorageAccess() method of the Document interface returns a Promise that resolves with a boolean value indicating whether the document has access to its first-party storage."><code>hasStorageAccess()</code></a></li><li><a href="/en-US/docs/Web/API/Document/importNode" title="The Document object's importNode() method creates a copy of a Node or DocumentFragment from another document, to be inserted into the current document later."><code>importNode()</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This API has not been standardized."><i class="icon-warning-sign"> </i></span></span><a href="/en-US/docs/Web/API/Document/mozSetImageElement" title="The Document.mozSetImageElement() method changes the element being used as the CSS background for a background with a given background element ID."><code>mozSetImageElement()</code></a></li><li><a href="/en-US/docs/Web/API/Document/open" title="The Document.open() method opens a document for writing."><code>open()</code></a></li><li><a href="/en-US/docs/Web/API/ParentNode/prepend" title="The ParentNode.prepend() method inserts a set of Node objects or DOMString objects before the first child of the ParentNode. DOMString objects are inserted as equivalent Text nodes."><code>prepend()</code></a></li><li><a href="/en-US/docs/Web/API/Document/queryCommandEnabled" title="The Document.queryCommandEnabled() method reports whether or not the specified editor command is enabled by the browser."><code>queryCommandEnabled()</code></a></li><li><a href="/en-US/docs/Web/API/Document/queryCommandSupported" title="The Document.queryCommandSupported() method reports whether or not the specified editor command is supported by the browser."><code>queryCommandSupported()</code></a></li><li><a href="/en-US/docs/Web/API/Document/querySelector" title="The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned."><code>querySelector()</code></a></li><li><a href="/en-US/docs/Web/API/ParentNode/querySelector" title="The ParentNode mixin defines the querySelector() method as returning an Element representing the first element matching the specified group of selectors which are descendants of the object on which the method was called."><code>querySelector()</code></a></li><li><a href="/en-US/docs/Web/API/Document/querySelectorAll" title="The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document's elements that match the specified group of selectors."><code>querySelectorAll()</code></a></li><li><a href="/en-US/docs/Web/API/ParentNode/querySelectorAll" title="The ParentNode mixin defines the querySelectorAll() method as returning a NodeList representing a list of elements matching the specified group of selectors which are descendants of the object on which the method was called."><code>querySelectorAll()</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/registerElement" title="The document.registerElement() method registers a new custom element in the browser and returns a constructor for the new element."><code>registerElement()</code></a></li><li><a href="/en-US/docs/Web/API/Document/releaseCapture" title="The releaseCapture() method releases mouse capture if it's currently enabled on an element within this document. Enabling mouse capture on an element is done by calling element.setCapture()."><code>releaseCapture()</code></a></li><li><a href="/en-US/docs/Web/API/Document/requestStorageAccess" title="The requestStorageAccess() method of the Document interface returns a Promise that resolves if the access to first-party storage was granted, and rejects if access was denied."><code>requestStorageAccess()</code></a></li><li><a href="/en-US/docs/Web/API/Document/write" title="The Document.write() method writes a string of text to a document stream opened by document.open()."><code>write()</code></a></li><li><a href="/en-US/docs/Web/API/Document/writeln" title="Writes a string of text followed by a newline character to a document."><code>writeln()</code></a></li></ol></details></li><li class="toggle"><details open=""><summary>Events</summary><ol><li><a href="/en-US/docs/Web/API/Document/animationcancel_event" title="The animationcancel event is fired when a CSS Animation unexpectedly aborts. In other words, any time it stops running without sending an animationend event. This might happen when the animation-name is changed such that the animation is removed, or when the animating node is hidden using CSS. Therefore, either directly or because any of its containing nodes are hidden."><code>animationcancel</code></a></li><li><a href="/en-US/docs/Web/API/Document/animationend_event" title="The animationend event is fired when a CSS Animation has completed. If the animation aborts before reaching completion, such as if the element is removed from the DOM or the animation is removed from the element, the animationend event is not fired."><code>animationend</code></a></li><li><a href="/en-US/docs/Web/API/Document/animationiteration_event" title="The animationiteration event is fired when an iteration of a CSS Animation ends, and another one begins. This event does not occur at the same time as the animationend event, and therefore does not occur for animations with an animation-iteration-count of one."><code>animationiteration</code></a></li><li><a href="/en-US/docs/Web/API/Document/animationstart_event" title="The animationstart event is fired when a CSS Animation has started. If there is an animation-delay, this event will fire once the delay period has expired. A negative delay will cause the event to fire with an elapsedTime equal to the absolute value of the delay (and, correspondingly, the animation will begin playing at that time index into the sequence)."><code>animationstart</code></a></li><li><a href="/en-US/docs/Web/API/Document/copy_event" title="The copy event fires when the user initiates a copy action through the browser's user interface."><code>copy</code></a></li><li><a href="/en-US/docs/Web/API/Document/cut_event" title="The cut event is fired when the user has initiated a &quot;cut&quot; action through the browser's user interface."><code>cut</code></a></li><li><a href="/en-US/docs/Web/API/Document/DOMContentLoaded_event" title="The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading."><code>DOMContentLoaded</code></a></li><li><a href="/en-US/docs/Web/API/Document/drag_event" title="The drag event is fired every few hundred milliseconds as an element or text selection is being dragged by the user."><code>drag</code></a></li><li><a href="/en-US/docs/Web/API/Document/dragend_event" title="The dragend event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key)."><code>dragend</code></a></li><li><a href="/en-US/docs/Web/API/Document/dragenter_event" title="The dragenter event is fired when a dragged element or text selection enters a valid drop target."><code>dragenter</code></a></li><li><a href="/en-US/docs/Web/API/Document/dragexit_event" title="The dragexit event is fired when an element is no longer the drag operation's immediate selection target."><code>dragexit</code></a></li><li><a href="/en-US/docs/Web/API/Document/dragleave_event" title="The dragleave event is fired when a dragged element or text selection leaves a valid drop target."><code>dragleave</code></a></li><li><a href="/en-US/docs/Web/API/Document/dragover_event" title="The dragover event is fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds)."><code>dragover</code></a></li><li><a href="/en-US/docs/Web/API/Document/dragstart_event" title="The dragstart event is fired when the user starts dragging an element or text selection."><code>dragstart</code></a></li><li><a href="/en-US/docs/Web/API/Document/drop_event" title="The drop event is fired when an element or text selection is dropped on a valid drop target."><code>drop</code></a></li><li><a href="/en-US/docs/Web/API/Document/gotpointercapture_event" title="The gotpointercapture event is fired when an element captures a pointer using setPointerCapture()."><code>gotpointercapture</code></a></li><li><a href="/en-US/docs/Web/API/Document/keydown_event" title="The keydown event is fired when a key is pressed."><code>keydown</code></a></li><li><span class="sidebar-icon"><span class="icon-only-inline" title="This deprecated API should no longer be used, but will probably still work."><i class="icon-thumbs-down-alt"> </i></span></span><a href="/en-US/docs/Web/API/Document/keypress_event" title="The keypress event is fired when a key that produces a character value is pressed down."><code>keypress</code></a></li><li><a href="/en-US/docs/Web/API/Document/keyup_event" title="The keyup event is fired when a key is released."><code>keyup</code></a></li><li><a href="/en-US/docs/Web/API/Document/lostpointercapture_event" title="The lostpointercapture event is fired when a captured pointer is released."><code>lostpointercapture</code></a></li><li><a href="/en-US/docs/Web/API/Document/paste_event" title="The paste event is fired when the user has initiated a &quot;paste&quot; action through the browser's user interface."><code>paste</code></a></li><li><a href="/en-US/docs/Web/API/Document/pointercancel_event" title="The pointercancel event is fired when the browser determines that there are unlikely to be any more pointer events, or if after the pointerdown event is fired, the pointer is then used to manipulate the viewport by panning, zooming, or scrolling."><code>pointercancel</code></a></li><li><a href="/en-US/docs/Web/API/Document/pointerdown_event" title="The pointerdown event is fired when a pointer becomes active. For mouse, it is fired when the device transitions from no buttons depressed to at least one button depressed. For touch, it is fired when physical contact is made with the digitizer. For pen, it is fired when the stylus makes physical contact with the digitizer."><code>pointerdown</code></a></li><li><a href="/en-US/docs/Web/API/Document/pointerenter_event" title="The pointerenter event fires when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a result of a pointerdown event from a device that does not support hover (see pointerdown)."><code>pointerenter</code></a></li><li><a href="/en-US/docs/Web/API/Document/pointerleave_event" title="The pointerleave event is fired when a pointing device is moved out of the hit test boundaries of an element. For pen devices, this event is fired when the stylus leaves the hover range detectable by the digitizer."><code>pointerleave</code></a></li><li><a href="/en-US/docs/Web/API/Document/pointerlockchange_event" title="The pointerlockchange event is fired when the pointer is locked/unlocked."><code>pointerlockchange</code></a></li><li><a href="/en-US/docs/Web/API/Document/pointerlockerror_event" title="The pointerlockerror event is fired when locking the pointer failed (for technical reasons or because the permission was denied)."><code>pointerlockerror</code></a></li><li><a href="/en-US/docs/Web/API/Document/pointermove_event" title="The pointermove event is fired when a pointer changes coordinates, and the pointer has not been canceled by a browser touch-action."><code>pointermove</code></a></li><li><a href="/en-US/docs/Web/API/Document/pointerout_event" title="The pointerout event is fired for several reasons including: pointing device is moved out of the hit test boundaries of an element; firing the pointerup event for a device that does not support hover (see pointerup); after firing the pointercancel event (see pointercancel); when a pen stylus leaves the hover range detectable by the digitizer."><code>pointerout</code></a></li><li><a href="/en-US/docs/Web/API/Document/pointerover_event" title="The pointerover event is fired when a pointing device is moved into an element's hit test boundaries."><code>pointerover</code></a></li><li><a href="/en-US/docs/Web/API/Document/pointerup_event" title="The pointerup event is fired when a pointer is no longer active."><code>pointerup</code></a></li><li><a href="/en-US/docs/Web/API/Document/readystatechange_event" title="The readystatechange event is fired when the readyState attribute of a document has changed."><code>readystatechange</code></a></li><li><a href="/en-US/docs/Web/API/Document/scroll_event" title="The scroll event fires when the document view or an element has been scrolled."><code>scroll</code></a></li><li><a href="/en-US/docs/Web/API/Document/touchcancel_event" title="The touchcancel event is fired when one or more touch points have been disrupted in an implementation-specific manner (for example, too many touch points are created)."><code>touchcancel</code></a></li><li><a href="/en-US/docs/Web/API/Document/touchend_event" title="The touchend event fires when one or more touch points are removed from the touch surface."><code>touchend</code></a></li><li><a href="/en-US/docs/Web/API/Document/touchmove_event" title="The touchmove event is fired when one or more touch points are moved along the touch surface."><code>touchmove</code></a></li><li><a href="/en-US/docs/Web/API/Document/touchstart_event" title="The touchstart event is fired when one or more touch points are placed on the touch surface."><code>touchstart</code></a></li><li><a href="/en-US/docs/Web/API/Document/transitioncancel_event" title="The transitioncancel event is fired when a CSS transition is canceled."><code>transitioncancel</code></a></li><li><a href="/en-US/docs/Web/API/Document/transitionend_event" title="The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the event will not be generated."><code>transitionend</code></a></li><li><a href="/en-US/docs/Web/API/Document/transitionrun_event" title="The transitionrun event is fired when a CSS transition is first created, i.e. before any transition-delay has begun."><code>transitionrun</code></a></li><li><a href="/en-US/docs/Web/API/Document/transitionstart_event" title="The transitionstart event is fired when a CSS transition has actually started, i.e., after any transition-delay has ended."><code>transitionstart</code></a></li><li><a href="/en-US/docs/Web/API/Document/visibilitychange_event" title="The visibilitychange event is fired at the document when the content of its tab have become visible or have been hidden."><code>visibilitychange</code></a></li></ol></details></li><li class="toggle"><details open=""><summary>Inheritance:</summary><ol><li><a href="/en-US/docs/Web/API/Node"><code>Node</code></a></li><li><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></li></ol></details></li><li class="toggle"><details open=""><summary>Related pages for DOM</summary><ol><li><a href="/en-US/docs/Web/API/AbortController"><code>AbortController</code></a></li><li><a href="/en-US/docs/Web/API/AbortSignal"><code>AbortSignal</code></a></li><li><a href="/en-US/docs/Web/API/AbstractRange"><code>AbstractRange</code></a></li><li><a href="/en-US/docs/Web/API/Attr"><code>Attr</code></a></li><li><a href="/en-US/docs/Web/API/ByteString"><code>ByteString</code></a></li><li><a href="/en-US/docs/Web/API/CDATASection"><code>CDATASection</code></a></li><li><a href="/en-US/docs/Web/API/CSSPrimitiveValue"><code>CSSPrimitiveValue</code></a></li><li><a href="/en-US/docs/Web/API/CSSValue"><code>CSSValue</code></a></li><li><a href="/en-US/docs/Web/API/CSSValueList"><code>CSSValueList</code></a></li><li><a href="/en-US/docs/Web/API/CharacterData"><code>CharacterData</code></a></li><li><a href="/en-US/docs/Web/API/ChildNode"><code>ChildNode</code></a></li><li><a href="/en-US/docs/Web/API/Comment"><code>Comment</code></a></li><li><a href="/en-US/docs/Web/API/CustomEvent"><code>CustomEvent</code></a></li><li><a href="/en-US/docs/Web/API/DOMConfiguration"><code>DOMConfiguration</code></a></li><li><a href="/en-US/docs/Web/API/DOMError"><code>DOMError</code></a></li><li><a class="new" href="/en-US/docs/Web/API/DOMErrorHandler" rel="nofollow"><code>DOMErrorHandler</code></a></li><li><a href="/en-US/docs/Web/API/DOMException"><code>DOMException</code></a></li><li><a href="/en-US/docs/Web/API/DOMImplementation"><code>DOMImplementation</code></a></li><li><a href="/en-US/docs/Web/API/DOMImplementationList"><code>DOMImplementationList</code></a></li><li><a class="new" href="/en-US/docs/Web/API/DOMImplementationRegistry" rel="nofollow"><code>DOMImplementationRegistry</code></a></li><li><a class="new" href="/en-US/docs/Web/API/DOMImplementationSource" rel="nofollow"><code>DOMImplementationSource</code></a></li><li><a href="/en-US/docs/Web/API/DOMLocator"><code>DOMLocator</code></a></li><li><a href="/en-US/docs/Web/API/DOMObject"><code>DOMObject</code></a></li><li><a href="/en-US/docs/Web/API/DOMParser"><code>DOMParser</code></a></li><li><a href="/en-US/docs/Web/API/DOMPoint"><code>DOMPoint</code></a></li><li><a href="/en-US/docs/Web/API/DOMPointInit"><code>DOMPointInit</code></a></li><li><a href="/en-US/docs/Web/API/DOMPointReadOnly"><code>DOMPointReadOnly</code></a></li><li><a href="/en-US/docs/Web/API/DOMRect"><code>DOMRect</code></a></li><li><a href="/en-US/docs/Web/API/DOMString"><code>DOMString</code></a></li><li><a href="/en-US/docs/Web/API/DOMTimeStamp"><code>DOMTimeStamp</code></a></li><li><a href="/en-US/docs/Web/API/DOMTokenList"><code>DOMTokenList</code></a></li><li><a href="/en-US/docs/Web/API/DOMUserData"><code>DOMUserData</code></a></li><li><a href="/en-US/docs/Web/API/DocumentFragment"><code>DocumentFragment</code></a></li><li><a href="/en-US/docs/Web/API/DocumentType"><code>DocumentType</code></a></li><li><a href="/en-US/docs/Web/API/Element"><code>Element</code></a></li><li><a href="/en-US/docs/Web/API/ElementTraversal"><code>ElementTraversal</code></a></li><li><a class="new" href="/en-US/docs/Web/API/Entity" rel="nofollow"><code>Entity</code></a></li><li><a class="new" href="/en-US/docs/Web/API/EntityReference" rel="nofollow"><code>EntityReference</code></a></li><li><a href="/en-US/docs/Web/API/Event"><code>Event</code></a></li><li><a href="/en-US/docs/Web/API/EventTarget"><code>EventTarget</code></a></li><li><a href="/en-US/docs/Web/API/HTMLCollection"><code>HTMLCollection</code></a></li><li><a href="/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code></a></li><li><a href="/en-US/docs/Web/API/Node"><code>Node</code></a></li><li><a href="/en-US/docs/Web/API/NodeFilter"><code>NodeFilter</code></a></li><li><a href="/en-US/docs/Web/API/NodeIterator"><code>NodeIterator</code></a></li><li><a href="/en-US/docs/Web/API/NodeList"><code>NodeList</code></a></li><li><a href="/en-US/docs/Web/API/NonDocumentTypeChildNode"><code>NonDocumentTypeChildNode</code></a></li><li><a href="/en-US/docs/Web/API/ProcessingInstruction"><code>ProcessingInstruction</code></a></li><li><a href="/en-US/docs/Web/API/PromiseResolver"><code>PromiseResolver</code></a></li><li><a href="/en-US/docs/Web/API/Range"><code>Range</code></a></li><li><a href="/en-US/docs/Web/API/StaticRange"><code>StaticRange</code></a></li><li><a href="/en-US/docs/Web/API/Text"><code>Text</code></a></li><li><a href="/en-US/docs/Web/API/TextDecoder"><code>TextDecoder</code></a></li><li><a href="/en-US/docs/Web/API/TextEncoder"><code>TextEncoder</code></a></li><li><a href="/en-US/docs/Web/API/TimeRanges"><code>TimeRanges</code></a></li><li><a href="/en-US/docs/Web/API/TreeWalker"><code>TreeWalker</code></a></li><li><a href="/en-US/docs/Web/API/TypeInfo"><code>TypeInfo</code></a></li><li><a href="/en-US/docs/Web/API/USVString"><code>USVString</code></a></li><li><a href="/en-US/docs/Web/API/UserDataHandler"><code>UserDataHandler</code></a></li><li><a href="/en-US/docs/Web/API/XMLDocument"><code>XMLDocument</code></a></li></ol></details></li></ol></div></div></div></div></main><section class="newsletter-container"><div id="newsletter-form-container" class="newsletter"><form class="newsletter-form nodisable" name="newsletter-form"><section class="newsletter-head"><h2 class="newsletter-teaser">Learn the best of web development</h2><p class="newsletter-description">Get the latest and greatest from MDN delivered straight to your inbox.</p><p class="hidden" aria-hidden="true">The newsletter is offered in English only at the moment.</p></section><fieldset class="newsletter-fields"><input type="hidden" name="fmt" value="H"><input type="hidden" name="newsletters" value="app-dev"><div class="form-group newsletter-group-email"><label for="newsletter-email-input" class="form-label offscreen">E-mail</label><input type="email" id="newsletter-email-input" name="email" class="form-input newsletter-input-email" placeholder="you@example.com" required=""></div><div id="newsletter-privacy" class="hidden" aria-hidden="true"><input type="checkbox" id="newsletter-privacy-input" name="privacy" required=""><label for="newsletter-privacy-input">I’m okay with Mozilla handling my info as explained in this <a href="https://www.mozilla.org/privacy/">Privacy Policy</a>.</label></div><div class="newsletter-group-submit"><button id="newsletter-submit" type="submit" class="button neutral newsletter-submit">Sign up now</button></div></fieldset></form><button type="button" class="only-icon newsletter-hide" aria-controls="newsletter-form-container"><span>Hide Newsletter Sign-up</span><svg class="icon icon-close" xmlns="http://www.w3.org/2000/svg" role="presentation" viewBox="0 0 24 28"><path d="M20.281 20.656c0 .391-.156.781-.438 1.062l-2.125 2.125c-.281.281-.672.438-1.062.438s-.781-.156-1.062-.438L11 19.249l-4.594 4.594c-.281.281-.672.438-1.062.438s-.781-.156-1.062-.438l-2.125-2.125c-.281-.281-.438-.672-.438-1.062s.156-.781.438-1.062L6.751 15l-4.594-4.594c-.281-.281-.438-.672-.438-1.062s.156-.781.438-1.062l2.125-2.125c.281-.281.672-.438 1.062-.438s.781.156 1.062.438L11 10.751l4.594-4.594c.281-.281.672-.438 1.062-.438s.781.156 1.062.438l2.125 2.125c.281.281.438.672.438 1.062s-.156.781-.438 1.062L15.249 15l4.594 4.594c.281.281.438.672.438 1.062z"></path></svg></button></div></section><footer id="nav-footer" class="nav-footer"><div class="center"><a href="/en-US/" class="nav-footer-logo">MDN Web Docs</a><div class="footer-group footer-group-mdn"><h2 class="footer-title">MDN</h2><ul class="footer-list"><li><a href="/en-US/docs/Web">Web Technologies</a></li><li><a href="/en-US/docs/Learn">Learn Web Development</a></li><li><a href="/en-US/docs/MDN/About">About MDN</a></li><li><a href="/en-US/docs/MDN/Feedback">Feedback</a></li><li class="footer-social"><a href="https://twitter.com/mozdevnet"><svg class="icon icon-twitter" xmlns="http://www.w3.org/2000/svg" width="26" height="28" aria-label="Twitter" role="img" focusable="false"><path d="M25.312 6.375a10.85 10.85 0 0 1-2.531 2.609c.016.219.016.438.016.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-.828-7.75-2.266.406.047.797.063 1.219.063 2.359 0 4.531-.797 6.266-2.156a5.056 5.056 0 0 1-4.719-3.5c.313.047.625.078.953.078.453 0 .906-.063 1.328-.172a5.048 5.048 0 0 1-4.047-4.953v-.063a5.093 5.093 0 0 0 2.281.641 5.044 5.044 0 0 1-2.25-4.203c0-.938.25-1.797.688-2.547a14.344 14.344 0 0 0 10.406 5.281 5.708 5.708 0 0 1-.125-1.156 5.045 5.045 0 0 1 5.047-5.047 5.03 5.03 0 0 1 3.687 1.594 9.943 9.943 0 0 0 3.203-1.219 5.032 5.032 0 0 1-2.219 2.781c1.016-.109 2-.391 2.906-.781z"></path></svg></a></li><li class="footer-social"><a href="https://github.com/mdn/"><svg class="icon icon-github" xmlns="http://www.w3.org/2000/svg" width="24" height="28" aria-label="GitHub" role="img" focusable="false"><path d="M12 2c6.625 0 12 5.375 12 12 0 5.297-3.437 9.797-8.203 11.391-.609.109-.828-.266-.828-.578 0-.391.016-1.687.016-3.297 0-1.125-.375-1.844-.812-2.219 2.672-.297 5.484-1.313 5.484-5.922 0-1.313-.469-2.375-1.234-3.219.125-.313.531-1.531-.125-3.187-1-.313-3.297 1.234-3.297 1.234a11.28 11.28 0 0 0-6 0S6.704 6.656 5.704 6.969c-.656 1.656-.25 2.875-.125 3.187-.766.844-1.234 1.906-1.234 3.219 0 4.594 2.797 5.625 5.469 5.922-.344.313-.656.844-.766 1.609-.688.313-2.438.844-3.484-1-.656-1.141-1.844-1.234-1.844-1.234-1.172-.016-.078.734-.078.734.781.359 1.328 1.75 1.328 1.75.703 2.141 4.047 1.422 4.047 1.422 0 1 .016 1.937.016 2.234 0 .313-.219.688-.828.578C3.439 23.796.002 19.296.002 13.999c0-6.625 5.375-12 12-12zM4.547 19.234c.031-.063-.016-.141-.109-.187-.094-.031-.172-.016-.203.031-.031.063.016.141.109.187.078.047.172.031.203-.031zm.484.532c.063-.047.047-.156-.031-.25-.078-.078-.187-.109-.25-.047-.063.047-.047.156.031.25.078.078.187.109.25.047zm.469.703c.078-.063.078-.187 0-.297-.063-.109-.187-.156-.266-.094-.078.047-.078.172 0 .281s.203.156.266.109zm.656.656c.063-.063.031-.203-.063-.297-.109-.109-.25-.125-.313-.047-.078.063-.047.203.063.297.109.109.25.125.313.047zm.891.391c.031-.094-.063-.203-.203-.25-.125-.031-.266.016-.297.109s.063.203.203.234c.125.047.266 0 .297-.094zm.984.078c0-.109-.125-.187-.266-.172-.141 0-.25.078-.25.172 0 .109.109.187.266.172.141 0 .25-.078.25-.172zm.906-.156c-.016-.094-.141-.156-.281-.141-.141.031-.234.125-.219.234.016.094.141.156.281.125s.234-.125.219-.219z"></path></svg></a></li></ul></div><a href="https://mozilla.org" class="nav-footer-mozilla">Mozilla</a><div class="footer-group footer-group-mozilla"><h2 class="footer-title">Mozilla</h2><ul class="footer-list"><li><a href="https://www.mozilla.org/about/">About</a></li><li><a href="https://www.mozilla.org/contact/">Contact Us</a></li><li><a href="https://www.mozilla.org/firefox/?utm_source=developer.mozilla.org&amp;utm_campaign=footer&amp;utm_medium=referral">Firefox</a></li><li class="footer-social"><a href="https://twitter.com/mozilla"><svg class="icon icon-twitter" xmlns="http://www.w3.org/2000/svg" width="26" height="28" aria-label="Twitter" role="img" focusable="false"><path d="M25.312 6.375a10.85 10.85 0 0 1-2.531 2.609c.016.219.016.438.016.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-.828-7.75-2.266.406.047.797.063 1.219.063 2.359 0 4.531-.797 6.266-2.156a5.056 5.056 0 0 1-4.719-3.5c.313.047.625.078.953.078.453 0 .906-.063 1.328-.172a5.048 5.048 0 0 1-4.047-4.953v-.063a5.093 5.093 0 0 0 2.281.641 5.044 5.044 0 0 1-2.25-4.203c0-.938.25-1.797.688-2.547a14.344 14.344 0 0 0 10.406 5.281 5.708 5.708 0 0 1-.125-1.156 5.045 5.045 0 0 1 5.047-5.047 5.03 5.03 0 0 1 3.687 1.594 9.943 9.943 0 0 0 3.203-1.219 5.032 5.032 0 0 1-2.219 2.781c1.016-.109 2-.391 2.906-.781z"></path></svg></a></li><li class="footer-social"><a href="https://www.instagram.com/mozillagram/"><svg class="icon icon-instagram" xmlns="http://www.w3.org/2000/svg" width="24" height="28" aria-label="Instagram" role="img" focusable="false"><path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zm2.156 0c0 3.406-2.75 6.156-6.156 6.156S5.844 17.406 5.844 14 8.594 7.844 12 7.844s6.156 2.75 6.156 6.156zm1.688-6.406c0 .797-.641 1.437-1.437 1.437S16.97 8.39 16.97 7.594s.641-1.437 1.437-1.437 1.437.641 1.437 1.437zM12 4.156c-1.75 0-5.5-.141-7.078.484-.547.219-.953.484-1.375.906s-.688.828-.906 1.375c-.625 1.578-.484 5.328-.484 7.078s-.141 5.5.484 7.078c.219.547.484.953.906 1.375s.828.688 1.375.906c1.578.625 5.328.484 7.078.484s5.5.141 7.078-.484c.547-.219.953-.484 1.375-.906s.688-.828.906-1.375c.625-1.578.484-5.328.484-7.078s.141-5.5-.484-7.078c-.219-.547-.484-.953-.906-1.375s-.828-.688-1.375-.906C17.5 4.015 13.75 4.156 12 4.156zM24 14c0 1.656.016 3.297-.078 4.953-.094 1.922-.531 3.625-1.937 5.031s-3.109 1.844-5.031 1.937c-1.656.094-3.297.078-4.953.078s-3.297.016-4.953-.078c-1.922-.094-3.625-.531-5.031-1.937S.173 20.875.08 18.953C-.014 17.297.002 15.656.002 14s-.016-3.297.078-4.953c.094-1.922.531-3.625 1.937-5.031s3.109-1.844 5.031-1.937c1.656-.094 3.297-.078 4.953-.078s3.297-.016 4.953.078c1.922.094 3.625.531 5.031 1.937s1.844 3.109 1.937 5.031C24.016 10.703 24 12.344 24 14z"></path></svg></a></li></ul></div><ul class="footer-tos"><li><a href="https://www.mozilla.org/about/legal/terms/mozilla">Terms</a></li><li><a href="https://www.mozilla.org/privacy/websites/">Privacy</a></li><li><a href="https://www.mozilla.org/privacy/websites/#cookies">Cookies</a></li></ul><div id="license" class="contentinfo"><p>© 2005-<!-- -->2020<!-- --> Mozilla and individual contributors.</p><p>Content is available under<!-- --> <a href="/docs/MDN/About#Copyrights_and_licenses">these licenses</a>.</p></div></div></footer></div>

Script Preparation code:

var walker = document.createTreeWalker(document, 128 /** NodeFilter.SHOW_COMMENT */);

Tests:

Comment Walker
walker.currentNode = document; while (walker.nextNode()) { if (walker.currentNode.data === "findme") break; }
XPath
document.evaluate("//comment()[. = 'findme']", document, null, 9);
querySelector attr
document.querySelector("[itemprop='findme']")
querySelector class
document.querySelector(".findme")
querySelector id
document.querySelector("#findme")
getElementById
document.getElementById("findme")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Comment Walker
XPath
querySelector attr
querySelector class
querySelector id
getElementById

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36

Browser/OS: Chrome 101 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Comment Walker	176196.7 Ops/sec
XPath	46276.9 Ops/sec
querySelector attr	175561.6 Ops/sec
querySelector class	345480.4 Ops/sec
querySelector id	249271.9 Ops/sec
getElementById	9310479.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Related benchmarks:

Find a comment 3 (version: 0)

fastest way to find a comment

Comparing performance of: Comment Walker vs XPath vs querySelector attr vs querySelector class vs querySelector id vs getElementById

Created: 2 years ago by: Guest

Jump to the latest result

Comment Walker

XPath

querySelector attr

querySelector class

querySelector id

getElementById

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):