Property vs Attribute：HTML元素中的两种不同的属性类型详解

在HTML中，属性(property)和特性(attribute)通常是一组有关元素的描述和规则，学习它们的不同点会有助于我们更好的理解和使用HTML。在本文中，我们将详细解说这两种不同属性类型的区别和用法。

一、属性(Property)是什么？

属性是指HTML标签中元素对象的属性值，可以通过JavaScript设置或获取。例如：

<input type="text" name="username" id="username">

在上面的代码中，type、name、id等都是input元素对象的属性值，可以通过JavaScript进行操作。

在HTML中，属性可以给元素附带不同的属性值，如：class、readonly、value等。可以使用以下形式来访问它们：

//获取属性
element.getAttribute("attrName")
//设置属性
element.setAttribute("attrName", "attrValue")

例如：

<input type="text" id="txtUsername">
<script>
    //设置属性
    document.getElementById("txtUsername").setAttribute("value", "Tom");
    
    //获取属性
    var value = document.getElementById("txtUsername").getAttribute("value");
    alert(value); //输出"Tom"
</script>

二、特性(Attribute)是什么？

特性是HTML标签中元素对象的特性，指的是元素在HTML中的表现形式。可以通过修改HTML文档中的属性来改变特性的值。在HTML里，特性值分为布尔型和非布尔型。

比如在以下代码中，class和readonly就是特性：

<input type="text" class="form-control" readonly>

除此之外，在HTML中还有几个默认的特性。例如：href、src等指向URL的特性，style用于设置CSS

三、Property vs Attribute的区别

1、属性和特性是如何不同的？

属性和特性的本质区别是一个是JavaScript的编程接口，另一个是HTML的文档级别的描述。在更细致的区分上，属性是指HTML标签中的元素属性对象，而特性表示在HTML文档中所声明的元素的特征，包括这个元素的命名空间URI等信息。

属性是通过编程界面来进行设置和访问的，而特性，作为HTML文档的一部分，有时施加了一些语义规则内容，以确保文档编写的正确性。

2、Property和Attribute之间存在什么联系？

在大多数情况下，属性和特性是相同的，但是有时并不是这样。例如：<input type="checkbox" checked>，在HTML中checked就是特性，但在JavaScript中则是属性。所以，我们需要使用get/setAttribute()或property进行访问。

3、属性和特性操作应该如何选择？

对于多数情况下，属性和特性是相同的值，不同的是它们的设置方式。属性是通过JS及DOM进行访问和设置，而特性在HTML中声明。所以在选择时，需要了解操作属性和特性的最佳途径，以便于在不同情况下进行使用。

需要注意的是，在修改DOM元素的特性或属性时，应该考虑到与文档级属性之间的差异。因为属性是一种JavaScript对象的表现形式，而特性是文档中HTML元素的表现形式。因此，在使用set/getAttribute时要注意属性的正确性，不要给特性添加属性，也不要给属性添加特性（如将”checked”当做属性而非特性）。正确的做法应该是使用property操作属性，使用Attribute操作特性。

四、属性和特性的代码演示：

1、操作特性

<input type="text" id="txtUsername">
<script>
    //设置特性
    document.getElementById("txtUsername").readOnly = true;
    
    //获取特性
    var readOnly = document.getElementById("txtUsername").readOnly;
    alert(readOnly); //输出"true"
</script>

2、操作属性

<input type="checkbox" id="chkBox" checked>
<script>
    //设置属性
    document.getElementById("chkBox").checked = false;
    
    //获取属性
    var checkedValue = document.getElementById("chkBox").checked;
    alert(checkedValue); //输出"false"
</script>

3、通过get/setAttribute操作特性

<input type="text" id="txtUsername">
<script>
    //设置特性
    document.getElementById("txtUsername").setAttribute("readonly", "readonly");
    
    //获取特性
    var readOnlyAttr = document.getElementById("txtUsername").getAttribute("readonly");
    alert(readOnlyAttr); //输出"readonly"
</script>

4、通过property操作属性

<input type="checkbox" id="chkBox" checked>
<script>
    //设置属性
    document.getElementById("chkBox").checked = false;
    
    //获取属性
    var checkedProp = document.getElementById("chkBox").checked;
    alert(checkedProp); //输出"false"
</script>

总结：

本文详细讲解了属性和特性的概念和区别，以及操作不同的最佳途径。特别是我们需要注意的是，属性和特性不是相互可替换的概念，但在某些情况下可能会相同。正确地操作属性和特性是编写可靠网页的重要一步。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/258701.html