Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Making Changes to the DOM Changing Element Attributes

Posted by ja5on
ja5on
10,338 Points

1.57 in video p.title

Where does p.title come from I cannot find in any file?

2 Answers

Peter Vann
Peter Vann
36,425 Points

Hi Jason!

All/any HTML elements can have a title attribute.

(Most, really - for some elements a title doesn't really do anything, such as the <head> element)

The title is actually the little text message that pops up when you hover over a visible element long enough (in some other languages, such as Visual Basic, they call it a "Tooltip").

Of course, it needs to be set to do anything (if you don't declare the title, no message will pop up).

So, therefore:

p.title = "List description"

Will set and create an otherwise non-existing title/tooltip for the description-paragraph element (HTML attributes don't exist for an element until you set/declare them, essentially).

More info:

https://www.w3schools.com/tags/ref_attributes.asp (ALL POSSIBLE HTML ATTRIBUTES)

I hope that helps.

Stay safe and happy coding!

ja5on
ja5on
10,338 Points

Hi thanks for your previous reply, I was just wondering why the other paragraph didn't alter when Guil used
p.title = "list description"; in app.js ?

In other words how did he only set "List description" for the second paragraph or p element and not for first paragraph or p element. How did JavaScript know?
My thoughts are that p.title = "list description"; is changing the <p class="description"> so is the class name the title? I hope you can see where I'm going with this, hahaha maybe I'm drifting off course here.

Karen Montalvo
Karen Montalvo
2,397 Points
Karen Montalvo
Karen Montalvo
2,397 Points

The other paragraph was not affected because he had already set the value of p to only be any paragraph that had the class name 'description'.

const p = document.querySelector('p.description');

Also, he didn't change the class name, instead, he added a title attribute with the value 'list description' to p. 

p.title = 'List Description'

I hope that this was the answer to your question.

Alan Lane
Alan Lane
9,156 Points

If I understand this correctly, with the first line of code <p> is declared and querySelector is selecting the <p> with the class of .description, and in the second line of code since <p> has already been declared in the above statement we add the attribute of title and give it the value of 'List Description'