Transcript from the "Data Attributes" Lesson
>> Brian Holt: So,I guess there is one more thing on here that I had not talked about. Did Jen talk about data attributes on HTML? Okay, well, let's come back over here. Right now we have a bunch of moles showing up, including some more lutts. If I inspect element on this,
>> Brian Holt: I want inspector, rules, layout.
>> Brian Holt: Let's put this on the side and dock to right.
>> Brian Holt: Okay, so here you notice it has its data-index="0". There's a cool trick that you can do with HTML. So if I come in here and say, mole = document.querySelector.
>> Brian Holt: And what did I call them?
[00:00:54] I called them moles, right? Hopefully, class="mole", okay, .mole. So now mole is equal to this king element right there, right? So I'm gonna have 12 different moles on the page and it's gonna matter which one I click on, right? Because I have to not show that one, and I have to operate individually on each different mole.
[00:01:18] It'd be annoying to go bind to 12 event listeners, that's not at all what I wanna do. So it'd be cool if I could tell which one I was clicking on, and this data-index is gonna help us with that. So if I say mole.dataset.index, I'm gonna get whatever the data- is.
So it's basically a variable that you're keeping in the HTML.
>> Brian Holt: So let's go back here and say mole, querySelectorAll. So now I have all of them in here, right? So if I do moles of the fifth one on the page, or it would be the sixth one rather, data set.index, notice that that's five.
>> Brian Holt: -some-other-thing="this is cool".
>> Brian Holt: Now if I come back over here and refresh, and I grab that mole again.
>> Brian Holt: So notice that this is data-some-other-thing, right?
And then here when I reference it, the way that I do it, it's in case, and you also don't include the data in there.
>> Speaker 2: And dataset is the method that gets anything with the prefix data?
>> Brian Holt: Data dash.
>> Speaker 2: Data dash.
>> Brian Holt: Yep, that's exactly it. Okay, so that's what those data dash indexes are for.