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的属性值,与文本框实际值无关,并不会变化。