makyo
/
zk_html
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update from sparkleup

This commit is contained in:
Madison Scott-Clary 2022-06-22 00:53:53 -07:00
parent f23c21317b
commit b972136228
11 changed files with 473 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
work/ctm-385.html
View File

@ -68,7 +68,7 @@ As stated previously, this tutorial assumes that Jenkins is already installed. <
<span class="k">...</span><span class="w"></span>
</code></pre></div>
<p>After that, the proxying happens. It basically takes any incoming requests and proxies them to the Jenkins instance that is bound/listening to port 8080 on the local network interface. This is a slightly different situation, but <a href="https://www.digitalocean.com/community/tutorials/how-to-configure-nginx-as-a-front-end-proxy-for-apache">this tutorial</a> has some good information about the Nginx proxy settings.</p>
<p>After that, the proxying happens. It basically takes any incoming requests and proxies them to the Jenkins instance that is bound/listening to port 8080 on the local network interface. </p>
<div class="codehilite"><pre><span></span><code><span class="k">...</span><span class="w"></span>
<span class="s">location</span><span class="w"> </span><span class="s">/</span><span class="w"> </span><span class="p">{</span><span class="w"></span>
@ -85,6 +85,9 @@ As stated previously, this tutorial assumes that Jenkins is already installed. <
<span class="k">...</span><span class="w"></span>
</code></pre></div>
<p>&lt;$&gt;[note]
<strong>Note:</strong> If you&rsquo;d like to learn more about proxying in Nginx, <a href="https://www.digitalocean.com/community/tutorials/how-to-configure-nginx-as-a-front-end-proxy-for-apache">this tutorial</a> has some good information about the Nginx proxy settings.
&lt;$&gt;</p>
<p>A few quick things to point out here. If you don&rsquo;t have a domain name that resolves to your Jenkins server, then the &lt;^&gt;proxy_redirect&lt;^&gt; statement above won&rsquo;t function correctly without modification, so keep that in mind. Also, if you misconfigure the &lt;^&gt;proxy_pass&lt;^&gt; (by adding a trailing slash for example), you will get something similar to the following in your Jenkins Configuration page.</p>
<p><img alt="Jenkins error: Reverse proxy set up is broken" src="https://assets.digitalocean.com/articles/nginx_jenkins/1.jpg" /></p>
<p>So, if you see this error, double-check your &lt;^&gt;proxy_pass&lt;^&gt; and &lt;^&gt;proxy_redirect&lt;^&gt; settings in the Nginx configuration!</p>
@ -116,7 +119,7 @@ sudo service nginx restart
<p>The only thing left to do is verify that everything worked correctly. As mentioned above, you should now be able to browse to your newly configured URL - &lt;^&gt;jenkins.domain.com&lt;^&gt; - over either HTTP or HTTPS. You should be redirected to the secure site, and should see some site information, including your newly updated SSL settings. As noted previously, if you are not using hostnames via DNS, then your redirection may not work as desired. In that case, you will need to modify the &lt;^&gt;proxy_pass&lt;^&gt; section in the Nginx config file.</p>
</article>
<footer>
<p>Page generated on 2022-06-15</p>
<p>Page generated on 2022-06-22</p>
</footer>
</main>
<script type="text/javascript">

352
work/ctm-406.html Normal file
View File

@ -0,0 +1,352 @@
<!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&rsquo;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">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1.0&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Accessing Elements in the DOM<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</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">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Accessing Elements in the DOM<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>ID (#demo)<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;demo&quot;</span><span class="p">&gt;</span>Access me by ID<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Class (.demo)<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;demo&quot;</span><span class="p">&gt;</span>Access me by class (1)<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;demo&quot;</span><span class="p">&gt;</span>Access me by class (2)<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Tag (article)<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span>Access me by tag (1)<span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span>Access me by tag (2)<span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Query Selector<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;demo-query&quot;</span><span class="p">&gt;</span>Access me by query<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Query Selector All<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;demo-query-all&quot;</span><span class="p">&gt;</span>Access me by query all (1)<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;demo-query-all&quot;</span><span class="p">&gt;</span>Access me by query all (2)<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</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&rsquo;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>. We can grab 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">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;demo&quot;</span><span class="p">&gt;</span>Access me by ID<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</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(&gt;)
const demoId = document.getElementById(&lsquo;demo&rsquo;);</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(&gt;)</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">&lt;div id</span><span class="o">=</span><span class="s">&quot;demo&quot;&gt;Access me by ID&lt;/div&gt;</span><span class="w"></span>
</code></pre></div>
<p>We can be sure we&rsquo;re accessing the correct element by changing the <code>border</code> property to <code>purple</code>.</p>
<p>```custom_prefix(&gt;)
demoId.style.border = &lsquo;1px solid purple&rsquo;;</p>
<div class="codehilite"><pre><span></span><code><span class="n">Once</span><span class="w"> </span><span class="n">we</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">our</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">We</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">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;demo&quot;</span><span class="p">&gt;</span>Access me by class (1)<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;demo&quot;</span><span class="p">&gt;</span>Access me by class (2)<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div>
<p>Let&rsquo;s access our elements in the <em>Console</em> and put them in a variable called <code>demoClass</code>.</p>
<p>```custom_prefix(&gt;)
const demoClass = document.getElementsByClassName(&lsquo;demo&rsquo;);</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">you</span><span class="w"> </span><span class="n">might</span><span class="w"> </span><span class="n">think</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">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">we</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">we</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(&gt;)</span>
<span class="n n-Quoted">demoClass.style.border = &#39;1px solid orange&#39;;</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 &#39;border&#39; of undefined</span><span class="w"></span>
</code></pre></div>
<p>The reason this doesn&rsquo;t work is because instead of just getting one element, we have an array-like object of elements.</p>
<p>```custom_prefix(&gt;)
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. We can therefore 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">&gt;</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">&#39;</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">&#39;</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. We can do this by creating a <code>for</code> loop, and looping through every item in the array. </p>
<p>```custom_prefix(&gt;)
for (i = 0; i &lt; demoClass.length; i++) {
demoClass[i].style.border = &lsquo;1px solid orange&rsquo;;
}</p>
<div class="codehilite"><pre><span></span><code><span class="k">When</span><span class="w"> </span><span class="n">we</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">our</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">We</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">We</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&rsquo;re using <code>article</code> elements.</p>
<div class="codehilite"><pre><span></span><code><span class="nt">&lt;article&gt;</span>Access me by tag (1)<span class="nt">&lt;/article&gt;</span>
<span class="nt">&lt;article&gt;</span>Access me by tag (2)<span class="nt">&lt;/article&gt;</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 we can modify every tag in the document with a <code>for</code> loop.</p>
<p>```custom_prefix(&gt;)
const demoTag = document.getElementsByTagName(&lsquo;article&rsquo;);</p>
<p>for (i = 0; i &lt; demoTag.length; i++) {
demoTag[i].style.border = &lsquo;1px solid blue&rsquo;;
}</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">&#39;s method of accessing the DOM with CSS selectors.</span>
<span class="s1">```js</span>
<span class="s1">$(&#39;</span><span class="c1">#demo&#39;); // returns the demo ID element in jQuery</span><span class="w"></span>
</code></pre></div>
<p>We 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, we will 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">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;demo-query&quot;</span><span class="p">&gt;</span>Access me by query<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div>
<p>The selector for an <code>id</code> attribute is the hash symbol (<code>#</code>). We can assign the element with the <code>demo-query</code> id to the <code>demoQuery</code> variable.</p>
<p>```custom_prefix(&gt;)
const demoQuery = document.querySelector(&lsquo;#demo-query&rsquo;);</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. We 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 our example file, we have two elements with the `demo-query-all` class applied to them.
```html
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;demo-query-all&quot;</span><span class="nt">&gt;</span>Access me by query all (1)<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;demo-query-all&quot;</span><span class="nt">&gt;</span>Access me by query all (2)<span class="nt">&lt;/div&gt;</span>
</code></pre></div>
<p>The selector for a <code>class</code> attribute is a period or full stop (<code>.</code>), so we can access the class with <code>.demo-query-all</code>.</p>
<p>```custom_prefix(&gt;)
const demoQueryAll = document.querySelectorAll(&lsquo;.demo-query-all&rsquo;);</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">we</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(&gt;)</span>
<span class="n n-Quoted">demoQueryAll.forEach(query =&gt; {</span>
<span class="n n-Quoted"> query.style.border = &#39;1px solid green&#39;;</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 we 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">&#39;demo&#39;</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">&#39;demo&#39;</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">&#39;article&#39;</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">&#39;#demo-query&#39;</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">&#39;.demo-query-all&#39;</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">&#39;1px solid purple&#39;</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">&lt;</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">&#39;1px solid orange&#39;</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">&lt;</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">&#39;1px solid blue&#39;</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">&#39;1px solid red&#39;</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">=&gt;</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">&#39;1px solid green&#39;</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">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1.0&quot;</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Accessing Elements in the DOM<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</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">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h1</span><span class="p">&gt;</span>Accessing Elements in the DOM<span class="p">&lt;/</span><span class="nt">h1</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>ID (#demo)<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;demo&quot;</span><span class="p">&gt;</span>Access me by ID<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Class (.demo)<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;demo&quot;</span><span class="p">&gt;</span>Access me by class (1)<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;demo&quot;</span><span class="p">&gt;</span>Access me by class (2)<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Tag (article)<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span>Access me by tag (1)<span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">article</span><span class="p">&gt;</span>Access me by tag (2)<span class="p">&lt;/</span><span class="nt">article</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Query Selector<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">&quot;demo-query&quot;</span><span class="p">&gt;</span>Access me by query<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">h2</span><span class="p">&gt;</span>Query Selector All<span class="p">&lt;/</span><span class="nt">h2</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;demo-query-all&quot;</span><span class="p">&gt;</span>Access me by query all (1)<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;demo-query-all&quot;</span><span class="p">&gt;</span>Access me by query all (2)<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;access.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</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-22</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>

3
work/index.html
View File

@ -17,11 +17,12 @@
<li><a href="ctm-399.html">How to use Node.js modules with npm and package.json</a></li>
<li><a href="ctm-407.html">How to create temporary and permanent redirects with nginx</a></li>
<li><a href="ctm-385.html">How to configure Nginx with SSL as a reverse proxy for Jenkins</a></li>
<li><a href="ctm-406.html">How to Access Elements in the DOM</a></li>
</ul>
<h2 id="new">New</h2>
</article>
<footer>
<p>Page generated on 2022-06-13</p>
<p>Page generated on 2022-06-22</p>
</footer>
</main>
<script type="text/javascript">

2
writing/post-self/mitzvot/001.html
View File

@ -148,7 +148,7 @@
<p>&ldquo;Alright,&rdquo; ey said, wiping eir face. &ldquo;Want dinner?&rdquo;</p>
</article>
<footer>
<p>Page generated on 2022-06-18</p>
<p>Page generated on 2022-06-22</p>
</footer>
</main>
<script type="text/javascript">

2
writing/post-self/mitzvot/002.html
View File

@ -110,7 +110,7 @@
<p>Ey laughed and pushed at her until she sat up before sliding off the stage and walking back to eir seat. &ldquo;Alright. Once more, from the top.&rdquo;</p>
</article>
<footer>
<p>Page generated on 2022-06-07</p>
<p>Page generated on 2022-06-22</p>
</footer>
</main>
<script type="text/javascript">

2
writing/post-self/mitzvot/033.html
View File

@ -252,7 +252,7 @@
<p>She laughed and squirmed back against em. &ldquo;You are an enormous nerd and I love you a lot, Ionuț. I would, but you would just mumble more, I am sure.&rdquo;</p>
</article>
<footer>
<p>Page generated on 2022-06-17</p>
<p>Page generated on 2022-06-22</p>
</footer>
</main>
<script type="text/javascript">

112
writing/post-self/mitzvot/034.html
View File

@ -39,7 +39,7 @@
<p><em>&ldquo;Oh, absolutely,&rdquo;</em> she replied, and ey could hear the grin in her voice. <em>&ldquo;But I will still send one if you would like.&rdquo;</em></p>
<p><em>&ldquo;No, no. It&rsquo;s alright. Just no sleeping out there, okay?&rdquo;</em></p>
<p><em>&ldquo;Of course. We will return soon.&rdquo;</em></p>
<p>It was nearly two hours until the skunks returned as promised. Two hours of tossing and turning in bed, fretting and fretting and fretting. Eventually, both of them wound up joining em, and despite the added rest that this usually brought True Name, none of them slept well.</p>
<p>It was nearly two hours later when the skunks returned as promised. Two hours of tossing and turning in bed, fretting and fretting and fretting. Eventually, they fell into their usual positions, though despite the added rest that this usually brought True Name, none of them slept well.</p>
<p>When there was no wink and smile from Jonas, ey let eir shoulders sag and nodded. &ldquo;Tired, yeah. We&rsquo;re all tired. Just want this shit over with.&rdquo;</p>
<p>&ldquo;And True Name? How&rsquo;s she?&rdquo; he asked, still apparently sincere.</p>
<p>&ldquo;Look, Jonas, what are you after? We&rsquo;re tired. She&rsquo;s upset. We just want to get on with our lives, and it&rsquo;s all on you.&rdquo;</p>
@ -59,21 +59,111 @@
<p>Jonas shrugged. &ldquo;You mean aside from the fact that I get to see your face when you talk about your skunks? It&rsquo;s fun dragging people round.&rdquo;</p>
<p>Restraining the urge to bridle at &lsquo;your skunks&rsquo;, ey gave a hint of a bow. &ldquo;And what can you tell me about this meeting? I imagine you&rsquo;ve got some grand plans about surprising True Name with your ideas for the future, but if nothing else, it&rsquo;d help me to know what I&rsquo;m getting into before I get into it.&rdquo;</p>
<p>&ldquo;Oh, excellent question!&rdquo;</p>
<p>((Ioan asks whyyyy))</p>
<p>((It&rsquo;s kind of as EW suspected, but in the sense that the culture of each System had already started to diverge; that&rsquo;s where he and TN differed. TN truly believed that they should just kinda keep being super gentle with each just to ensure continuity, but Jonas disagrees, thinks that he can see ways in which each System needs more or less active politics))</p>
<p>((But also he&rsquo;s a snarky shit about it and won&rsquo;t say much more))</p>
<p>&ldquo;It&rsquo;s settled, then, right? Two days, 11:00?&rdquo;</p>
<p>Ey posted the cap of eir pen and nodded for Jonas to continue.</p>
<p>&ldquo;I said it was an excellent question, not that I&rsquo;d answer you, Ioan.&rdquo;</p>
<p>&ldquo;I think you will.&rdquo;</p>
<p>&ldquo;And why&rsquo;s that?&rdquo;</p>
<p>&ldquo;Because you love to hear yourself talk,&rdquo; ey said. &ldquo;And because Zacharias is right. This is almost cartoonishly evil, and villains love talking about their grand schemes. I&rsquo;m ready for your monologue.&rdquo;</p>
<p>Jonas raised his eyebrows and a slow grin spread over his features. &ldquo;You see, this is why I like you, Ioan. The whole Bălan clade, that is. You hit that sweet spot between patient and impatient where you can stay calm, but you you don&rsquo;t just wait forever.&rdquo;</p>
<p>Ey waited.</p>
<p>&ldquo;Alright, then, a bit of a preview.&rdquo; He finished half of his drink in a few swallows. &ldquo;There&rsquo;s a bunch of changes coming in the pipeline&ndash;&ldquo;</p>
<p>&ldquo;This AEC?&rdquo;</p>
<p>Zacharias frowned, but Jonas was already nodding, &ldquo;Got it in one. That&rsquo;s right at the top of the list. See, that one requires some hardware changes that neither of the LVs are going to be able to manage, and that puts us in a unique position, here. Suddenly, the we differ from the LVs in a fundamental way. I really can&rsquo;t overstate how big of a deal this is, Ioan.&rdquo;</p>
<p>&ldquo;Suddenly we have to prove our greener grass to those phys-side?&rdquo;</p>
<p>&ldquo;Right. The direction that we need to take with Lagrange can&rsquo;t just be the same old one we&rsquo;ve been taking before. In this, True Name and I disagreed.&rdquo; He shrugged, rocking his glass gently back and forth on the table before taking another sip. &ldquo;She wanted continue on her path of subtlety, I disagreed.&rdquo;</p>
<p>&ldquo;Disagreed? You tried to assassinate her, Jonas.&rdquo;</p>
<p>Ey shrugged. &ldquo;What are bullets but a disagreement?&rdquo;</p>
<p>Ioan rolled eir eyes.</p>
<p>&ldquo;We disagree, then. It&rsquo;s like I said, though, sometimes mommies and daddies fight, Ioan. We&rsquo;ve spent the past few years trying to hash it out. For all her focus on subtlety in guiding the system, she can be a real bitch when it comes to trying to get her point across.&rdquo;</p>
<p>&ldquo;Bullshit,&rdquo; ey said flatly.</p>
<p>Jonas laughed. &ldquo;Oh?&rdquo;</p>
<p>&ldquo;Yeah. A few reasons.&rdquo; Ey started ticking off points on eir fingers as ey spoke. &ldquo;First, True Name didn&rsquo;t start down this path in the last few years that we&rsquo;ve been learning from Artemis; she was a mess when she first got in touch with us with Codrin#Artemis&rsquo;s first letter around the convergence, so things were already in motion then. Second, The Guiding Council on Pollux is more than a decade old now, predating the arrival of the Artemisians by nearly ten years, and I think that&rsquo;s because third, you&ndash;&rdquo; Ey nodded to Zacharias. &ldquo;&ndash;apparently dropped everything on her across all three systems at the same time not that long after the launch. You two got more openly together on Pollux, and as far as Codrin#Castor can find in the perisystem, you quit shortly after telling her there. End Waking thinks &mdash; and I agree &mdash; you&rsquo;re trying to push each of the Systems in a different direction politically. Maybe you think having different political environments is more stable across societies separated by distance and time. Maybe it&rsquo;s some giant experiment. Who knows. It&rsquo;s your long game.&rdquo;</p>
<p>The longer ey spoke, the more serious Jonas&rsquo;s expression grew, and by the time ey finished, he&rsquo;d leaned back in his seat. &ldquo;Well then,&rdquo; he said. &ldquo;I suppose I don&rsquo;t have much more to add, then, do I? I have my conversation with True Name cut out for me.&rdquo;</p>
<p>&ldquo;And what conversation is that?&rdquo;</p>
<p>Jonas was back to grinning. &ldquo;Oh, fuck off, Ioan. I&rsquo;m not going to tell you all of my secrets! We have our shit to work through and you have to be a good little clerk and take all of your notes so that you can come back to me with a story. That&rsquo;ll seal the deal, and we&rsquo;ll be ready to go our separate ways.&rdquo;</p>
<p>Ey gave a hint of a bow. &ldquo;As you say. It&rsquo;s settled, then, right? Two days, 11:00?&rdquo;</p>
<p>&ldquo;That it is. Bring your pen and paper,&rdquo; Jonas said, lifting his glass in another toast before downing his drink in one go.</p>
<p>&ldquo;Right.&rdquo;</p>
<p>Ey didn&rsquo;t hear if there was a reply or not. Ey simply quit. #Tracker could take care of the rest.</p>
<p>((Heads back all upset because they&rsquo;re good at that, EW is over and the three skunks are on the prairie))</p>
<p>((They talk about the meeting))</p>
<p>((Wargaming a few last things; they did a bunch while Ioan was out, but they&rsquo;re kind of cagey talking about it because ???))</p>
<p>((They talk over dinner, we see it&rsquo;s been a few weeks and Ioan and TN are getting more comfortable touching))</p>
<p>((Maybe some other stuff: - EW camping out? - Some call-back to something from before? - Ioan and May walk the plains - idk))</p>
<p>Ioan#Tracker set eir pen down with exaggerated care, closing eir notebook, then eir eyes. This was anger in so many ways, though it differed from that hot, spiky shape spinning within em that came with Zacharias&rsquo;s bullshit. It was a pressure within eir chest, a tension in eir shoulders, a pounding in eir head. </p>
<p>&ldquo;<em>Fuck,</em>&rdquo; ey shouted. Ey fell back into the paced breathing exercises that Sarah had showed em years ago. It had been in the context to help May, at the time, but ey needed anything ey could get, now.</p>
<p>&ldquo;<em>I take it you are back, then?</em>&rdquo; May&rsquo;s words over the sensorium message were tentative, anxious. Clearly everyone&rsquo;s tension was still lingering.</p>
<p>&ldquo;<em>Yes. I&rsquo;m coming outside,</em>&rdquo; ey replied.</p>
<p>Ey didn&rsquo;t wait for the ping of acknowledgement. Even if they weren&rsquo;t ready for em to be out there, ey needed to pass at least something on. Ey needed to be around eir partner and friends. Ey needed to be out of that context, away from pens and paper and books and work.</p>
<p>The afternoon was settling into evening, and the plain was littered with dozens of skunks. As ey walked toward True Name&rsquo;s tent, though, they began to quit in small groups until it was just the three root instances kneeling around a small fire, over which they were roasting sausages.</p>
<p>After bowing to End Waking and getting eir hug and skunk-kiss from both May and True Name, ey sat cross-legged between them and, once ey&rsquo;d gathered emself, said, &ldquo;That was a whole lot of bullshit. How far off is food?&rdquo;</p>
<p>End Waking used the tip of his knife to nudge at a few of the sausages, turning them over on the grill cantilevered over the fire. &ldquo;Not long. Would you prefer to wait to share, then?&rdquo;</p>
<p>&ldquo;Yeah. Maybe if I have food in me, I won&rsquo;t shout.&rdquo;</p>
<p>&ldquo;That was quite loud, my dear,&rdquo; May said, claiming one of eir hands to hold in her paw. &ldquo;I am glad you did not die.&rdquo;</p>
<p>Dinner was quiet, but not unpleasant. Gentle wind through the grass, the crackling of the fire and the spit of grease from the sausages, the gamy tang of ground venison tempered with barley and herbs. </p>
<p>&ldquo;Did he wind you up that badly?&rdquo; May asked.</p>
<p>&ldquo;Well, yes and no. He and Zacharias were both there.&rdquo;</p>
<p>Both May and True Name flinched at the name, True Name&rsquo;s shoulders slumping. &ldquo;So, yes. Winding you up.&rdquo;</p>
<p>Ey nodded. &ldquo;I&rsquo;d guessed that much, at least. I think the whole meeting was a form of that. He even admitted such, saying that he set it up mostly so that he could &lsquo;drag me around&rsquo;. I called him on it.&rdquo;</p>
<p>&ldquo;I do not imagine that did any good,&rdquo; End Waking mumbled.</p>
<p>&ldquo;Oh, not at all. The thing is, it wasn&rsquo;t just winding me up, though. I also think he just wanted to hear himself talk. I think he wanted to talk about all his plans because he knows his words are going to wind up in whatever I write, so he wants to get all that he can in there.&rdquo;</p>
<p>&ldquo;And worded as he would like,&rdquo; True Name said, nodding. &ldquo;No matter what we manage to come up with, he wants to ensure that the narrative has him coming out on top.&rdquo;</p>
<p>&ldquo;I still don&rsquo;t understand, though,&rdquo; ey said. &ldquo;Why be so transparently villainous if he&rsquo;s specifically having me write something for public consumption.&rdquo;</p>
<p>&ldquo;The same reason I wound you and Codrin up. If it is just a little too sensational to be real, then he can get away with more than he might otherwise. Jonas assassinating True Name? True Name who probably already assassinated Qoheleth? It is just too much to be real, but it sure is good reading, is it not?&rdquo;</p>
<p>&ldquo;Makes me feel like something of a punching bag,&rdquo; ey said, then sighed. &ldquo;I think I&rsquo;m starting to understand what Codrin#Castor was talking about in terms of getting yanked about a bit better.&rdquo;</p>
<p>True Name winced and averted her gaze. &ldquo;I am sorry, Mx. Bălan.&rdquo;</p>
<p>&ldquo;Shit, I&rsquo;m sorry.&rdquo; Ey reached over to give the skunk&rsquo;s paw a squeeze. &ldquo;That was a different you, I&rsquo;m not trying to put that on you now.&rdquo;</p>
<p>She patted the back of eir hand with her other paw, a somewhat stiff gesture, and, as always when the topic of strife in the past came up, ey could see more of End Waking in her than True Name or May. &ldquo;Thank you, Ioan. I do appreciate it. It is an unfortunate reality that politics is the science of yanking people around. Add in being an actor, and, well,&rdquo; she said, then shrugged.</p>
<p>&ldquo;I understand, yeah.&rdquo; Ey retrieved eir hand, choosing instead to gently tug May closer. She leaned against eir side gratefully. &ldquo;Do you have a plan you think might work out, then? Don&rsquo;t have to tell me, I know you&rsquo;re keeping it amongst yourselves.&rdquo;</p>
<p>End Waking nodded. &ldquo;There is a good chance of it working, yes. Not a perfect chance, and there are many possible holes that he may exploit in the moment.&rdquo;</p>
<p>True Name nodded. &ldquo;If nothing else, I think that it will buy me a quiet retirement.&rdquo;</p>
<p>&ldquo;A quiet retirement alive is still good, right? It&rsquo;ll be a life,&rdquo; ey said.</p>
<p>&ldquo;It may not be an ideal life, but it will be a life, yes.&rdquo;</p>
<p>&ldquo;And hopefully still a good one, in the end,&rdquo; May added.</p>
<p>&ldquo;Yes. If I am honest, a less than ideal but still good life is far more than I had in front of me even before all of this nonsense.&rdquo; She smiled, faint but true. &ldquo;Perhaps I ought to thank him for that. I am not unhappy with what I have now, even.&rdquo;</p>
<p>The conversation wound down from there, and as evening dimmed into night, they fell into silence. The fire was kept low, only enough light and warmth to keep the dark at bay.</p>
<p>Eventually, with eir lower back hurting and May starting to nod off, they made their goodnights. True Name gave May and em a hug around the shoulders and a nose-dot to the cheek in turn and padded off to her tent. End Waking stated that he was going to watch the fire for a while longer and then head to bed himself &mdash; he&rsquo;d set up a tent of his own a ways off from True Name&rsquo;s for this fork to sleep in &mdash; leaving May and Ioan to walk back to the house together in the dark.</p>
<p>&ldquo;I&rsquo;m happy to hear her talking about a future,&rdquo; Ioan said, once they&rsquo;d cleaned up and made their way to bed, em slouched against the headboard and May in eir lap, slouched against eir front in turn.</p>
<p>&ldquo;I am too, yes. I am pleased that other than a few short fits, she has been at worst determined, and at best hopeful.&rdquo;</p>
<p>Ey nodded and tucked eir chin up over the skunk&rsquo;s head. &ldquo;I think that&rsquo;s where I am, yeah. I want this over with, and sometimes it even feels like this might even be the best outcome for everyone.&rdquo;</p>
<p>&ldquo;For everyone?&rdquo;</p>
<p>&ldquo;Well, Jonas gets what he wants and he can go play his games elsewhere, and True Name gets to go live a life doing whatever it is she wants, right?&rdquo;</p>
<p>She nodded. &ldquo;And what of us?&rdquo;</p>
<p>Ey chuckled, the sound somewhat muffled by the position. &ldquo;Well, I&rsquo;ll be happy for her, and you and I will continue being disgustingly adorable or whatever it is she accuses us of being.&rdquo;</p>
<p>May laughed. &ldquo;Well, yes. I will be happy for her and will continue loving you.&rdquo;</p>
<p>&ldquo;Love you too, May.&rdquo;</p>
<p>&ldquo;See? Gross.&rdquo; She laughed and hugged tighter around eir middle. &ldquo;Will you let her continue to live here?&rdquo;</p>
<p>Shrugging carefully, ey murmured, &ldquo;It&rsquo;ll be a conversation between the three of us. I&rsquo;ve gotten used to it, I&rsquo;d love to have her stick around if she wants.&rdquo;</p>
<p>&ldquo;Same,&rdquo; the skunk mumbled. &ldquo;It is not perfect, but nothing that cannot be fixed by modifying the sim and nailing down some boundaries.&rdquo;</p>
<p>&ldquo;I&rsquo;m looking forward to getting in touch with Serene, yeah.&rdquo; Ey hesitated, then asked gently, &ldquo;Are there boundaries she&rsquo;s crossed?&rdquo;</p>
<p>&ldquo;No, no. I do not think so, but it might be nice to understand the shape of our friendships when we are not waiting on some potentially life-or-death event.&rdquo;</p>
<p>&ldquo;I still get tripped up over you even calling her a friend,&rdquo; ey said, grinning. &ldquo;If she&rsquo;d needed to move in even a year ago, I think you would&rsquo;ve ripped her head off two days in.&rdquo;</p>
<p>May laughed and lifted her snout to nudge at eir chin firmly. &ldquo;Would not. I would have been impossible to live with, though. Whining and bitching and stress-shedding everywhere.&rdquo;</p>
<p>&ldquo;Oh, so like normal, then.&rdquo;</p>
<p>She sat up in eir lap and poked em in the chest with a dull claw. &ldquo;Rude.&rdquo;</p>
<p>Ey grinned. &ldquo;Well, okay, not stress-shedding, just normal shedding.&rdquo;</p>
<p>She scrubbed a paw at her flank until she came up little bit of shed fur &mdash; &lsquo;skunk pixels&rsquo;, she&rsquo;d called it at one point, and it had stuck &mdash; to sprinkle over eir front. &ldquo;Yes, yes. But I can say the same for you, my dear. A year ago, I do not think I could have pictured her giving you a goodnight kiss.&rdquo;</p>
<p>Covering for the heat rising to eir cheeks by brushing the errant fur off eir front, ey shrugged. &ldquo;I&rsquo;m used to skunks being all touchy, thanks to you.&rdquo;</p>
<p>&ldquo;Yes, but True Name?&rdquo;</p>
<p>&ldquo;I&rsquo;m not sure she&rsquo;s that anymore,&rdquo; ey said carefully. &ldquo;So I guess you&rsquo;re right. I couldn&rsquo;t imagine the True Name of a year ago giving goodnight kisses to anyone, much less you and me.&rdquo;</p>
<p>She grinned, nodding. &ldquo;Agreed, yes. And you are okay with it?&rdquo;</p>
<p>Ey shrugged. &ldquo;Like I said, I&rsquo;m used to it. It occasionally strikes me as incredibly strange. Even just talking about it now feels weird. There&rsquo;s this whole, dramatic plot to take out one of the most prominent people on the System, and here we are, talking about goodnight kisses.&rdquo;</p>
<p>&ldquo;It is not that weird. It is an artifact of our lives. Death has a different flavor to it when we fork and quit on a whim, living for centuries at a time.&rdquo; She set to work brushing her fingers through eir hair. Weird to be petted, but it felt good, so ey never stopped her. She continued, &ldquo;Which is not to say that it is important and anxiety inducing to have almost lost one&rsquo;s life, just that, with a modicum of care, she <em>can</em> continue living, even if in a restricted fashion. With less fear of death comes greater love.&rdquo;</p>
<p>Eyes closed and chin tucked nearly to eir chest, ey hummed thoughtfully. &ldquo;I suppose, yeah. I didn&rsquo;t have much life outside the System that I can compare, never mind love.&rdquo;</p>
<p>May giggled. &ldquo;I was not speaking of romance, my dear.&rdquo;</p>
<p>Ey snorted, shaking eir head. &ldquo;Neither was I, you nut. I just meant Dragoș and my parents.&rdquo;</p>
<p>&ldquo;Well, touché. We do not have very good language around love, in my defense.&rdquo; She ruffled eir hair and ey could hear the smirk in her voice as she said, &ldquo;Not that that will ever stop me from teasing you about falling in love with her.&rdquo;</p>
<p>Ey laughed and poked at her side a few times, hunting for a ticklish spot. &ldquo;Who&rsquo;s rude now, hmm?&rdquo;</p>
<p>Giggling helplessly, May squirmed until she tipped off eir lap, curling protectively into a ball. &ldquo;It is just so easy, Ionuț, do not blame me!&rdquo;</p>
<p>&ldquo;I know, I know, and it&rsquo;s your job as an Odist to fuck with me, <em>et cetera, et cetera</em>,&rdquo; ey said, sipping down into bed alongside the skunk, getting eir arms around her. &ldquo;I like her, but&hellip;well, whatever. It&rsquo;s complicated.&rdquo;</p>
<p>She twisted in eir arms and wormed her way back against em, shaking her head. &ldquo;No, you cannot just leave it at that. You have further thoughts and I want to hear.&rdquo;</p>
<p>&ldquo;Further ammo for teasing, you mean.&rdquo;</p>
<p>&ldquo;Well, yes, but I do still want to hear.&rdquo;</p>
<p>Ey sighed. &ldquo;Fine, fine. I just&hellip;well, I guess I&rsquo;m sort of in the same boat as her, in that it&rsquo;s something I can picture, even if I can&rsquo;t understand it. She&rsquo;s enough like you &mdash; in terms of looks and voice as well as personality from the merge &mdash; that I can imagine what that&rsquo;d be like, and both she and End Waking are my friends, so there&rsquo;s that, too. But the context of her being True Name makes it hard to picture the&hellip;I don&rsquo;t know. Process?&rdquo;</p>
<p>&ldquo;The concept versus the mechanics, maybe?&rdquo;</p>
<p>&ldquo;Yeah, I think so.&rdquo; Ey grinned and kissed the back of one of her ears. &ldquo;But that&rsquo;s about as far as I get thinking about it before I&rsquo;m distracted by this or that.&rdquo;</p>
<p>&ldquo;Organizing your pen collection is usually what I accuse you of,&rdquo; she said.</p>
<p>&ldquo;Mmhm. I guess it&rsquo;s the same as when you and I got together. I could kind of picture it, but had no clue beyond that.&rdquo;</p>
<p>She hugged eir arm to her front and nodded. &ldquo;Well, whatever happens, happens. We will talk about it.&rdquo;</p>
<p>&ldquo;Another time,&rdquo; ey mumbled, pushing eir face into her soft fur. &ldquo;I can&rsquo;t imagine I&rsquo;m going to be able to sleep tomorrow night, so we might as well get some tonight.&rdquo;</p>
</article>
<footer>
<p>Page generated on 2022-06-17</p>
<p>Page generated on 2022-06-22</p>
</footer>
</main>
<script type="text/javascript">

5
writing/post-self/mitzvot/035.html
View File

@ -12,7 +12,8 @@
<h1>Zk | 035</h1>
</header>
<article class="content">
<p>((&hellip;))</p>
<hr />
<p>((&hellip;))</p>
<p>In the most stunning display of forking ey&rsquo;d ever seen, True Name began to change.</p>
<p>Ioan had seen eir share of Dear&rsquo;s exhibitions, not to mention those of other instance artists the fox had introduced em to along the way, and the forking involved in all of them had been perfect. They were well rehearsed dances of duplication that told a story.</p>
<p>However, they were, whether by virtue of being related to Dear or by the art itself, fanciful. The duplication was supposed to evoke a sense of magic, of wonder (or the closely related terror).</p>
@ -109,7 +110,7 @@
<hr />
</article>
<footer>
<p>Page generated on 2022-05-18</p>
<p>Page generated on 2022-06-22</p>
</footer>
</main>
<script type="text/javascript">

4
writing/post-self/mitzvot/index.html
View File

@ -126,7 +126,7 @@
</li>
<li class="done2"> CHAPTER Ioan 2350<ul>
<li class="done2"> <a href="033.html">TN&rsquo;s path forward</a> &mdash; TN decides she&rsquo;s ready to start planning the meeting, has a better idea of what she&rsquo;ll become (maybe merge down? See where it goes)</li>
<li class="done1"> <a href="034.html">Ioan sets the meeting up</a> &mdash; Ey&rsquo;s acting as amanuensis and as close to a neutral party as there is, and Jonas is all asmirk at this. They head out, and are greeted by Zacharias, Ioan is struggling with anger, they&rsquo;re going to meet up in a week.</li>
<li class="done2"> <a href="034.html">Ioan sets the meeting up</a> &mdash; Ey&rsquo;s acting as amanuensis and as close to a neutral party as there is, and Jonas is all asmirk at this. They head out, and are greeted by Zacharias, Ioan is struggling with anger, they&rsquo;re going to meet up in a week.</li>
<li class="rejected"> (SNIPPET) <a href="0x2.html">True Name changes + aftermath</a> &mdash; True Name changes</li>
<li class="done1"> <a href="035.html">They meet, they talk, TN changes</a> &mdash; Jonas talks about how the upcoming changes require a different kind of stability for continuity and TN just isn&rsquo;t gonna cut it, gives ultimata for her continued existence. TN becomes Sasha, and now she&rsquo;s all asmirk.</li>
<li class="done0"> <a href="036.html">Something innocent</a> &mdash; The aftermath. They get Serene to basically duplicate Arrowhead Lake in place of Sasha&rsquo;s field, etc Sasha works on finding a new purpose, realizes it&rsquo;s going to be a long process.</li>
@ -311,7 +311,7 @@
</ul>
</article>
<footer>
<p>Page generated on 2022-06-13</p>
<p>Page generated on 2022-06-22</p>
</footer>
</main>
<script type="text/javascript">

6
writing/quaker-ephemera/index.html
View File

@ -19,11 +19,13 @@
<li class="done0"> <a href="nonviolence.html">Nonviolence is a stance</a></li>
<li class="done0"> <a href="identity.html">Identity and faith</a></li>
<li class="done0"> <a href="point-of-least-faith.html">Point of least faith</a></li>
<li class="done0"> <a href="animism.html">Quakers and animisim (light of god in all things)</a></li>
<li class="done0"> <a href="animism.tex.html">Quakers and animism (light of god in all things)</a></li>
<li class="done0"> <a href="triangles.html">Platforms of religion (TEC three legged stool) (wesleyan quadrilateral) (the words, the context, the community)</a></li>
<li class="done0"> <a href="burnout.html">Leftist burnout in committees</a></li>
</ul>
</article>
<footer>
<p>Page generated on 2022-06-17</p>
<p>Page generated on 2022-06-22</p>
</footer>
</main>
<script type="text/javascript">

2
writing/unseeing/index.html
View File

@ -330,7 +330,7 @@ In Tsuari which fell&hellip;</div>
<p>&ldquo;Good. Now, I will teach you to see, faithful, and you will teach me to be seen, for everything &mdash; <em>everything</em> &mdash; will be different now.&rdquo;</p>
</article>
<footer>
<p>Page generated on 2021-06-08</p>
<p>Page generated on 2022-06-22</p>
</footer>
</main>
<script type="text/javascript">