DOM元素的特性和属性

杀马特。学长 韩版系。学妹 提交于 2019-12-31 23:38:55

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

特性(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只能赋值字符串!

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!