Check out a free preview of the full Advanced JS Fundamentals to jQuery & Pure DOM Scripting course:
The "Implementing the attr() method" Lesson is part of the full, Advanced JS Fundamentals to jQuery & Pure DOM Scripting course featured in this preview video. Here's what you'd learn in this lesson:

The DOM provides an API for getting and setting attributes of elements. Justin demonstrates how to implement a more versatile attr() method.

Get Unlimited Access Now

Transcript from the "Implementing the attr() method" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Justin Meyer: Real quick, just to recap what Alexis just did. It was all about metaprogramming, right? I didn't wanna, we didn't wanna write that same code that would do for the parent method to, given the original collection, go get the parent of every item in the collection and create a new collection.

[00:00:22] I didn't wanna have to write all of that code every time. So we were trying to teachmeta programming so that instead, well, I just make a function that gives the relationship between the source elements and the elements we want in the final collection. I can just describe that relationship and I have a function that does all of the repetitive work for us.

[00:00:44] And that's what we were showing. So if you look back at our example, if you wanna learn about how to do metaprogramming, which is very common in open source frameworks, this is an example of it. Our makeTraverser simply,
>> Justin Meyer: Given a function, returns another function that goes through the source collection, calls the translation function to get the new elements out of it and eventually compiles them all into another jQuery collection, cool.

[00:01:13] So now we're going to finish up and try to talk about how to get and set properties on an element, and how to read styles from an element. Yep?
>> Student: What about when you said [INAUDIBLE] Don't you need need to read it when you're done? Or the [INAUDIBLE]

[00:01:37]
>> Justin Meyer: Depending on what the context is, but we can talk about memory management if there's time at the end. [COUGH] So, getting and setting attributes. So the DOM provides a bunch of methods for getting and setting attributes. You've all seen like a type on a type attribute. Sometimes those are properties, like you can see below.

[00:02:05] But you can also get and set them as attributes, all right? So, real quick, if I were to take a look at this page.
>> Justin Meyer: And at this point, also, I'm going to do all the exercises. You guys don't have to follow along coding them. And we'll just use the final example to build the tabs at the end.

[00:02:31] If you want to do the tabs, we do it at the end. So I'll write all of my query for us, but the tabs, you can use my query to write the tabs widget. So every,
>> Justin Meyer: Element here, there's attributes. These are the attributes, and I can get and set them.

[00:02:52] So if I get my,
>> Justin Meyer: Wrong button. If I open my console, I get the input element.
>> Justin Meyer: I can change its, I can't change its attribute. What I wanna be able to do is change its attribute. I can call manually the DOM method setAttribute.
>> Justin Meyer: To change its id to INPUT-ID.

[00:03:26] And if I look in the DOM,
>> Justin Meyer: You can see the ID has changed. So jQuery's attribute method allows you to call attr, give the name of the property, and the value you want that attribute to be set to. So the name of the attribute and the value I want the attribute set to.

[00:03:54] So if I did like foo-bar, I'd expect this input to get
>> Justin Meyer: I'd expect this input's id property to be set to foo-bar. And if we don't do it, I should expect to be able to read it back. But that doesn't work because I didn't implement attr. So you can probably guess how to implement attr.

[00:04:22] Can someone guess real quick? It's gonna be just like the HTML. It's gonna be very similar to the HTML and val functions. Where is it?
>> Justin Meyer: What am I gonna be doing when I set an attribute? What was that method called?
>> Student 2: Set attribute?
>> Justin Meyer: Set attribute. But it's good to repeat, cuz I want you guys to remember this stuff.

[00:04:50] So if it seems like I'm giving you an obvious question, it's just to hammer it home. So I wanna know if I'm in the setter. So if I'm gonna be doing a set, that means I'm gonna be getting two arguments. So I'll do arguments.length is greater than 1, meaning 2.

[00:05:08] If it is, I'm going to go through each item and set its attribute to value.
>> Justin Meyer: Make sense right there? Just simply setting the attribute. And then if I'm not doing that, I'm reading. It's again, the same thing as we did before. I'm gonna return. Make sure there's a 0 with a first property in our collection, and I'm going to call what?

[00:05:56]
>> Student 2: This 0 getAttribute.
>> Justin Meyer: Awesome.
>> Justin Meyer: With the attrName.