DOM元素的特性和属性

Posted 2021-11-29 muhuck

首先来看一下他们的概念：

特性(Attribute):是DOM元素在文档中作为html标签拥有的属性；

属性(Property):是DOM元素在js中作为对象拥有的属性；

首先来了解一下DOM的五个标准特性（id、title、lang、dir、class）

对于标准特性来说，Attribute和Property是同步的，是会自动更新的，

对于自定义的特性来说，他们是不同步的（自定义的特性不会自动

添加到property）

HTML5规范对自定义特性做了增强，只要自定义特性以"data-attrName"

的形式写入到html标签中，在DOM属性中就可以通过element.dataset.attrName

的形式来访问自定义特性

特性/属性的数据绑定：

对于value和class来说，数据绑定是单方向的（Attribute==》property）

对于id、dir、title来说数据绑定是双向的（Attribute==》property、property

==》Attribute）

每一个元素都有一个或多个特性，用途是给出相应元素或其内容的

附加信息。通过DOM元素直接操作特性的方法有：

.getAttribute（attrName）

.setAttribute（attrname，value）

.removeAttribute（attrName）

操作属性则直接用"."操作符

举个栗子：

<div class="juzhong">
    <p id="p1" class="c1" title="t1" dir="ltr"   jj="gg"> 这是一段文字</p>
</div>

首先用const aa=document.querySelector("p");来获取一个元素的引用

然后你就可以来操作相应的属性：

获取：aa..id

修改：aa.id="p2"（此时相应的特性也会随之改变）

此处声明：特性class对应的属性名为className；属性Property可以赋任何类型的值

，而特性Attribute只能赋值字符串！