DOM编程-属性操作
需求引入
在用户进行登录时,为了防止用户重复提交表单,我们往往会在提交后,将登录设置为disable,同时改变外观样式来起到提示作用,那么我们就要能够通过JS来修改属性。
HTML属性和DOM属性的对应关系
<div >
<label for="userName">用户名:</label>>
<input id ="userName" type="text" name="userName" class = "u-txt">
</div>
比如在上面这段代码中 input节点的id属性的属性值为userName,我们用DOM来访问就是input.id
由于class在JavaScript中是一个关键字,那么在DOM中,我们用input.className来访问(名字异常)
再比如label节点中的for在JavaScript中也是一个关键字,那么我们可以写作label.htmlFor
每个HTML属性对应相应的DOM对象属性
* property accessor
* getAttribute/setAttribute
* dataset
用属性访问器 property accessor进行操作
我们既可以进行读也可以进行写
读取属性
input.className; //"u-txt"
input["id"]; //"userName"
写入属性
针对于需求中我们要设置的不可输入,我们可以进行如下操作
input.disabled = true;
我们通过直接赋值的方式进行改变属性
类型
假设我们有这样的一个输入框
<input class="u-txt" maxlength="10" disabled onclick="showSuggest();">
这个input节点的属性有以下类型
属性 | 属性值 | 类型 |
---|---|---|
className | “u-txt” | String |
maxLenghth | 10 | Number |
disabled | true | Boolern |
onclick | function onclick(event){…} | Function |
我们看到在HTML代码中maxLength是字符串类型,被转化成了数值型,通过属性访问符访问到的属性是经过转换的使用对象。
特点
通过属性访问器访问的特点:
* 通用性较差,由于会与关键字冲突等原因,会有名字异常
* 扩展性不佳
* 优点为我们可以得到可以直接使用的实用对象
用getAttribute/setAttribute进行操作
读取属性
var attribute = element.getAttribute(attributeName);参数为属性名
还是上面的例子代码中input.getAttribute("class"); //"u-txt"
就可以获取到class,不会有名字异常情况,因为”class”是字符串而不是关键字
写入属性
element.setAttribute(name,value);两个参数分别为属性名和属性值
input.setAttribute("value","XXX");
input.setAttribute("disabled",""); //这里不管属性名是什么只要出现disabled就会生效
类型
仍以上面的输入框为例
<input class="u-txt" maxlength="10" disabled onclick="showSuggest();">
当我们我们使用getAttribute()时得到下面的表格
属性 | 属性值 | 类型 |
---|---|---|
class | “u-txt” | String |
maxlenghth | “10” | String |
disabled | “” | String |
onclick | “showSuggest();” | String |
可以看出,这样操作的是属性字符串
特点
- 仅仅是字符串,我们需要进行转换
- 具有通用性,不会有名字异常
==一般来说,当我们对纯字符串操作时,优先使用getAttribute/setAttribute,其他情况会使用属性访问器==
自定义的属性dataset
- 首先它是HTML元素上的一个属性
- data-*属性集合
- 作用:元素上保存数据
例子
<div id="user" date-id="123456" data-account-name="sheepQAQ"
data-name="sheep" data-email="123@163.com">sheepQAQ</div>
我们使用div.dataset.
属性 | 属性值 | 类型 |
---|---|---|
id | “123456” | String |
accountName | “sheepQAQ” | String |
name | “sheep” | String |
“123@163.com” | String |
我们可以注意到使用dataset得到的id对应的不是user,而是data-id,去掉data-剩余部分写作驼峰格式。
如果一个自定义属性并不存在,但在程序中你给它赋值,它会自动创建。
在低版本浏览器下的兼容
function dataset(element){
var obj={};
if(element.dataset){ //是否符合W3C标准
return element.dataset;
}
else{
for(var i=0;i<element.attributes.length;i++){ //遍历节点的所有属性
var key=element.attributes[i].nodeName;
if(/^data-\w+$/.test(key)){//判断是否以data-开头的属性名
var value=element.attributes[i].nodeValue;//值
var keyName=key.match(/^data-(\w+)/)[1];//键名
obj[keyName]=value;//对象添加属性
}
}
}
return obj;
}