Attributes 和 properties区别和联系？
当浏览器加载页面时，它会“读取”（或者称之为：“解析”）HTML 文本并生成 DOM 对象。对于元素节点，大多数 HTML 特性会自动变成 DOM 对象的属性.
HTML的特性和DOM对象的属性
并不是每个HTML文本生成DOM对象时都可以创建所有属性，只有对应的标准化特性才可以，比如每个元素都有的id 和input 含有type
如果没有自动生成想要的属性，可以自己添加
elem.hasAttribute(name) —— 检验是否拥这个特性
elem.getAttribute(name) —— 获取到这个特性值
elem.setAttribute(name, value) —— 设置这个特性值
elem.removeAttribute(name) —— 移除这个特性
elem.attributes —— 所有特性的集合
<body something="non-standard">
<script>
alert(document.body.getAttribute('something')); // non-standard
</script>
</body>
getAttribute('About')大小写时不区分的，attributes 以 name 和 value 这样的键—值对收集在一个可迭代对象里
特性与属性同步
<input>
<script>
let input = document.querySelector('input');
// 特性 => 属性
input.setAttribute('id', 'id');
alert(input.id); // id（更新了）
// 属性 => 特性
input.id = 'newId';
alert(input.getAttribute('id')); // newId（更新了）
</script>
有些只能从单向传递
<input>
<script>
let input = document.querySelector('input');
// 特性 => 属性
input.setAttribute('value', 'text');
alert(input.value); // text
// 这操作无效 属性 => 特性
input.value = 'newValue';
alert(input.getAttribute('value')); // text（没有更新！）
</script>
当属性值是布尔值
<input id="input" type="checkbox" checked> checkbox
<script>
alert(input.getAttribute('checked')); // 特性值是：空字符串
alert(input.checked); // 属性的值是：true
</script>
当属性值是对象时
<div id="div" style="color:red;font-size:120%">Hello</div>
<script>
// 字符串
alert(div.getAttribute('style')); // color:red;font-size:120%
// 对象
alert(div.style); // [object CSSStyleDeclaration]
alert(div.style.color); // red
</script>
还有一个非常重要的不同点。DOM 属性的字符串可能跟特性值的字符串所表示的不是同一个东西！
例如 href DOM 属性总是一个绝对路径的，而特性值只包含相对路径或者只包含 #hash 这一部分。
这里有一个例子：
<a id="a" href="#hello">link</a>
<script>
// 特性
alert(a.getAttribute('href')); // #hello
// 属性
alert(a.href ); // 绝对路径 http://site.com/page#hello
</script>
但是自定义的特性也存在问题。如果我们使用了一个非标准化的特性，之后却变成了一个标准化的值并用来做其他事情，HTML 语言一直在发展，越来越多的标准化特性解决了开发者的开发需求。这就是一个不可控的例子。
为了解决这个冲突产生了 data-* 这个特性。
所有以 “data-” 开头的特性值可以给编程人员正常使用，同时它还是 dataset 合法值。
例如, 如果一个 elem 有一个键名是 "data-about" 的特性，那么可以通过 elem.dataset.about 取到这个合法值。
像这样：
<body data-about="Elephants">
<script>
alert(document.body.dataset.about); // Elephants
</script>
<!DOCTYPE html>
<html>
<body>
<div data-widget-name="menu">Choose the genre</div>
<script>
console.log(document.body.firstElementChild.dataset.widgetName)
</script>
</body>
</html>