Question: I have a HTML like this:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <div id='first'>
        <div id='second'>
            <div id='third'>

            </div>
        </div>
    </div>

</body>
</html>

```

I also have some Javascript code like this:

```
var element = document.createElement('div');
element.id = 'forth';
var parent = document.getElementById('third');
parent.appendChild(element);

```

When I run the javascript code, the HTML should change to:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <div id='first'>
        <div id='second'>
            <div id='third'>
                <div id='forth'></div>
            </div>
        </div>
    </div>

</body>
</html>

```

Then after I typed this line below in the Browser's console:

```
element.className = 'test';

```

What I hope is that only the variable 'element' in Javascript will change and have the class name 'test'. However, when I check my current HTML it also have the class name 'test': 

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <div id='first'>
        <div id='second'>
            <div id='third'>
                <div id='forth' class='test'></div>
            </div>
        </div>
    </div>

</body>
</html>

```

Can anybody explain that? Thanks so much!!

Answer: 
Elements in the DOM do not have classes in any other sense than possibly having a `className` property, either from a JavaScript assignment or from a `class` attribute in HTML markup. When you are looking at “your HTML” in a browser, it actually shows the DOM as linearized to HTML markup. This means, in particular, that if an element node has the property `className`, the element is shown as having the `class` attribute. This is effectively described in HTML5 CR in the description of the [`class` attribute](http://www.w3.org/TR/html5/dom.html#classes). It means that setting the `className` property (“IDL attribute” in HTML5 parlance) also sets the `class` attribute (“content attribute”).
The className property refers to the class attribute of an HTML element.