DOM Manipulation 1

<!
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulation</title>
<link rel="stylesheet" href="https://stackedit.io/style.css" />
</head>
<body class="stackedit">
<div class="stackedit__html"><h2 id="dom-manipulation">DOM Manipulation</h2>
Pre-Requisites: 
For the rest of this cheatsheet, I will assume that you know HTML at an
intermediate level and understand CSS to some degree.
What is the DOM? 
<code>DOM</code> stands for Document Object Model. Basically, in the DOM,
the whole HTML structure of the webpage is referred to as the
<code>document</code> and each HTML element inside the document
is an <code>object</code>.
How to manipulate HTML Elements? 
We can do all sorts of things to HTML Elements including changing their inside
text, modifying the HTML contained within them, changing their attributes, changing
their styles etc. 
But to do all do this we must first access the element. Suppose we have the
following HTML body structure:
<pre class=" language-html"><code class="prism language-html">
<html>
punctuation"><head</head<body<div class="container" id="container-1"<ul class="list" id"list-1">
class="token punctuation"><li ="list-item" id="list-item-1</li</ul</div</body</html</pre>
We can access the elements in one of a few ways:
<pre class=" language-js"><code class="prism language-js">//example 1.1
const container = document.getElementById("container-1")
console.log(container) // <div
class="container" id="container-1"></div>
const list =

document.getElementsByClassName("list")
function">log(list) // [<ul class="list" id="list-
1"></ul>]
const listItems getElementByTagName("li"log(listItems) // [<li
class="list-item" id="list-item-1">List Item 1</li>...]
</code></pre>
Each DOM operation has a <code>parentNode</code> on which it acts. Here, we are
accessing elements from the whole document so, we prefix with
<code>document</code>. 
If we wanted to access elements that exist within a certain <code>node</code> we
would prefix with that <code>node</code> . <code>node</code> for all we care means
any <code>HTML Element</code> e.g.
comment">//example 1.2
const parent getElementById("parent"const children = parent.getElementsByClassName("children"log(children) // [...] all
children nodes of the parent node
</code></pre>
Notice in <code>JS exmaple 1.1</code> that, since <code>id</code> is a unique
identifier, and one id corresponds to one and only one element,
<code>getElementById()</code> returns only one element whereas, since
<code>class</code> and <code>tag</code> can refer to multiple elements,
<code>getElementsByClassName()</code> and <code>getElementsByTagName()</code>
return arrays.
However, all these techniques for accessing elements are considered bad
practice since they are hard to read and take too long to type. Additionally,
<code>getElementsByClassName()</code> and <code>getElementsByTagName()</code>
return arrays and if we only need the first element we must access
<code>[0]</code> of the array. But, there’s another way which is recommended and
should be used which is:
comment">

punctuation"><html<head</head<body"parent" id="parent-1<div ="child="child-1></div</body</html</pre>
keyword">const parent = document.querySelector(".parent")
const children querySelectorAll(".child"const child1 querySelector(".child"log(parent) //<div
class="parent" id="parent-1"></div> (first element that corresponds with
the given selector string)
function">log(children)//[...] (array of all
elements with the child class)
function">log(child1)// <div
class="child" id="child-1"></div> (first element that corresponds with the
given selector string)
</code></pre>
<code>.querySelector()</code> and <code>.querySelectorAll()</code>, instead of
taking in classes or ids, take in <code>CSS selectors</code>. Anything that is a
valid CSS selector will work (Yes Any!). <code>.querySelector()</code>
returns the first element that matches the given selector. While,
<code>.querySelectorAll()</code> returns a list of all elements that satisfy the
given condition.
Now that we have learnt about accessing, let’s move on to manipulation! This is
a very vast topic and requires ages to master. Teaching it, will probably be easier
by example. So let’s go through the making of a project that involves DOM
Manipulation. The prompt for the project is:
<blockquote>
Make a webpage that has a button. Each time, this button is pressed, increment
the counter displayed on screen.
</blockquote>
Project 1
New Topics Covered:
<ul>
<li><code>.addEventListener()</code></li>
<li><code>.innerText</code></li>
<li><code>.textContent</code></li>
</ul>
HTML: 
The HTML code for this site is pretty simple. Here is what the body looks like:
comment">
punctuation">"container""counter"<h2 class"counter-count"
data-count>0</h2"button-container">
punctuation"><button class="button" data-
button>
Click To Increment
punctuation"></button</pre>
We’ll be using custom attributes to access the elements. To give custom
attributes to elements, we prefix the attribute name by <code>data-</code> as shown
above in the example (<code>data-count</code>, <code>data-button</code>). We’ll
access these elements in JS using the standard CSS protocol i.e. by surrounding the
attribute’s name in square brackets e.g. <code>[data-button]</code>. Here is what
it looks like so far:
<img src="http://js-course-images.000.pe/page.png" alt="Project 1 with Basic
HTML">
CSS 
Here’s some basic styling to make it look pretty:
<pre class=" language-css"><code class="prism language-css">*, *::before, *::after{
margin:0;
padding:0font-family:Poppins, sans-serif;
box-sizing:border-box;
}
html, body{
width:
100%;
height: 100%body{
background: #2A2438color:
#DBD8E3;
.counter-count{
font-size:5rem.container{
width:
100%;
height: 100%display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:2rem.button{
punctuation">: #DBD8E3font-size:1.2rempadding:0.5em 1em;
color:
#2A2438;
border: #5C5470 0.1em solid;
border-radius:0.175emtransition: 0.15s ease-out;
cursor:pointer;
.button:hover, .button:focus: #352F44color:#DBD8E3</pre>
Here’s what it looks like now:
<img src="http://js-course-images.000.pe/page-with-css.png" alt="Project 1 with
CSS">
Enough styling, let’s get into functionality. First off, let’s get access to the
DOM Elements we’ll be needing.
keyword">const button = document"[data-button]")
const count ("[data-count]"</pre>
<code>"[data-button]"</code> and <code>"[data-count]"</code> are standard CSS
selectors to select elements by their attributes (<code>[attribute-name]</code>).
We used <code>.querySelector()</code> instead of <code>.querySelectorAll()</code>
because we only needed the first element which satisfied the conditions (because
their is only one of each on the page). 
Now, Here’s an interesting problem. How do we know when the button is clicked?
. Well, for that we have a handy method which is available on every DOM
node i.e. it is available for <code>document</code> and all elements we get
using <code>.querySelector()</code> etc. This method is
<code>.addEventListener()</code>. As the name suggests, it adds a listener
which listens for a particular event and then performs a given action. It
takes arguments as: <code>.addEventListener(eventType, function, options)</code>.
<code>options</code> is an optional argument and is not required so we’ll
ignore it for now. <code>eventType</code> is the type of the event we need to
listen to. It includes <code>"click"</code>, <code>"submit"</code>,
<code>"mouseover"</code>, <code>"change"</code>, <code>"DOMContentLoaded"</code>
etc. For a complete list see: <a
href="https://developer.mozilla.org/en-US/docs/Web/Events#event_listing">Full List
Of Events</a>. The <code>function</code> parameter takes in a function as its
argument and performs this function when that event occurs. The occurring of the
event is known as firing of the event.
<pre class=" language-js"><code class="prism language-js">button.addEventListener("click", () => //code to run when the event fires comes here

})
</code></pre>
Now what do we do when the event fires? Well, we must increment the counter. So
we can make a global variable <code>clickCount</code> that keeps track of the
amount of times the button is pressed. Each time the button is pressed, we update
this variable and set the count element to show its value. We do that by setting
the <code>.innerText</code> of the element. We can also use
<code>.textContent</code> which is better. Thus, the full code becomes:
keyword">const button = document"[data-button]")
const count ("[data-count]"let clickCount = 0
button.addEventListener("click", () => {
clickCount++
count.textContent = clickCount
})
</code></pre>
You can view a working example at: <a
href="https://codepen.io/as_2022/pen/eYQBqmN?editors=1000">Project 1
Complete</a>
</div>
</body>
</html>

DOM Manipulation 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

DOM Manipulation 1

Uploaded by

Copyright:

Available Formats

<!

<span class="token tag"><span class="token tag"><span class="token

<span class="token keyword">const</span> container <span class="token

<span class="token keyword">const</span> list <span class="token operator">=</span>

<span class="token keyword">const</span> listItems <span class="token

<span class="token keyword">const</span> parent <span class="token

console<span class="token punctuation">.</span><span class="token

<span class="token tag"><span class="token tag"><span class="token

console<span class="token punctuation">.</span><span class="token

<span class="token selector">html, body</span><span class="token

<span class="token selector"><span class="token class">.button</span></span><span

button<span class="token punctuation">.</span><span class="token

You might also like