ocument.getElementById('test').getAttribute('custom-attr') 或 $('#test').attr('custom-attr')一、DOM属性和HTML属性区别
1、HTML元素的属性，比如<img>元素的src，id等，最终浏览器会解析HTML，构建DOM模型，也就是说浏览器会解析HTML元素为DOM元素
2、javascript中获取到的都是DOM元素，而不是HTML元素
3、HTML元素属性和DOM属性的名称和值大部分都相同
二、使用javascript操作DOM属性
使用javascript操作DOM属性就是操作javascript对象的属性。javascript对象的属性是不需要声明的。有多种方式可以访问属性，如下：
myImg.src = "xxxxxx" //使用“.”运算符
myImg["src"] = "xxxxxx" // 使用属性访问器
var propName = "src"; myImg[propName] = "xxxxxx" //属性访问器支持变量
注：1）因为提供了属性访问器，所以可以通过下面的方式遍历一个DOM对象的所有属性：
var result = "";
for (var p in myImg){
result += "属性名：" + p + "，属性值：" + myImg[p] + "\n";
}
2）事件或者函数也是对象的一个属性。如果一个对象是DOM对象，就默认情况下拥有很多的属性
三、使用javascript操作HTML元素属性
使用javascript中的getAttribute和setAttribute，可以操作HTML元素属性。比如：
alert(myImg.getAttribute("class"));
myImg.setAttribute("class","myclass2");
注：通过改变HTML属性class，会改变相应的DOM元素的className属性。但不是所有的HTML元素都有对应的DOM属性。比如自定义的HTML元素属性就无法转换成DOM属性。再如元素属性"className"就比较特别，因为className是和HTML的class对应的。
四、JavaScript中的attribute 和 property
Attribute由HTML来定义，并不存在于DOM中，即：只要是HTML标签内定义的都是attribute。
<div id="test" class="button" custom-attr="1"></div>
document.getElementById('test').attributes;
// 返回：[custom-attr="hello", class="button", id="test"]document.getElementById('test').getAttribute('custom-attr')
$('#test').attr('custom-attr')Property属于DOM，DOM的本质就是JavaScript中的一个object。我们可以像操作普通object一样读取、设置property，property可以是任意类型
document.getElementById('test').foo = 1;
// 设置property：foo为number: 1
document.getElementById('test').foo;
// 读取property，返回number：1
$('#test').prop('foo');
// jQuery读取property，返回number：1
$('#test').prop('foo', {
age: 23,
name: 'John'
});
// jQuery设置property：foo为一个object
document.getElementById('test').foo.age;
// 返回number：23
document.getElementById('test').foo.name;
// 返回string："John"非自定义attribute，如id、class、titile等，都会有对应的property映射。
<div id="test" class="button" foo="1"></div>
document.getElementById('test').id;
// 返回string："test"
document.getElementById('test').className;
// 返回string："button"
document.getElementById('test').foo;
// 返回undefined，因为foo是自定义attribute
注：由于 class 为JavaScript的保留关键字，所以通过property操作class时应使用 className。
最佳实践
使用JavaScript操作property更为方便、快捷，并且property支持各种不同的类型，尤其是对于布尔类型的attribute的自动转换，如：checked、disabled、selected等。
<input id="test" class="blue" type="radio" />
推荐用法
// 获取id
document.getElementById('test').id;
// 更改class
document.getElementById('test').className = 'red';
// 获取、设置状态
document.getElementById('test').checked;
document.getElementById('test').checked = true;
$('#test').prop('checked');
$('#test').prop('checked', true);
不推荐的用法
// 获取id
document.getElementById('test').getAttribute('id');
// 更改class
document.getElementById('test').setAttribute('class', 'red');五、jQuery中使用attr(), prop(), val()
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-2.1.4.js"></script>
</head>
<body>
<input type="text" value="123"/>
<button id="btn">click</button>
<script>
$("#btn").click(function(){
var attr=$("input").attr("value");
var prop=$("input").prop("value");
var val=$("input").val();
console.log(attr);
console.log(prop);
console.log(val);
})
</script>
</body>代码如上所示，为输入框设定了初始值：123，此时点击按钮，控制台输出为：
123
123
123改变输入框的值，此时控制台输出：
123
123thgf
123thgf如果我们没有为文本框设定初始值，即删除value=”123”后，依旧使用如上js代码，则相应输出如下：
undefined
attr()输出为undefined，而prop()和val()输出为“空”。
输入value值后：控制台输出为：
undefined
asdasd
asdasd- attr()输出依然为undefined，而prop()和val()则输出实际值。
可见，prop()和val()都能获取到文本框的实际value值，而attr()获取的则始终为文档结构中的value的属性值，与文本框实际值无关，并不会变化。