Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In an HTML document, a developer can type in any attributes, even if they don't necessarily exist and pretend they're valid HTML. The browsers usually ignore them, but validaters will flag these as not being normal HTML. This is the HTML for the document we've been working with. And if I want to, I can add a coolness attribute here and set it to whatever I want. Now, the browser is probably going to ignore this attribute and not do anything with it, but if I try to validate my document. I want to copy this and I'll switch over to the WC3 validater.
So, let's take a look at how that works. So, for example, on this page, I want to get to one of these images right here, because I've added a special attribute called data task to some of these speakers. So, I'm going to get to the console. And I'll hit this magnifying glass and click on, I'll click on this second image. I think that has the right attribute. Notice that that one has a data task of speaker. And that's really the one I want to target. So, what I'll do is I'll create a variable.
And this time I want to choose queryselectorall because I want to get all of the images. And I'm going to hit Return, type in myNode and hit Enter. You can see a list of every one of the presenters. Notice that some of them have a data task attribute. So, if I want to get the value of that attribute, first I need to make sure that I have the right target. So, if I say myNode and I want to get the second element, which is element one, because I raised our 0 indexed and that gets me to that element. So, I can say something like myNode1.dataset, and use the name after the hyphen, right here, so just call it task.
And it let's me know what the value of that is. So, if I want to set that, all I have to do is give it a name right here. I'll call this presenter, presenter. And that modifies the value of that node. So I can set it back, just as easliy. Now this is really handy in accessing elements in projects created with frameworks like jQuery mobile, because it heavily uses the data attribute to set things. However, it does have spotty support in browsers.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97068 Viewers
61 Video lessons · 84386 Viewers
71 Video lessons · 68602 Viewers
56 Video lessons · 101085 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.