Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

JavaScript and the DOM

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Change Element Attributes

5:50 with Guil Hernandez

HTML tags are converted into objects (called nodes) and placed into the DOM. Attributes exist as properties of element objects, like the href attribute of an <a> element or the action attribute of a <form> element. You get or set those attributes by way of properties, similar to the way you did earlier with an input element's value property and a heading's textContent property.

className

The className property overwrites any existing classes on an element. When dealing with multiple classes on an element, the classList property offers a convenient alternative to accessing an element's list of classes.

Get and set attributes with JavaScript

The getAttribute and setAttribute methods provide alternative ways to manage element attributes.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    When the browser loads a web page, all the HTML tags are converted 0:00
    into objects called nodes and placed into a tree-like structure, 0:04
    the DOM, that's what lets you modify them with JavaScript. 0:08
    Like the href attribute of an anchor element or the action attribute of 0:13
    a form element, attributes exist as properties of those element objects. 0:18
    You get or set those attributes by way of properties similar to the way we did 0:23
    earlier with an input element's value property and 0:28
    a heading's textContent property. 0:31
    Let's head over to the browser console and 0:33
    access some of the attributes of elements in index.html. 0:35
    I'll first select the input element in the console 0:39
    with document.querySelector('input'). 0:43
    For this example, I'll assign the input to the variable myInput 0:51
    The input element has a type attribute which I can access with dot type. 1:01
    For example, myInput.type outputs the string 'text'. 1:07
    Let's assign the type property the string 'checkbox' and see what happens. 1:13
    Notice how the browser replaces the text field with a checkbox. 1:21
    Viewing the live document in the Elements panel shows that the input's type 1:26
    attribute changed to checkbox and refreshing the page resets the type value 1:31
    to text. 1:36
    You're also able to add new attributes inside an element's opening HTML tag. 1:41
    For example, I'll set the title attribute and 1:46
    value on the input element with myInput.title = 'Type heading text here'. 1:51
    Now when you place your mouse over the text field, a tool tip appears displaying 2:06
    "Type heading text here", indicating that the title attribute was set. 2:10
    And in the Elements panel, you can see the input element's 2:16
    title attribute, and value. 2:20
    The title attribute is often used to help identify form controls to users. 2:26
    So normally a title attribute would be better set directly in the HTML and 2:31
    not with JavaScript. 2:35
    I just wanted to show you how setting new attributes worked. 2:36
    How about I try to read the input's class name? 2:40
    I'll type myInput.class and this returns undefined. 2:43
    Well, "class" is an exception among attributes. 2:51
    It turns out that in JavaScript, 2:54
    "class" is a reserved word used to create a special type of function called a class. 2:57
    You'll learn more about those in a later course. 3:02
    Right now, all you need to remember is that you're not able to get and 3:05
    set the value of an elements class attribute using .class. 3:10
    Instead, you need to use the className property. 3:15
    For instance, myInput.className returns the string "input-main". 3:18
    I can also set a different class name by assigning the className 3:25
    property a string, like 'checkbox-update'. 3:30
    Typing myInput.className returns the updated string. 3:38
    And notice in the Elements panel how the input element's class 3:44
    attribute is now checkbox-update. 3:48
    And refreshing the page resets it to the initial class. 3:51
    Using .class is a common and easy mistake to make when getting or 4:00
    setting class attribute values. 4:04
    So remember that it's className and not class. 4:07
    I'll give you a chance to practice that now to help make it stick. 4:11
    In the file, style.css, there's a class selector named grow, 4:16
    declaring a font-size value of 4.8rem and a transition. 4:21
    Here in the btnUpdate EventListener, 4:27
    why don't you set the headline element's class to the value "grow"? 4:30
    That way, clicking the button not only updates the heading text, but 4:35
    also applies a transition increasing its font size. 4:39
    Feel free to pause me now and try it out. 4:42
    Okay, within the event listener's function, 4:46
    type headline.className and set it to the string "grow". 4:52
    Let's try it. 4:59
    Refresh the browser, Then type Hello headline!, 5:01
    into the text field and click the button. 5:07
    The text changes and transitions to a larger font size. 5:11
    And in the Elements panel, notice how the h1 now 5:16
    has a class attribute and its value is grow. 5:21
    Setting class names with JavaScript can be useful when you want to show or 5:25
    hide elements or 5:29
    add error indicators to form fields when users enter invalid information. 5:30
    For example, you can add a class attribute to an element with a class that hides 5:35
    content or a class that displays a form validation error. 5:40
    Up next, I'll teach you more about a property that you've already worked with, 5:43
    an element's style property. 5:47

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up