操作元素属性的多种方式

setAttribute getAttribute removeAttribute

操作html的属性(attribute)

<input type="text" id="text1" value="11" data-name="input"/>

<script>
var oText = document.getElementById('text1');

//元素.getAttribute(属性名称); 方法 获取指定元素的指定属性的值
alert( oText.getAttribute('data-name') )

// 元素.setAttribute(属性名称，属性值); 方法 给指定元素指定的属性设置值
oText.setAttribute( 'data-name', 'hello' );

//元素.removeAttribute(属性名称); 方法 移除指定的元素的指定的属性
oText.removeAttribute( 'data-name' );


</script>

DOM的属性(property)

DOM是对象, 它的属性操作跟我们对象的操作是一样的

oText.value = 'hello';
oText['value'] = 'hello';

alert(oText.value);

由于HTML的Attribute和DOM的Property在中文中都被翻译成了“属性”

但它们是完全不同的东西

HTML 的 Attribute 和 DOM 的 Property 比较

Attribute 是由 HTML 定义的。 Property 是由 DOM(Document Object Model) 定义的。

• 少量 HTML Attribute 和 Property 之间有着 1:1 的映射。 id 就是一个例子。
• 有些 HTML Attribute 没有对应的 Property 。 colspan 就是一个例子。
• 有些 DOM Property 没有对应的 Attribute 。 textContent 就是一个例子。
• 大量 HTML Attribute 看起来映射到了 Property ……但却不像我们想象的那样！

尤其最后一种更让人困惑……除非我们能理解这个普遍原则：

Attribute 初始化 DOM Property ，然后它们的任务就完成了

Attribute 会影响property, propery的值不会影响attribute

<input type="text" value="bob">

<script>
var input = document.getElementsByTagName('input')[0];

input.value;//bob  


//改变property的值
input.value = 'Sally';
//或者直接在输入框中输入'Sally'


input.getAttribute('value');//bob 还是bob propery的值不会影响attribute

input.setAttribute('value', 'hellen');

input.value;//hellen;

</script>