Javascript 1o1 - Working with DOM - 2
Tags: javascript, javascript1o1
Published: 2020-10-08 13:27:06

This article was originally published on my [Hashnode Blog](https://binayak.hashnode.dev/working-with-dom-2)

This article covers

1. `setAttribute` , `getAttribute` & `removeAttribute`
2. Changing Style of HTML Element
3. `kebab case`, `pascal case` & `camel case`
4. Specific way of adding, removing class to HTML Element

### setAttribute
Yes, as the name suggests, this method is used to add attribute `HTML` element
```html
<button  id='button'>Click </button>

<script>
let button = document.querySelector("#button");
button.setAttribute('title','Button');
</script>
```
Output:
![set Attribute - Binayak - Js 1o1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602160550266/zbp76kXhw.png)

### getAttribute

```html
<button  id='button' title='button'>Click </button>
<script>
let button = document.querySelector("#button");
console.log(button.getAttribute('title')); //prints text "button" in console
</script>
```

### removeAttribute
```html
<button  id='button' title='button'>Click </button>
<script>
let button = document.querySelector("#button");
button.removeAttribute('title');
</script>
```
Output:

![remove Attribute - Binayak - js 1o1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1602160981671/5WN-i7RLG.png)


### Changing Style of HTML element
Every `HTML DOM` have a property called `style` which holds the style of HTML Element

You can change the color of an `HTML` element by
```html
<div id='content'> Hi There , I m Binayak </div>
<script>
let  content = document.querySelector("#content");
content.style.color="red";
</script>
```
the `style` property of HTML is an object which holds all the style values of the element

For instance
```html
<script>

content.style.color; //returns color
content.style.color = "blue"; //sets the color to blue

content.style.position; //returns the position of element
content.style.position = "absolute";// sets the position to absolute

</script>
```
the style is accessed in the same way we set style using CSS.
But there is a little twist with the style property having two words. for example `background-color`

For instance
```html
<script>
content.style.background-color = "black"; //not valid

content.style.backgroundColor = "black"; //valid
</script>
```
 Those property containing two words is used in `kebab case` in CSS but is accessed using `camel case` in JS.

>`Camel Case` : nameOfPerson <br>
the first letter capital of all words except the first word



>`Kebab Case` : name-of-person <br>
a hyphen `-` between words



>`Pascal Case`: NameOfPerson <br>
first letter capital of each word


### Adding and removing class from HTML element

There is a property called `classList` in HTML element. which contains the list of class (as the name suggests)

Good thing is that property has two special methods

1. `add`
```html
<div id='content'> Hi There , I m Binayak </div>
<script>
let  content = document.querySelector("#content");
content.classList.add("primary-content");
</script>
```
It adds the class `primary-content`  to the element

2. `remove`
```html
<div id='content' class='primary-content'> Hi There , I m Binayak </div>
<script>
let  content = document.querySelector("#content");
content.classList.remove("primary-content");
</script>
```
It removes the class `primary-content` from the element.


***Note:***
Using `setAttribute` to add class to `HTML` element is a bad practise.
because it removes all the previous class from the element
For instance
```html
<div class='container' id='content'>This is a container</div>

<script>
let content = document.querySelector('content');
content.setAttribute('class','jumbotron');
```
now this div has only one class i.e, `jumbotron`.

Be a good boy and use `classList.add` to add class and `classList.remove` to remove the class to remove unnecessary headaches in the future 😂.