DEV Community

Himanshupal0001
Himanshupal0001

Posted on

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>
Enter fullscreen mode Exit fullscreen mode
CSS
#id1
{
font-size: 20px;
color: #fff;
}

.class1
{
font-size: 20px;
color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
---Output---
Hi there!
Look at us
we're a group
This paragraph has been changed
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
---Output---
Look at us
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
---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'
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
---Output---
Hi there!
Look at us
we're a group
This paragraph has been changed
Enter fullscreen mode Exit fullscreen mode

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'));
Enter fullscreen mode Exit fullscreen mode

querySelector

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

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

Enter fullscreen mode Exit fullscreen mode

Image description

Discussion (0)