在大多数文章中，attribute一般译为“feature”，property译为“属性”。结语先写结语。如果你都明白了，以后就不用看了。HTML属性DOM属性值始终为字符串或null值可以是任何合法的js类型不区分大小写返回null如果不存在则返回undefinedforhref，返回html为href设置的值解析后返回完整的url更新值，属性也更新更新值，属性不更新概述当我们写HTML代码时，我们设置propertieselement>，对于例子：我们写了一个input标签，为他定义了两个characteristics（id和value）。浏览器在解析这段代码的时候，会将html源代码解析成DOM对象，准确的说是解析成HTMLInputElement对象。HTMLInputElement的继承关系是：HTMLInputElement↓HTMLElement↓Element↓Node↓EventTarget↓Object通过查看文档，你会发现HTMLInputElement的原型定义了很多属性和方法，比如如form、name、type、alt、checked、src、value等，还有继承自HTMLElement的id、title、clientTop等。仔细看不难发现，这里有我们为input标签定义的characteristic：id和value。当浏览器解析网页时，它会将HTMLattributes映射到DOMattributes。Element类还有一个attributes属性，它包含了所有的属性。但是，HTML属性和DOM属性之间并不总是一对一的关系。1.DOM属性当浏览器解析HTML时，生成的DOM是一个继承自Object的常规JavaScript对象，因此我们可以像操作任何JS对象一样操作DOM对象。constel=document.getElementById('name')el.foo='bar'el.user={name:'jjc',age:'18'}也可以给它加上方法。如果你想为每个html元素添加属性或方法，你甚至可以直接修改Element.prototype，但不推荐这样做。2.HTML特性类似于DOM属性。除了规范中定义的标准特性外，HTML还可以添加非标准属性，例如：当HTML属性映射到DOM时attributes，只映射标准属性，访问非标准属性会导致undefined。constel=document.getElementById('name')el.foo===undefined好在DOM对象也提供了操作特性的API：Element.hasAttribute(name)–判断某个特性是否存在elem.getAttribute(name)–获取指定属性的值elem.setAttribute(name,value)–设置指定属性的值elem.removeAttribute(name)–移除指定属性以上API都是在Element上定义的。根据HTML规范，标签和属性名是不区分大小写的，所以下面的代码是一样的：el.getAttribute('id')el.getAttribute('ID')el.getAttribute('iD')和，attributes总是两者都是字符串或空值。如果我们为属性设置一个非字符串值，引擎会将这个值转换为字符串。属性是类型化的：el.getAttribute('checked')===''//属性是一个字符串el.checked===false//属性是一个布尔值el.getAttribute('style')==='color:blue'//属性是一个字符串typeofel.style==='object'//属性是一个CSSStyleDeclaration对象即使都是字符串，属性和属性也可能不同，一个例外是href:el.getAttribute('href')==='#tag'//该属性原样返回html设置的值el.href==='http://jjc.fun#tag'//该属性返回解析后的完整uri3.属性与属性的同步当一个标准属性被更新时，相应的属性也会被更新；反之亦然。但是input.value的同步是单向的，就是attribute-->property。当一个属性被修改时，该属性也会更新；但修改属性后，属性保持原值。el.setAttribute('值','jjc');//修改属性el.value==='jjc'//属性也更新了el.value='newValue';//修改属性el.getAttribute('value'))==='jjc'//Featurenotupdated4.非标准特性非标准HTML特性不会自动映射到DOM属性。当我们在feature的开头使用data-时，会映射到DOM的dataset属性。破折号格式会变成驼峰式：el.setAttribute('data-my-name','jjc');el.dataset.myName==='jjc'el.setAttribute('data-my-AGE',18);el.dataset.myAge==='18'自定义属性VS非标准属性HTML允许我们自定义标签和扩展标签的属性，但是我们推荐使用已经进入HTML5规范的自定义属性data-*。例如，如果我们想在div标签中添加年龄特征，我们可以有两种选择：justjavac
