JavaScript Tutorial For Beginners #35 - Changing Element Attributes

Yo ninjas, so in this javascript lesson I want to build on the last tutorial by introducing the getAttribute and setAttribute methods for changing the attributes on your HTML elements.

getAttribute allows us to read the value of any given attribute, and setAttribute allows us to set the attribute value to whatever we want.

If you have any questions, fire away :)

========== JavaScript for Beginners Playlist ==========

========== CSS for Beginners Playlist ==========

========== HTML for Beginners Playlist ==========

========== The Net Ninja ============

========== Social Links ==========

[theBCBOMBER]

these tutorials are addictive! VERY helpful, and very grateful for people like you

[dastanazimov]

Ohhhh! You're the best!
The best tutorials i've watched!

[meisterunner]

You deserve about 100k more subs. Thanks for all the indirect help.

[Riquelvic]

Hi, Shaun first of all I want to thank you for your hard work. Second thanks for clearing my mind when you called .innerHTML and .textContent METHODS, i got a little confuse trying to set my mind. I love how HAPPY you start each tutorial video. GO GO NINJA. Thanks a lot.

[markbalazo]

Your vids are cool Sir, it makes me comprehend JS more. Thank you!

[pragun]

"what the hell, this is just an example". LOL!
I would love to personally meet this guy.

[tymothylim]

Thank you very much for this video :) It was really good and helpful for me!

[tomasmatusek]

I hope in fue vidios i will see how i can do that in VS studio :), not only in browser concole.

Bro agains THANKS alot for you tutorial. I will finish that and go on you paid tutorial for develop more about JS.
Im so motivated from your channel waw.

See you from Austria.

[aliey]

Good for the mistake, we learned how to distinguish between methods and properties

[benis]

Hi! Love ur vids!!
Is it just me or do properties and methods seem to work a little bit on the opposite side with the DOM? coz when you use innerHTML to change the tags and content, it's like u r using a method/or function, but using getAttribute, is like trying to show the property "attribute" ( even tho that's not the case) if that makes any sense.

[johnoverstreet]

Any chance I could talk you into annotating that intro with the changes onto the last video where you make the mistakes?

[jonhawkins]

I do like these videos - stuff delivered quickly and succinctly. I do have a question. Everything seems to assume attributes are set in-line, i.e. in the html file. What if the attributes are set in a separate css file. Can these be read using these methods too? I have tried to but all I get is null.

[CalebPendergast]

Is there anyway you could perhaps provide the html for your old website so we can follow along?

[piotrrodzen]

Just a question. Does changing those value in JS have any real use? I guess it would be easier to just change it in the HTML document.

[rosjio]

Have you thought about doing these tutorials in Brackets so it will be a
more real and easy to follow along demonstration?? - or do you get into
that later?

[arthurkateeba]

I have grabbed tagName and I want to set an id on the section element. My variable is myClass and I have tried document.setAtrribute("id", myClass[1]) but it is failing and so is myclass[1].setAttribute = "id", "pie". How am supposed to do it?

Thanks for the course, it maybe old but its helping me solidify my foundation of JS

[vincecaruso]

This is the thing that still confuses me about DOM... what difference does it make if I change an attribute (or anything for that matter), if it's just wiped away by refresh?

[plutonio]

I was testing. When get a class and try to apply the setAttribute method, the console print an error. But if a get an ID, there aren't error. So the only why to apply the setAtrribite is to wrap the content with ID, isn't it?

[adamchilds]

getAttribute does not seem to be showing as a function for me please could someone help

[elyassafazada]

Is there any way to change class attribute of an html tag permanently in whole of website.