DOM编程艺术-属性操作

属性操作,是针对html标签属性进行的操作。

html attribute对应一个DOM property:每个html属性都对应相应的DOM对象属性;

首先可以回顾一下html属性是什么:属性为 HTML 元素提供附加信息。

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现,比如:name="value"。属性总是在 HTML 元素的开始标签中规定。和css样式是有区别的,就好像建造房屋,一块砖的属性是大小,质地,编号等,css可以改变颜色等,有一些css是可以改变的,有一些则不可以。

js改变针对html属性的操作,和节点操作类似,js改变的是DOM里面对应html的属性,而不是直接改变html属性,所有的操作都是在DOM这个世界中;

所以先要找到html元素在DOM中对应的节点。

1. 属性访问器 proper

-读取属性:

例如一段HTML代码如下:

               

               

 

那么通过属性访问读取input标签中class这个属性就是:input.className:   // "u-txt";其中input是对应的节点。var input=document.getElementById("userName");

-写属性,直接给属性赋值

例子不变,input.value='www.yibowen.com";这样html中input标签中就会增加一个value属性,其值为www.yibowen.com;输入框中就会出现这个网址;input.disabled=true;

-类型

string会转换成string;数值文本会转换为number;事件会转换为函数;通过属性访问符读取的属性是转换过的实用对象;

-特点

通用型比较差,因为关键字的原因,比如class要用className;

2. get/setAttribute

-读取属性:var attribute=element.getAttribute(attributeName);

input.getAttribute("class");   //"u-txt"   input是对应的dom对象,而不是html元素;

-写属性:element.setAttribute(name,value);

input.setAttribute("value", "www.yibowen.com");  name是相应的属性,value则是属性值;

-类型

操作的是属性的字符串。

3. dataset

- HTMLElement.dataset;

-data-*属性集;

-元素上保存数据;

例子:

wwq

div.dataset.

id //"12345"      accountname  //"wwq", ....用来做属性自定义;

你可能感兴趣的:(DOM编程艺术-属性操作)