353 lines
53 KiB
HTML
353 lines
53 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Zk | ctm-406</title>
|
|
<link rel="stylesheet" type="text/css" href="/style.css" />
|
|
<meta name="viewport" content="width=device-width" />
|
|
<meta charset="utf-8" />
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<header>
|
|
<h1>Zk | ctm-406</h1>
|
|
</header>
|
|
<article class="content">
|
|
<h3 id="introduction">Introduction</h3>
|
|
<p>In <a href="https://www.digitalocean.com/community/tutorials/understanding-the-dom-tree-and-nodes">Understanding the DOM Tree and Nodes</a>, we went over how the DOM is structured as a tree of objects called nodes, and that nodes can be text, comments, or elements. Usually when we access content in the DOM, it will be through an HTML element node.</p>
|
|
<p>In order to be confident in accessing elements in the DOM, it’s good to have a working knowledge of CSS selectors, syntax and terminology as well as an understanding of HTML elements. In this tutorial, you will learn several ways to access elements in the DOM: by ID, class, tag, and query selectors.</p>
|
|
<h2 id="overview">Overview</h2>
|
|
<p>Here is a table overview of the five methods we will cover in this tutorial.</p>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Gets</th>
|
|
<th>Selector Syntax</th>
|
|
<th>Method</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>ID</td>
|
|
<td><code>#demo</code></td>
|
|
<td><code>getElementById()</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Class</td>
|
|
<td><code>.demo</code></td>
|
|
<td><code>getElementsByClassName()</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tag</td>
|
|
<td><code>demo</code></td>
|
|
<td><code>getElementsByTagName()</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Selector (single)</td>
|
|
<td></td>
|
|
<td><code>querySelector()</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Selector (all)</td>
|
|
<td></td>
|
|
<td><code>querySelectorAll()</code></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p>It is helpful when studying the DOM to work with the examples on your own to ensure that you are understanding and retaining the information you learn.</p>
|
|
<p>Create a new file, <code>access.html</code>, in your own project to work through the examples along with this article. If you are unsure how to work with JavaScript and HTML locally, review our <a href="https://www.digitalocean.com/community/tutorials/how-to-add-javascript-to-html">How To Add JavaScript to HTML</a> tutorial.</p>
|
|
<div class="codehilite"><pre><span></span><code>[label access.html]
|
|
<span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Accessing Elements in the DOM<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">style</span><span class="p">></span><span class="w"></span>
|
|
<span class="w"> </span><span class="nt">html</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#333</span><span class="p">;</span><span class="w"> </span><span class="p">}</span><span class="w"></span>
|
|
<span class="w"> </span><span class="nt">body</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">max-width</span><span class="p">:</span><span class="w"> </span><span class="mi">500</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="kc">auto</span><span class="p">;</span><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="p">}</span><span class="w"></span>
|
|
<span class="w"> </span><span class="nt">div</span><span class="o">,</span><span class="w"> </span><span class="nt">article</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mh">#dedede</span><span class="p">;</span><span class="w"> </span><span class="p">}</span><span class="w"></span>
|
|
<span class="w"> </span><span class="p"></</span><span class="nt">style</span><span class="p">></span>
|
|
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">h1</span><span class="p">></span>Accessing Elements in the DOM<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>ID (#demo)<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"demo"</span><span class="p">></span>Access me by ID<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>Class (.demo)<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"demo"</span><span class="p">></span>Access me by class (1)<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"demo"</span><span class="p">></span>Access me by class (2)<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>Tag (article)<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">article</span><span class="p">></span>Access me by tag (1)<span class="p"></</span><span class="nt">article</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">article</span><span class="p">></span>Access me by tag (2)<span class="p"></</span><span class="nt">article</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>Query Selector<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"demo-query"</span><span class="p">></span>Access me by query<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>Query Selector All<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"demo-query-all"</span><span class="p">></span>Access me by query all (1)<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"demo-query-all"</span><span class="p">></span>Access me by query all (2)<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
|
|
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
|
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
|
|
<p>In this HTML file, we have many elements that we will access with different <code>document</code> methods. When we render the file in a browser, it will look similar to this:</p>
|
|
<p><img alt="Browser rendering of access.html page" src="https://assets.digitalocean.com/articles/eng_javascript/dom/html-rendering.png" /></p>
|
|
<p>We’ll be using the different methods that we outlined in the <a href="https://www.digitalocean.com/community/tutorials/how-to-access-elements-in-the-dom#overview">Overview</a> above to access the available elements in the file.</p>
|
|
<h2 id="accessing-elements-by-id">Accessing Elements by ID</h2>
|
|
<p>The easiest way to access a single element in the DOM is by its unique <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id">ID</a>. You can get an element by ID with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById"><code>getElementById()</code></a> method of the <code>document</code> object.</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">();</span>
|
|
</code></pre></div>
|
|
|
|
<p>In order to be accessed by ID, the HTML element must have an <code>id</code> attribute. You have a <code>div</code> element with an ID of <code>demo</code> you can use:</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"demo"</span><span class="p">></span>Access me by ID<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div>
|
|
|
|
<p>In the <em>Console</em>, get the element and assign it to the <code>demoId</code> variable.</p>
|
|
<p>```custom_prefix(>)
|
|
const demoId = document.getElementById(‘demo’);</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="n">Logging</span><span class="w"> </span><span class="n n-Quoted">`demoId`</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">console</span><span class="w"> </span><span class="n">will</span><span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="n">our</span><span class="w"> </span><span class="n">entire</span><span class="w"> </span><span class="n">HTML</span><span class="w"> </span><span class="n">element</span><span class="p">.</span><span class="w"></span>
|
|
|
|
<span class="n n-Quoted">`</span><span class="n n-Quoted n-Quoted-Escape">``</span><span class="n n-Quoted">custom_prefix(>)</span>
|
|
<span class="n n-Quoted">console.log(demoId);</span>
|
|
</code></pre></div>
|
|
|
|
<div class="codehilite"><pre><span></span><code><span class="k">[secondary_label Output]</span><span class="w"></span>
|
|
<span class="na"><div id</span><span class="o">=</span><span class="s">"demo">Access me by ID</div></span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>You can be sure you’re accessing the correct element by changing the <code>border</code> property to <code>purple</code>.</p>
|
|
<p>```custom_prefix(>)
|
|
demoId.style.border = ‘1px solid purple’;</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="n">Once</span><span class="w"> </span><span class="n">you</span><span class="w"> </span><span class="n">do</span><span class="w"> </span><span class="n">so</span><span class="p">,</span><span class="w"> </span><span class="n">your</span><span class="w"> </span><span class="n">live</span><span class="w"> </span><span class="n">page</span><span class="w"> </span><span class="n">will</span><span class="w"> </span><span class="n">look</span><span class="w"> </span><span class="ow">like</span><span class="w"> </span><span class="nl">this</span><span class="p">:</span><span class="w"></span>
|
|
|
|
<span class="err">!</span><span class="o">[</span><span class="n">Browser rendering of ID element styling</span><span class="o">]</span><span class="p">(</span><span class="nl">https</span><span class="p">:</span><span class="o">//</span><span class="n">assets</span><span class="p">.</span><span class="n">digitalocean</span><span class="p">.</span><span class="n">com</span><span class="o">/</span><span class="n">articles</span><span class="o">/</span><span class="n">eng_javascript</span><span class="o">/</span><span class="n">dom</span><span class="o">/</span><span class="n">id</span><span class="o">-</span><span class="k">element</span><span class="p">.</span><span class="n">png</span><span class="p">)</span><span class="w"></span>
|
|
|
|
<span class="n">Accessing</span><span class="w"> </span><span class="n">an</span><span class="w"> </span><span class="k">element</span><span class="w"> </span><span class="k">by</span><span class="w"> </span><span class="n">ID</span><span class="w"> </span><span class="k">is</span><span class="w"> </span><span class="n">an</span><span class="w"> </span><span class="n">effective</span><span class="w"> </span><span class="n">way</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="k">get</span><span class="w"> </span><span class="n">an</span><span class="w"> </span><span class="k">element</span><span class="w"> </span><span class="n">quickly</span><span class="w"> </span><span class="ow">in</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">DOM</span><span class="p">.</span><span class="w"> </span><span class="n">However</span><span class="p">,</span><span class="w"> </span><span class="n">it</span><span class="w"> </span><span class="n">has</span><span class="w"> </span><span class="nl">drawbacks</span><span class="p">:</span><span class="w"> </span><span class="n">an</span><span class="w"> </span><span class="n">ID</span><span class="w"> </span><span class="n">must</span><span class="w"> </span><span class="n">always</span><span class="w"> </span><span class="n">be</span><span class="w"> </span><span class="k">unique</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">page</span><span class="p">,</span><span class="w"> </span><span class="ow">and</span><span class="w"> </span><span class="n">therefore</span><span class="w"> </span><span class="n">you</span><span class="w"> </span><span class="n">will</span><span class="w"> </span><span class="k">only</span><span class="w"> </span><span class="n">ever</span><span class="w"> </span><span class="n">be</span><span class="w"> </span><span class="n">able</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="n">access</span><span class="w"> </span><span class="n">a</span><span class="w"> </span><span class="n">single</span><span class="w"> </span><span class="k">element</span><span class="w"> </span><span class="k">at</span><span class="w"> </span><span class="n">a</span><span class="w"> </span><span class="nc">time</span><span class="w"> </span><span class="k">with</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="err">`</span><span class="n">getElementById</span><span class="p">()</span><span class="err">`</span><span class="w"> </span><span class="k">method</span><span class="p">.</span><span class="w"> </span><span class="k">If</span><span class="w"> </span><span class="n">you</span><span class="w"> </span><span class="n">wanted</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="k">add</span><span class="w"> </span><span class="n">a</span><span class="w"> </span><span class="k">function</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="n">many</span><span class="w"> </span><span class="n">elements</span><span class="w"> </span><span class="n">throughout</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">page</span><span class="p">,</span><span class="w"> </span><span class="n">your</span><span class="w"> </span><span class="n">code</span><span class="w"> </span><span class="n">would</span><span class="w"> </span><span class="n">quickly</span><span class="w"> </span><span class="n">become</span><span class="w"> </span><span class="n">repetitious</span><span class="p">.</span><span class="w"></span>
|
|
|
|
<span class="err">##</span><span class="w"> </span><span class="n">Accessing</span><span class="w"> </span><span class="n">Elements</span><span class="w"> </span><span class="k">by</span><span class="w"> </span><span class="k">Class</span><span class="w"></span>
|
|
|
|
<span class="n">The</span><span class="w"> </span><span class="o">[</span><span class="n">class</span><span class="o">]</span><span class="p">(</span><span class="nl">https</span><span class="p">:</span><span class="o">//</span><span class="n">developer</span><span class="p">.</span><span class="n">mozilla</span><span class="p">.</span><span class="n">org</span><span class="o">/</span><span class="n">en</span><span class="o">-</span><span class="n">US</span><span class="o">/</span><span class="n">docs</span><span class="o">/</span><span class="n">Web</span><span class="o">/</span><span class="n">HTML</span><span class="o">/</span><span class="n">Global_attributes</span><span class="o">/</span><span class="k">class</span><span class="p">)</span><span class="w"> </span><span class="n">attribute</span><span class="w"> </span><span class="k">is</span><span class="w"> </span><span class="n">used</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="n">access</span><span class="w"> </span><span class="n">one</span><span class="w"> </span><span class="ow">or</span><span class="w"> </span><span class="n">more</span><span class="w"> </span><span class="k">specific</span><span class="w"> </span><span class="n">elements</span><span class="w"> </span><span class="ow">in</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">DOM</span><span class="p">.</span><span class="w"> </span><span class="n">You</span><span class="w"> </span><span class="n">can</span><span class="w"> </span><span class="k">get</span><span class="w"> </span><span class="ow">all</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">elements</span><span class="w"> </span><span class="k">with</span><span class="w"> </span><span class="n">a</span><span class="w"> </span><span class="n">given</span><span class="w"> </span><span class="k">class</span><span class="w"> </span><span class="n">name</span><span class="w"> </span><span class="k">with</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="o">[</span><span class="n">`getElementsByClassName()`</span><span class="o">]</span><span class="p">(</span><span class="nl">https</span><span class="p">:</span><span class="o">//</span><span class="n">developer</span><span class="p">.</span><span class="n">mozilla</span><span class="p">.</span><span class="n">org</span><span class="o">/</span><span class="n">en</span><span class="o">-</span><span class="n">US</span><span class="o">/</span><span class="n">docs</span><span class="o">/</span><span class="n">Web</span><span class="o">/</span><span class="n">API</span><span class="o">/</span><span class="n">Document</span><span class="o">/</span><span class="n">getElementsByClassName</span><span class="p">)</span><span class="w"> </span><span class="k">method</span><span class="p">.</span><span class="w"></span>
|
|
|
|
<span class="err">```</span><span class="n">js</span><span class="w"></span>
|
|
<span class="n">document</span><span class="p">.</span><span class="n">getElementsByClassName</span><span class="p">();</span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>Now we want to access more than one element, and in our example we have two elements with a <code>demo</code> class.</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"demo"</span><span class="p">></span>Access me by class (1)<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"demo"</span><span class="p">></span>Access me by class (2)<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div>
|
|
|
|
<p>Access these elements in the <em>Console</em> and put them in a variable called <code>demoClass</code>.</p>
|
|
<p>```custom_prefix(>)
|
|
const demoClass = document.getElementsByClassName(‘demo’);</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="k">At</span><span class="w"> </span><span class="n">this</span><span class="w"> </span><span class="kt">point</span><span class="p">,</span><span class="w"> </span><span class="n">it</span><span class="w"> </span><span class="n">might</span><span class="w"> </span><span class="n">be</span><span class="w"> </span><span class="n">tempting</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="k">modify</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">elements</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">same</span><span class="w"> </span><span class="n">way</span><span class="w"> </span><span class="n">you</span><span class="w"> </span><span class="n">did</span><span class="w"> </span><span class="k">with</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">ID</span><span class="w"> </span><span class="n">example</span><span class="p">.</span><span class="w"> </span><span class="n">However</span><span class="p">,</span><span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="n">you</span><span class="w"> </span><span class="n">try</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="n">run</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="k">following</span><span class="w"> </span><span class="k">code</span><span class="w"> </span><span class="k">and</span><span class="w"> </span><span class="k">change</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n n-Quoted">`border`</span><span class="w"> </span><span class="n">property</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">class</span><span class="w"> </span><span class="n">demo</span><span class="w"> </span><span class="n">elements</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="n">orange</span><span class="p">,</span><span class="w"> </span><span class="n">you</span><span class="w"> </span><span class="n">will</span><span class="w"> </span><span class="k">get</span><span class="w"> </span><span class="n">an</span><span class="w"> </span><span class="k">error</span><span class="p">.</span><span class="w"></span>
|
|
|
|
<span class="n n-Quoted">`</span><span class="n n-Quoted n-Quoted-Escape">``</span><span class="n n-Quoted">custom_prefix(>)</span>
|
|
<span class="n n-Quoted">demoClass.style.border = '1px solid orange';</span>
|
|
</code></pre></div>
|
|
|
|
<div class="codehilite"><pre><span></span><code><span class="k">[secondary_label Output]</span><span class="w"></span>
|
|
<span class="na">Uncaught TypeError: Cannot set property 'border' of undefined</span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>The reason this doesn’t work is because instead of just getting one element, you have an array-like object of elements.</p>
|
|
<p>```custom_prefix(>)
|
|
console.log(demoClass);</p>
|
|
<div class="codehilite"><pre><span></span><code>
|
|
</code></pre></div>
|
|
|
|
<p>[secondary_label Output]
|
|
(2) [div.demo, div.demo]</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="p">[</span><span class="n">JavaScript</span><span class="w"> </span><span class="n">arrays</span><span class="p">](</span><span class="n">https</span><span class="o">:</span><span class="c1">//www.digitalocean.com/community/tutorials/understanding-arrays-in-javascript) must be accessed with an index number. You can change the first element of this array by using an index of `0`.</span>
|
|
|
|
<span class="err">```</span><span class="n">custom_prefix</span><span class="p">(</span><span class="o">></span><span class="p">)</span><span class="w"></span>
|
|
<span class="n">demoClass</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="n">style</span><span class="p">.</span><span class="n">border</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="err">'</span><span class="mi">1</span><span class="n">px</span><span class="w"> </span><span class="n">solid</span><span class="w"> </span><span class="n">orange</span><span class="err">'</span><span class="p">;</span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>Generally when accessing elements by class, we want to apply a change to all the elements in the document with that particular class, not just one. You can do this by creating a <code>for</code> loop, and looping through every item in the array. </p>
|
|
<p>```custom_prefix(>)
|
|
for (i = 0; i < demoClass.length; i++) {
|
|
demoClass[i].style.border = ‘1px solid orange’;
|
|
}</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="k">When</span><span class="w"> </span><span class="n">you</span><span class="w"> </span><span class="n">run</span><span class="w"> </span><span class="n">this</span><span class="w"> </span><span class="k">code</span><span class="p">,</span><span class="w"> </span><span class="n">your</span><span class="w"> </span><span class="n">live</span><span class="w"> </span><span class="k">page</span><span class="w"> </span><span class="n">will</span><span class="w"> </span><span class="n">be</span><span class="w"> </span><span class="n">rendered</span><span class="w"> </span><span class="k">like</span><span class="w"> </span><span class="n">this</span><span class="o">:</span><span class="w"></span>
|
|
|
|
<span class="o">!</span><span class="err">[</span><span class="n">Browser</span><span class="w"> </span><span class="n">rendering</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="n">class</span><span class="w"> </span><span class="n">element</span><span class="w"> </span><span class="n">styling</span><span class="err">]</span><span class="p">(</span><span class="n">https</span><span class="o">://</span><span class="n">assets</span><span class="p">.</span><span class="n">digitalocean</span><span class="p">.</span><span class="n">com</span><span class="o">/</span><span class="n">articles</span><span class="o">/</span><span class="n">eng_javascript</span><span class="o">/</span><span class="n">dom</span><span class="o">/</span><span class="n">class</span><span class="o">-</span><span class="n">element</span><span class="p">.</span><span class="n">png</span><span class="p">)</span><span class="w"></span>
|
|
|
|
<span class="n">You</span><span class="w"> </span><span class="n">have</span><span class="w"> </span><span class="n">now</span><span class="w"> </span><span class="n">selected</span><span class="w"> </span><span class="k">every</span><span class="w"> </span><span class="n">element</span><span class="w"> </span><span class="k">on</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="k">page</span><span class="w"> </span><span class="n">that</span><span class="w"> </span><span class="n">has</span><span class="w"> </span><span class="n">a</span><span class="w"> </span><span class="n n-Quoted">`demo`</span><span class="w"> </span><span class="n">class</span><span class="p">,</span><span class="w"> </span><span class="k">and</span><span class="w"> </span><span class="k">changed</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n n-Quoted">`border`</span><span class="w"> </span><span class="n">property</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="n n-Quoted">`orange`</span><span class="p">.</span><span class="w"></span>
|
|
|
|
<span class="c1">## Accessing Elements by Tag</span><span class="w"></span>
|
|
|
|
<span class="n">A</span><span class="w"> </span><span class="k">less</span><span class="w"> </span><span class="k">specific</span><span class="w"> </span><span class="n">way</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="n">access</span><span class="w"> </span><span class="n">multiple</span><span class="w"> </span><span class="n">elements</span><span class="w"> </span><span class="k">on</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="k">page</span><span class="w"> </span><span class="n">would</span><span class="w"> </span><span class="n">be</span><span class="w"> </span><span class="k">by</span><span class="w"> </span><span class="n">its</span><span class="w"> </span><span class="n">HTML</span><span class="w"> </span><span class="n">tag</span><span class="w"> </span><span class="k">name</span><span class="p">.</span><span class="w"> </span><span class="n">You</span><span class="w"> </span><span class="n">access</span><span class="w"> </span><span class="n">an</span><span class="w"> </span><span class="n">element</span><span class="w"> </span><span class="k">by</span><span class="w"> </span><span class="n">tag</span><span class="w"> </span><span class="k">with</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="err">[</span><span class="n n-Quoted">`getElementsByTagName()`</span><span class="err">]</span><span class="p">(</span><span class="n">https</span><span class="o">://</span><span class="n">developer</span><span class="p">.</span><span class="n">mozilla</span><span class="p">.</span><span class="n">org</span><span class="o">/</span><span class="n">en</span><span class="o">-</span><span class="n">US</span><span class="o">/</span><span class="n">docs</span><span class="o">/</span><span class="n">Web</span><span class="o">/</span><span class="n">API</span><span class="o">/</span><span class="n">Element</span><span class="o">/</span><span class="n">getElementsByTagName</span><span class="p">)</span><span class="w"> </span><span class="n">method</span><span class="p">.</span><span class="w"></span>
|
|
|
|
<span class="n n-Quoted">`</span><span class="n n-Quoted n-Quoted-Escape">``</span><span class="n n-Quoted">js</span>
|
|
<span class="n n-Quoted">document.getElementsByTagName();</span>
|
|
</code></pre></div>
|
|
|
|
<p>For our tag example, we’re using <code>article</code> elements.</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="nt"><article></span>Access me by tag (1)<span class="nt"></article></span>
|
|
<span class="nt"><article></span>Access me by tag (2)<span class="nt"></article></span>
|
|
</code></pre></div>
|
|
|
|
<p>Just like accessing an element by its class, <code>getElementsByTagName()</code> will return an array-like object of elements, and you can modify every tag in the document with a <code>for</code> loop.</p>
|
|
<p>```custom_prefix(>)
|
|
const demoTag = document.getElementsByTagName(‘article’);</p>
|
|
<p>for (i = 0; i < demoTag.length; i++) {
|
|
demoTag[i].style.border = ‘1px solid blue’;
|
|
}</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="n">Upon</span><span class="w"> </span><span class="n">running</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="k">code</span><span class="p">,</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">live</span><span class="w"> </span><span class="k">page</span><span class="w"> </span><span class="n">will</span><span class="w"> </span><span class="n">be</span><span class="w"> </span><span class="n">modified</span><span class="w"> </span><span class="k">like</span><span class="w"> </span><span class="n">so</span><span class="o">:</span><span class="w"></span>
|
|
|
|
<span class="o">!</span><span class="err">[</span><span class="n">Browser</span><span class="w"> </span><span class="n">rendering</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="n">tag</span><span class="w"> </span><span class="n">element</span><span class="w"> </span><span class="n">styling</span><span class="err">]</span><span class="p">(</span><span class="n">https</span><span class="o">://</span><span class="n">assets</span><span class="p">.</span><span class="n">digitalocean</span><span class="p">.</span><span class="n">com</span><span class="o">/</span><span class="n">articles</span><span class="o">/</span><span class="n">eng_javascript</span><span class="o">/</span><span class="n">dom</span><span class="o">/</span><span class="n">tag</span><span class="o">-</span><span class="n">element</span><span class="p">.</span><span class="n">png</span><span class="p">)</span><span class="w"></span>
|
|
|
|
<span class="n">The</span><span class="w"> </span><span class="k">loop</span><span class="w"> </span><span class="k">changed</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n n-Quoted">`border`</span><span class="w"> </span><span class="n">property</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="k">all</span><span class="w"> </span><span class="n n-Quoted">`article`</span><span class="w"> </span><span class="n">elements</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="n n-Quoted">`blue`</span><span class="p">.</span><span class="w"></span>
|
|
|
|
<span class="c1">## Query Selectors</span><span class="w"></span>
|
|
|
|
<span class="k">If</span><span class="w"> </span><span class="n">you</span><span class="w"> </span><span class="n">have</span><span class="w"> </span><span class="k">any</span><span class="w"> </span><span class="n">experience</span><span class="w"> </span><span class="k">with</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="err">[</span><span class="n">jQuery</span><span class="err">]</span><span class="p">(</span><span class="n">https</span><span class="o">://</span><span class="n">jquery</span><span class="p">.</span><span class="n">com</span><span class="o">/</span><span class="p">)</span><span class="w"> </span><span class="n">API</span><span class="p">,</span><span class="w"> </span><span class="n">you</span><span class="w"> </span><span class="n">may</span><span class="w"> </span><span class="n">be</span><span class="w"> </span><span class="n">familiar</span><span class="w"> </span><span class="k">with</span><span class="w"> </span><span class="n">jQuery</span><span class="s1">'s method of accessing the DOM with CSS selectors.</span>
|
|
|
|
<span class="s1">```js</span>
|
|
<span class="s1">$('</span><span class="c1">#demo'); // returns the demo ID element in jQuery</span><span class="w"></span>
|
|
</code></pre></div>
|
|
|
|
<p>You can do the same in plain JavaScript with the <code>querySelector()</code> and <code>querySelectorAll()</code> methods.</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">();</span>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">();</span>
|
|
</code></pre></div>
|
|
|
|
<p>To access a single element, you can use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector"><code>querySelector()</code></a> method. In our HTML file, we have a <code>demo-query</code> element</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"demo-query"</span><span class="p">></span>Access me by query<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
</code></pre></div>
|
|
|
|
<p>The selector for an <code>id</code> attribute is the hash symbol (<code>#</code>). You can assign the element with the <code>demo-query</code> id to the <code>demoQuery</code> variable.</p>
|
|
<p>```custom_prefix(>)
|
|
const demoQuery = document.querySelector(‘#demo-query’);</p>
|
|
<div class="codehilite"><pre><span></span><code>In the case of a selector with multiple elements, such as a class or a tag, `querySelector()` will return the first element that matches the query. You can use the [`querySelectorAll()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) method to collect all the elements that match a specific query.
|
|
|
|
In the example file, you have two elements with the `demo-query-all` class applied to them.
|
|
|
|
```html
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"demo-query-all"</span><span class="nt">></span>Access me by query all (1)<span class="nt"></div></span>
|
|
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"demo-query-all"</span><span class="nt">></span>Access me by query all (2)<span class="nt"></div></span>
|
|
</code></pre></div>
|
|
|
|
<p>The selector for a <code>class</code> attribute is a period or full stop (<code>.</code>), so you can access the class with <code>.demo-query-all</code>.</p>
|
|
<p>```custom_prefix(>)
|
|
const demoQueryAll = document.querySelectorAll(‘.demo-query-all’);</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="k">Using</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n n-Quoted">`forEach()`</span><span class="w"> </span><span class="n">method</span><span class="p">,</span><span class="w"> </span><span class="n">you</span><span class="w"> </span><span class="n">can</span><span class="w"> </span><span class="n">apply</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n">color</span><span class="w"> </span><span class="n n-Quoted">`green`</span><span class="w"> </span><span class="k">to</span><span class="w"> </span><span class="n">the</span><span class="w"> </span><span class="n n-Quoted">`border`</span><span class="w"> </span><span class="n">property</span><span class="w"> </span><span class="k">of</span><span class="w"> </span><span class="k">all</span><span class="w"> </span><span class="n">matching</span><span class="w"> </span><span class="n">elements</span><span class="p">.</span><span class="w"></span>
|
|
|
|
<span class="n n-Quoted">`</span><span class="n n-Quoted n-Quoted-Escape">``</span><span class="n n-Quoted">custom_prefix(>)</span>
|
|
<span class="n n-Quoted">demoQueryAll.forEach(query => {</span>
|
|
<span class="n n-Quoted"> query.style.border = '1px solid green';</span>
|
|
<span class="n n-Quoted">});</span>
|
|
</code></pre></div>
|
|
|
|
<p><img alt="Browser rendering of querySelector() styling" src="https://assets.digitalocean.com/articles/eng_javascript/dom/query-selector.png" /></p>
|
|
<p>With <code>querySelector()</code>, comma-separated values function as an OR operator. For example, <code>querySelector('div, article')</code> will match <code>div</code> <em>or</em> <code>article</code>, whichever appears first in the document. With <code>querySelectorAll()</code>, comma-separated values function as an AND operator, and <code>querySelectorAll('div, article')</code> will match all <code>div</code> <em>and</em> <code>article</code> values in the document.</p>
|
|
<p>Using the query selector methods is extremely powerful, as you can access any element or group of elements in the DOM the same way you would in a CSS file. For a complete list of selectors, review <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors">CSS Selectors</a> on the Mozilla Developer Network.</p>
|
|
<h2 id="complete-javascript-code">Complete JavaScript Code</h2>
|
|
<p>Below is the complete script of the work you did above. You can use it to access all the elements on our example page. Save the file as <code>access.js</code> and load it in to the HTML file right before the closing <code>body</code> tag.</p>
|
|
<div class="codehilite"><pre><span></span><code><span class="p">[</span><span class="nx">label</span> <span class="nx">access</span><span class="p">.</span><span class="nx">js</span><span class="p">]</span>
|
|
<span class="c1">// Assign all elements</span>
|
|
<span class="kd">const</span> <span class="nx">demoId</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'demo'</span><span class="p">);</span>
|
|
<span class="kd">const</span> <span class="nx">demoClass</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'demo'</span><span class="p">);</span>
|
|
<span class="kd">const</span> <span class="nx">demoTag</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'article'</span><span class="p">);</span>
|
|
<span class="kd">const</span> <span class="nx">demoQuery</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'#demo-query'</span><span class="p">);</span>
|
|
<span class="kd">const</span> <span class="nx">demoQueryAll</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelectorAll</span><span class="p">(</span><span class="s1">'.demo-query-all'</span><span class="p">);</span>
|
|
|
|
<span class="c1">// Change border of ID demo to purple</span>
|
|
<span class="nx">demoId</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">border</span> <span class="o">=</span> <span class="s1">'1px solid purple'</span><span class="p">;</span>
|
|
|
|
<span class="c1">// Change border of class demo to orange</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">demoClass</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">demoClass</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">border</span> <span class="o">=</span> <span class="s1">'1px solid orange'</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="c1">// Change border of tag demo to blue</span>
|
|
<span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="nx">demoTag</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
|
|
<span class="nx">demoTag</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">style</span><span class="p">.</span><span class="nx">border</span> <span class="o">=</span> <span class="s1">'1px solid blue'</span><span class="p">;</span>
|
|
<span class="p">}</span>
|
|
|
|
<span class="c1">// Change border of ID demo-query to red</span>
|
|
<span class="nx">demoQuery</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">border</span> <span class="o">=</span> <span class="s1">'1px solid red'</span><span class="p">;</span>
|
|
|
|
<span class="c1">// Change border of class query-all to green</span>
|
|
<span class="nx">demoQueryAll</span><span class="p">.</span><span class="nx">forEach</span><span class="p">(</span><span class="nx">query</span> <span class="p">=></span> <span class="p">{</span>
|
|
<span class="nx">query</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">border</span> <span class="o">=</span> <span class="s1">'1px solid green'</span><span class="p">;</span>
|
|
<span class="p">});</span>
|
|
</code></pre></div>
|
|
|
|
<p>Your final HTML file will look like this:</p>
|
|
<div class="codehilite"><pre><span></span><code>[label access.html]
|
|
<span class="cp"><!DOCTYPE html></span>
|
|
<span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"en"</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">head</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"viewport"</span> <span class="na">content</span><span class="o">=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">title</span><span class="p">></span>Accessing Elements in the DOM<span class="p"></</span><span class="nt">title</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">style</span><span class="p">></span><span class="w"></span>
|
|
<span class="w"> </span><span class="nt">html</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">font-family</span><span class="p">:</span><span class="w"> </span><span class="kc">sans-serif</span><span class="p">;</span><span class="w"> </span><span class="k">color</span><span class="p">:</span><span class="w"> </span><span class="mh">#333</span><span class="p">;</span><span class="w"> </span><span class="p">}</span><span class="w"></span>
|
|
<span class="w"> </span><span class="nt">body</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">max-width</span><span class="p">:</span><span class="w"> </span><span class="mi">500</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="kc">auto</span><span class="p">;</span><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">0</span><span class="w"> </span><span class="mi">15</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="p">}</span><span class="w"></span>
|
|
<span class="w"> </span><span class="nt">div</span><span class="o">,</span><span class="w"> </span><span class="nt">article</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="k">padding</span><span class="p">:</span><span class="w"> </span><span class="mi">10</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="k">margin</span><span class="p">:</span><span class="w"> </span><span class="mi">5</span><span class="kt">px</span><span class="p">;</span><span class="w"> </span><span class="k">border</span><span class="p">:</span><span class="w"> </span><span class="mi">1</span><span class="kt">px</span><span class="w"> </span><span class="kc">solid</span><span class="w"> </span><span class="mh">#dedede</span><span class="p">;</span><span class="w"> </span><span class="p">}</span><span class="w"></span>
|
|
<span class="w"> </span><span class="p"></</span><span class="nt">style</span><span class="p">></span>
|
|
|
|
<span class="p"></</span><span class="nt">head</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">body</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">h1</span><span class="p">></span>Accessing Elements in the DOM<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>ID (#demo)<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"demo"</span><span class="p">></span>Access me by ID<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>Class (.demo)<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"demo"</span><span class="p">></span>Access me by class (1)<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"demo"</span><span class="p">></span>Access me by class (2)<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>Tag (article)<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">article</span><span class="p">></span>Access me by tag (1)<span class="p"></</span><span class="nt">article</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">article</span><span class="p">></span>Access me by tag (2)<span class="p"></</span><span class="nt">article</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>Query Selector<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"demo-query"</span><span class="p">></span>Access me by query<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">h2</span><span class="p">></span>Query Selector All<span class="p"></</span><span class="nt">h2</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"demo-query-all"</span><span class="p">></span>Access me by query all (1)<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"demo-query-all"</span><span class="p">></span>Access me by query all (2)<span class="p"></</span><span class="nt">div</span><span class="p">></span>
|
|
|
|
<span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"access.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
|
|
|
|
<span class="p"></</span><span class="nt">body</span><span class="p">></span>
|
|
|
|
<span class="p"></</span><span class="nt">html</span><span class="p">></span>
|
|
</code></pre></div>
|
|
|
|
<p>You can continue to work on these template files to make additional changes by accessing HTML elements.</p>
|
|
<h2 id="conclusion">Conclusion</h2>
|
|
<p>In this tutorial, we went over 5 ways to access HTML elements in the DOM — by ID, by class, by HTML tag name, and by selector. The method you will use to get an element or group of elements will depend on browser support and how many elements you will be manipulating. You should now feel confident to access any HTML element in a document with JavaScript through the DOM.</p>
|
|
</article>
|
|
<footer>
|
|
<p>Page generated on 2022-06-28</p>
|
|
</footer>
|
|
</main>
|
|
<script type="text/javascript">
|
|
document.querySelectorAll('.tag').forEach(tag => {
|
|
let text = tag.innerText;
|
|
tag.innerText = '';
|
|
tag.innerHTML = `<a href="/tags.html#${text}">${text}</a>`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|