You don't really need jQuery to manipulate the DOM. Here are 10 popular methods for manipulating the DOM 💈

1. document.querySelector(#name) //returns the 1st element from the DOM with the id of name.

2. document.getElementbyId(head) //returns an element with id of head

Next👇 Image
3. var btn =document.querySelectors(.btn) //returns ALL elements from the DOM with a class of btn.

4. btn.addEventListener('click', foo); // calls a function (foo) anytime 'btn' element is clicked

5. btn.removeEventListener('click',foo); //detaches event listener from btn.

👇
6. var Para = document.createElement('p')
//creates a paragraph element in JavaScript. Not in DOM yet

7. var strong = document.createElement('strong');
strong.textContent = 'Hello';
p.appendChild(strong);

//textContent adds inner text
//strong is then nested inside paragraph
8. p.removeChild(strong); //removes the previously inserted strong element

9. var em = document.createElement('em');
var strong = document.querySelector('strong');
var p = document.querySelector('div');
em.textContent = 'hi';
p.replaceChild(em, strong);
// replaces strong
10. var em = document.createElement('em');
var strong = document.querySelector('strong');
var div = document.querySelector('div');
em.textContent = 'hi';
div.insertBefore(em, strong);
//Inserts em before strong inside div.

Others:
cloneNode()
getAttribute()
getAttribute()

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Kingsley Ubah ✨

Kingsley Ubah ✨ Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @UbahTheBuilder

27 Jan
Do you use or want to learn about the Express.js framework?

Here is a cleansheet which I have put together on Express.js which includes the request and response HTTP methods and middlewares

A thread 💈 ⬇️
The basic actions in Express.js which comprises:

- Importing express module
- Instantiating your app
- Listening at a port number
- Setting and getting properties
Request handler methods which are HTTP verbs for handling API requests

⬇️
Read 5 tweets
25 Jan
Are you interested in learning Python?

A thread on Python's basic syntax 🧵

P/S: If you liked this thread, please retweet.
VARIABLES
- Variable names are case sensitive (name and NAME are
different variables)
- Must start with a letter or an underscore
- Can have numbers but must not start with one
- Python is loosely-typed (you don’t specify the type when
declaring a variable.
FUNCTIONS

- In python, functions are defined with the def keyword.
- Indentation is used instead of curly braces.
- A colon is placed after the parameters.
- No semi-colons.
Read 12 tweets
20 Jan
Want to learn web programming?

Here are links to sites where you can learn about web development languages and tools for free.

Learn:

- HTML5
- CSS3
- JavaScript
- React
- Git version control
- Node and npm
- MySQL
and many more.

A thread 💈

#100DaysOfCode
#CodeNewbie

👇 Image
HTML5 -

This is the markup language used to structure web pages. You can learn all the basics at @Traversemedia's HTML crash course:

JAVASCRIPT -

JavaScript is the language of the browser.

No better way to learn JavaScript in-depth than reading the docs at Mozilla Development Network:

developer.mozilla.org/en-US/docs/Web…
Read 9 tweets
19 Dec 20
🌟 A thread of tips, lessons, gotchas, syntactical conventions, semantics, structures and common errors regarding JavaScript.

Follow to be enlightened!

#100DaysofCode
#Javascript
#CodeNewbies
🌟 1: All programming languages works with data, and there are 7 built in data types in #JavaScript:

• null
• undefined
• boolean
• number
• string
• object
• symbol—added in ES6!

They are also called primitive types

#100DaysOfCode
#CodeNewbies
🌟 2: #null essentially means "no data", empty, nada. #undefined means data has not been explicitly defined or declared. #boolean evaluates to either true or false. #numbers are digits between 0-9, #strings are characters enclosed within double quotes

#100DaysOfCode
#CodeNewbie
Read 32 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!