DOM guide for beginners #2

Important things to know

innerHTML -> innerHTML is used to change the content of the data. It also can affect the styling of the element by using tags like italic, bold etc. It has more priority than innerText.

innerText -> innerText is also used to change the content of the data. But it only replace the existing data with new one, It can't affect the styling of the element.

Id -> Id is an identity given to a tag or element in HTML. It is a unique name used to identify that particular piece of code in DOM. If you have experience with html and css you probably know about it. Id should be unique in html. We can give multiple id to a element but it is recommended to give a id at a time. To access id in css we use '#' pound.

Class -> Class is a name given to a tag or element. It can be multiple for single element. To access class in css we use (.) period character.
Example --

HTML
<p id = "id1"> This is a id paragraph </p>
<p class = "class1"> This is a class paragraph. </p>

CSS
#id1
{
font-size: 20px;
color: #fff;
}

.class1
{
font-size: 20px;
color: #fff;
}

What is selector and it's types

AS we work with js we have selector to select html element and manipulate accordingly. There are two types of selectors.

1. Single Selectors
2. Multi -selectors

Single Selectors

Single selector are used to select the single element at a time. We can select element by multiple ways i.e

1. document.getElementById();
2. document.getElementByClass();
3. document.getElementByTagName();
4. document.getElementByName();

1. getElementById()

As the name suggests, It will get element by id.

 <div>
    <h2 id="myHeading">Hi there!</h2>
    <p class="myParagraphs">Look at us</p>
    <p class="myParagraphs">we’re a group</p>
    <p class="myParagraphs theLastParagraph" name="theLastOne">of paragraph tags.</p>
</div>

<script>
    let element = document.getElementById('myHeading');
    element.innerHTML = '<b> This paragraph has been changed</b>'
</script>

---Output---
Hi there!
Look at us
we're a group
This paragraph has been changed

2. getElementByClassName()

As the name suggests, It will get element by class.CLass selectors act as an array. SO to access element by using class id use index number.

 <div>
    <h2 id="myHeading">Hi there!</h2>
    <p class="myParagraphs">Look at us</p>
    <p class="myParagraphs">we’re a group</p>
    <p class="myParagraphs theLastParagraph" name="theLastOne">of paragraph tags.</p>
</div>

<script>
    let element = document.getElementByClassName('myParagraphs')[0];
    //element.innerHTML = '<b> This paragraph has been changed</b>'
</script>

---Output---
Look at us

3. getElementByTagName()

As the name suggests, It will get element by class.

 <div>
    <h2 id="myHeading">Hi there!</h2>
    <p class="myParagraphs">Look at us</p>
    <p class="myParagraphs">we’re a group</p>
    <p class="myParagraphs theLastParagraph" name="theLastOne">of paragraph tags.</p>
</div>

<script>
    let element = document.getElementByTagName('p');
    element.innerHTML = '<b> All paragraph has been changed with tag 'p' </b>'
</script>

---Output---
Hi there!
All paragraph has been changed with tag 'p'
All paragraph has been changed with tag 'p'
All paragraph has been changed with tag 'p'

4. getElementByName()

As the name suggests, It will get element by class.

 <div>
    <h2 id="myHeading">Hi there!</h2>
    <p class="myParagraphs">Look at us</p>
    <p class="myParagraphs">we’re a group</p>
    <p class="myParagraphs theLastParagraph" name="theLastOne">of paragraph tags.</p>
</div>

<script>
    let element = document.getElementByName('theLastOne');
    element.innerHTML = '<b> This paragraph has been changed</b>'
</script>

---Output---
Hi there!
Look at us
we're a group
This paragraph has been changed

Multi-Selectors

Multi-selector is used to select the child of a child. Basically it is used for nesting.

HTML
<div id="parent-container">
    <div class="child-container">
        <a href = 'google.com' class="child>child1</a>
        <a href = 'google.com' class="child>child1</a>
        <a href = 'google.com' class="child>child1</a>
        <a href = 'google.com' class="child>child1</a>
    </div>
</div>

<script>
    let elem = document.getElementById('parent-container');
    elem = document.getElementByClassName('child-container');
    console.log(elem[0].getElementByClassName('child'));

querySelector

querySelector is basically to select element of all type without any type like id, class or tag.

console.log(document.querySelector('child');