DOM编程-属性操作

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
email	“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;
}