How to Manipulate the DOM - the Ultimate Beginner's Guide

Okay, so I assume you have heard of the almighty DOM — that’s why you are here, right? If you are finding it difficult, I can assure you that after reading this article, you will feel comfortable enough with the whole DOM manipulation thing.

But please before I start, permit me to share with you my little story on how I got to know about the DOM (its a funny story).

How I learned about the DOM

A few months into my web development career, I was still learning the good old HTML and CSS. I mistakenly stumbled upon a DOM course on w3schools. The first example they had was one with a light bulb and two buttons.

The onclick of one of the buttons would “switch on” the light bulb and the onclick of the second button would “switch off” the light bulb. I was literally blown away.

How could a button on a website switch on a light bulb? How!?

I even twitted about it. Then I found out that they were just changing the source attribute (src) of the images. I was heart broken, but regardless that little experience made me fall in love with the DOM. It made me want to know more.

And in this article I’m going to walk you through it. I promise that if you stick with me until the end and practice all that I write about, the whole DOM thing won’t be an issue for you ever again. So are you ready? Ok Allons-y (let’s go!).

To make this easier to understand, I have grouped everything into the following sections below.

• Definition of the DOM and Basic concepts
• How to Select Elements in the DOM
• How to Traverse and Move Around the DOM
• How to Manipulate Elements in the DOM
• General Styling
• Event handling in the DOM

So grab a coffee or anything you like and relax as I walk you through each section.

Definition of the DOM and Basic concepts

What is the DOM?

The DOM stands for Document Object Model. It can simply be understood as a tree of nodes created by the browser. Each of these nodes has its own properties and methods which can be manipulated using JavaScript.

The ability to manipulate the DOM is one of the most unique and useful abilities of JavaScript.

The image below gives a visual representation of what the DOM tree looks like.

Here we have the document object. This is the core/foundation of the DOM. To perform any form of DOM manipulation, you have to access the document object first.

Next we have the html root element which is a child of the document object.

Next on the line are the body and head elements which are siblings to each other and children of the html element.

Under the head element we have the title element which you can agree is the child of the head element and parent to the text node - “my text”.

Directly under the body element we have two elements (a tag and h1 tag) which are siblings to each other and children of the body element.

Finally the href attribute and the text node - “my link” - are children of the a tag. Exactly the same way the text node, “My header”, is a child of the h1 element.

This might seem a little confusing if you are an absolute beginner, but trust me - it always gets better (with practice of course).

#javascript #react #web-development #developer #programming

What is GEEK

Buddha Community

The Ultimate SQL Guide for Beginners in 2020.

SQL is a standard language for storing, manipulating, and retrieving data in databases. In this article, I’ll teach you the very basic fundamentals of the SQL language and hope you will be able to write your own database queries at the end.

What does SQL Mean?

SQL stands for Structured Query Language and lets you access and manipulate databases.

Syntax

Most of the actions you need to perform on a database are done with SQL statements. The following SQL statement selects all the records in the “Users” table:

SELECT * FROM Users;

Select

The select statement is used to retrieve data from a database. The requested data is returned in a results table.

SELECT column1 FROM table_name;

Select Distinct

The Select Distinct statement is used to return only distinct (different) values.

SELECT DISTINCT * FROM table_name;

Count

The following SQL statement lists the number of different customer countries:

SELECT COUNT(DISTINCT Country) FROM Customers;

Where

The Where clause is used to filter records.

SELECT column1
FROM table_name
WHERE condition;

For example:

SELECT * FROM Users
WHERE Country='Netherlands';

AND, OR and NOT Operators

The Where clause can be combined with AND, OR, and NOT operators. The AND and OR operators are used to filter records based on more than one condition:

• The AND operator displays a record if all the conditions separated by AND are TRUE.
• The OR operator displays a record if any of the conditions separated by OR is TRUE.

The NOT operator displays a record if the condition(s) is NOT TRUE.

AND

SELECT column1, column2, ...
FROM table_name
WHERE condition1 AND condition2 AND condition3 ...;

OR

SELECT column1, column2, ...
FROM table_name
WHERE condition1 OR condition2 OR condition3 ...;

NOT

SELECT column1, column2, ...
FROM table_name
WHERE NOT condition;

#tech #guides-and-tutorials #sql #beginners-guide #programming

The Ultimate React Guide For Beginners In 2020.

The Ultimate React Guide For Beginners In 2020. By Caspar Camille Rubin on Unsplash. React is a JavaScript library created by Facebook and is a great tool for building UI components.

#programming #javascript #guides-and-tutorials #tech #beginners-guide

DOM Manipulation Tutorial | jQuery DOM Manipulation Methods

This video on Querying DOM in jQuery will help you understand the DOM manipulation methods with hands-on.

#dom manipulation tutorial #jquery dom

What is DOM, Shadow DOM and Virtual DOM?

In this lesson, we learn about the Document Object Model. We learn what the DOM, Shadow DOM, and Virtual DOM are and how they work. We also look at some of the practical examples to understand them better.

#dom #shadow dom #virtual dom

The Ultimate Java Guide for Beginners in 2020.

Java is a high-level programming language. It was initially designed for developing programs for set-top boxes and handheld devices, but later became a popular choice for creating web applications. The Java syntax is similar to C++ but is strictly an object-oriented programming language.

I hope with this article that you’ll learn and understand the fundamentals of Java.

Getting Started

The first thing you need to do is install Java, and you can install an IDE such as Eclipse or IntelliJ.

#guid #java #programming #beginner #tech