A, the attribute
Related methods are:
The concept of getAttribute, setAttribute, createAttribute, and removeAttribute is easy to understand
Related attributes are:
getAttributes
These are dom object methods, not document object methods, for example:
document.getElementById('root').getArribute("attr1");
Copy the code
The following is shown in code:
<div id="root">
<p id="child1" attr1="Custom Properties"> This is a p tag </p> <link id="child2" href="Original property"> This is a link </link> </div> <script> window.onload=function() {let attr1=document.getElementById("child1").getAttribute("attr1");
let attr2=document.getElementById("child2").getAttribute("href"); console.log(attr1,attr2); } </script> console output: custom properties original propertiesCopy the code
The getAttribute() method is used to get the values of the custom attribute and the original DOM attribute
GetAttributes (Get the set of attributes defined by the HTML):
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">Div</div>
<script>
var in1=document.getElementById("div1");
console.log(in1.attributes);
</script>
Copy the code
You can see that getAttributes returns an object of type NamedNodeMap.
Second, the property
Property is a property in the DOM, it’s an object in JavaScript;
<div id="div1" class="divClass" title="divTitle" title1="divTitle1"></div>
var in1=document.getElementById("div1");
console.log(in1);
Copy the code
As shown: you can see the property of the DOM object whose ID is div.
The following output shows some attributes in HTML. You can only get the values of the existing attributes in the DOM through the property, not the values of the custom attributes.
console.log(in1.id); //div1
console.log(in1.className); //divClass
console.log(in1.title); //divTitle
console.log(in1.title1); //undefined
Copy the code
Three, attr
Attr () is a jquery method for defining and retrieving attributes
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">Div</div>
<script>
console.log($("#div1").attr("title") and $("#div1").attr("title1"The $())"#div1").attr("title2"."title2");
console.log($("#div1").attr("title2")); </script> returns the result: divTitle divTitle1 title2Copy the code
The attr method can be set to get custom property values as well as the original property values.
Four, prop
The prop() method is also provided by jquery and is used to set and get the inherent attribute values of elements
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">Div</div>
<script>
console.log($("#div1").prop("class"));
$("#div1").prop("title"."Assign title");
console.log($("#div1").prop("title")); </script> returns the result: divClass assigns titleCopy the code
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">Div</div>
<script>
console.log($("#div1").prop("title1"));
$("#div1").prop("title2"."Assign a value to title2 property");
console.log($("#div1").prop("title2")); </script> returns the result: undefined assigns a value to the title2 propertyCopy the code
The prop method does not directly obtain the values of the element's custom attributes. Only the custom attributes set through prop can be obtained through the prop method.
Differences between PROP and ATTR
The inherent properties of some elements, such as the Checked property of the checkbox, can only be obtained through the prop method, not the attr property
<input id="chk1" type="checkbox"/> Whether <input id="chk2" type="checkbox"<script> console.log($("#chk1").prop("checked"));
console.log($("#chk2").prop("checked"));
console.log($("#chk1").attr("checked"));
console.log($("#chk2").attr("checked")); </script> Returns the result:false
false
undefined
undefined
Copy the code
Native JS attributes and custom attributes can be set with attributes, or property can be used to obtain element attributes. With jquery, inherent properties (except for some special properties like Checked) can be obtained using either prop or attr. It is best to obtain custom properties using attr because prop can only obtain custom properties that are set by a prop method
The table below is for reference only:
methods | Inherent attributes of elements | Custom attributes |
---|---|---|
property (js) | true | false |
attribute (js) | true | true |
attr (jquery) | true | True (except for some special attributes, like checked) |
prop (jquery) | true | False (available with custom properties set through the prop method) |