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)