This is the fourth day of my participation in Gwen Challenge

preface

Looking through my notes these days, I came across an unremarkable fact that HTML has several attribute values of Boolean type, which reminds me of a mistake I made a few years ago when I was using jquery.

A simple mistake

That’s what I wrote at the time

<input type="text" disabled="false" class="username">
Copy the code

When the page is accessed, the input box does not say “undisabled” as I expected. I knew I could just delete the Disabled property, but I still wondered why setting disabled to false didn’t work. When I flip through the data, I realize that the fact that the property exists means that the property works, as do readonly, Checked, selected, and Autofocus

The attribute and the property

I believe you are familiar with these two words, but why are they compared? Both of them can be translated as attributes. In jquery1.6, the distinction between $.prop() and $.attr() was introduced. The corresponding abbreviations are attribute and property. Let’s start with the difference between the two methods. Many tutorials simply state that prop() should be used to retrieve property values. To retrieve HTML properties, use attr() instead. It’s not clear what an attribute value is, what an HTML attribute is, okay

Attr () and prop ()

In fact, the property value is the property value of the js object, the object here is actually a DOM object. In the error example above, I said that these attributes are Boolean, but obviously they don’t seem to show up in HTML attributes. But you can see the difference using these two methods

$('.username').attr('disabled') //disabled
$('.username').prop('disabled') //true
Copy the code

Using the attr attribute to take the value of such a Boolean attribute is an HTML document literal value. Let’s look at another example

<a href="#" class="link"></a>
<script>
    console.log($('.link').attr('href')) / / #
    console.log($('.link').prop('href')) //file:///C:/Users/immortal/Desktop/demo.html#
</script>
Copy the code

For the SRC attribute, attr gets the literal value of the HTML document, while prop gets the actual URL

The difference between prop and ATTR is that prop is a DOM object, while attR is an HTML attribute.

Modify or add a custom property

Both JS and JQ have methods to modify a property, but it is important to note that standard Dom object modifications modify HTML properties and vice versa, except for the value property, which is one-way

<a href="#" class="link" value="test"></a>
$('.username').prop('value'.'1111'The $()'.username').attr('value') //test

$('.username').attr('value'.'1111'The $()'.username').prop('value') / / 1111
Copy the code

The values may not be as good as you’d expect, but they all show up correctly on the page as 1111

Using Jq as an example, manipulating DOM objects with JS has the same effect as setting HTML properties.

To be sure, nonstandard attributes do not map to each other, either manipulating DOM objects or Html attributes, but to prevent future updates to the Html standard, let the addition of nonstandard objects not cause unexpected problems. We should use the data- prefix to set the non-standard properties, and the new data- properties can be added to the DATASET properties of the DOM object

$('.username').attr('data-img'.'111'The $()'.username').prop('dataset')//DOMString {img: "111"}
document.querySelector('.username').dataset //DOMString {img: "111"}
$('.username').data('img') //111 jq data method can easily fetch img
Copy the code

DOM objects and Html attributes

Let’s summarize their differences

  1. In the error at the beginning of this article we learned that Html attributes can only be strings or null(there is no such attribute), whereas DOM objects can have values of any type
  2. DOM objects or Html attributes can be added or deleted freely, but it should be noted that the standard attributes are one-way value, and the non-standard attributes can be added to the dataset attribute with the prefix of data-