一，attribute
相关的方法有：
getAttribute，setAttribute，createAttribute，removeAttribute四兄弟的概念比较容易理解
相关属性有：
getAttributes
这几个都是是dom对象的方法，而不是document对象的方法，例如：
document.getElementById('root').getArribute("attr1");
下面通过代码展示：
<div id="root">
<p id="child1" attr1="自定义属性">这是一个p标签</p>
<link id="child2" href="原有属性">这是一个链接</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>
控制台输出结果：
自定义属性 原有属性
通过getAttribute()方法可以获取自定义属性与原有dom属性的值
getAttributes(获取html所有的定义的属性集合):
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">Div</div>
<script>
var in1=document.getElementById("div1");
console.log(in1.attributes);
</script>
可以看到getAttributes返回的是一个NamedNodeMap类型的对象。
二，property
property是DOM中的属性，是JavaScript里的对象；
<div id="div1" class="divClass" title="divTitle" title1="divTitle1"></div>
var in1=document.getElementById("div1");
console.log(in1);
如图：可以看到id为div的dom对象的property.
下面输出html上的一些属性，可以看待通过property只能获取dom上原有的属性值，而不能获取自定义属性值。
console.log(in1.id); //div1
console.log(in1.className); //divClass
console.log(in1.title); //divTitle
console.log(in1.title1); //undefined
三，attr
attr()是jquery定义的关于属性定义以及获取的一个方法
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">Div</div>
<script>
console.log($("#div1").attr("title"),$("#div1").attr("title1"))
$("#div1").attr("title2","title2");
console.log($("#div1").attr("title2"));
</script>
返回结果：
divTitle divTitle1
title2
由此可看：attr方法可以设置获取自定义属性值以及原有的属性值，
四，prop
prop()方法也是jquery提供的方法，主要是用来设置和获取元素固有的属性值
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">Div</div>
<script>
console.log($("#div1").prop("class"));
$("#div1").prop("title","给title赋值");
console.log($("#div1").prop("title"));
</script>
返回结果：
divClass
给title赋值
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">Div</div>
<script>
console.log($("#div1").prop("title1"));
$("#div1").prop("title2","给title2属性赋值");
console.log($("#div1").prop("title2"));
</script>
返回结果：
undefined
给title2属性赋值
prop方法并不能够直接获取元素自定义属性的值，只有通过prop设置的自定义属性，才可以通过prop方法获取到。
prop 与 attr的区别
一些元素的固有属性，例如checkbox的checked属性只能通过prop方法进行获取，而不能通过attr属性获取
<input id="chk1" type="checkbox" />是否可见
<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>
返回结果：
false
false
undefined
undefined
原生js的固有属性和自定义属性可以用attribute，进行相关的设置，还可以使用property获取元素固有属性。如果使用jquery,固有属性（除了一些特殊的属性，如checked除外）可以使用prop和attr都行，自定义属性获取最好使用attr方法获取，因为prop只能获取有prop方法设置的自定义属性
下面列出相关表格仅供参考：
| 方法 | 元素固有属性 | 自定义属性 |
|---|---|---|
| property (js) | true | false |
| attribute (js) | true | true |
| attr (jquery) | true | true(一些特殊属性除外，如checked) |
| prop (jquery) | true | false(通过prop方法设置的自定义属性可以获取到) |
