Attribute和Property的区别_html-js-css

概述Attribute和Property的区别 attribute是XML元素中的概念，用于描述XML标签的附加信息，即XML标签的属性，property是JavaScript对象中的概念，用于描述Jav Attribute和Property的区别

attribute是XML元素中的概念，用于描述XML标签的附加信息，即XML标签的属性，property是JavaScript对象中的概念，用于描述JavaScript对象的成员，即JavaScript对象的属性。

描述

在描述HTML时需要为其设定一些属性值的键值对用以描述标签：

<input ID="this-input" type="text" value="test" />

上述标签节点就定义了3个attribute：

ID: this-inputtype: textvalue: test

而浏览器在解析这段HTML后，就会创建一个Element对象，该对象包括很多属性property例如ID、INNERHTML、outerHTML等等，而对于这个Js对象，其许多属性property都与这个节点元素具有相同或相似名称的attribute，但这不是一对一的关系。

某些attribute存在与property的1:1的映射，例如ID属性。某些attribute存在与property的1:1的映射但名称不同，例如class属性。某些attribute不存在与property的映射，例如自定义的customize属性。实例

首先将<input>标签中的type进行更改：

<input ID="this-input" type="t" value="test" />

此时用Js取得对象的attribute以及property：

console.log(document.querySelector("#this-input").getAttribute("type")); // t // attributeconsole.log(document.querySelector("#this-input").type); // text // property

可以看到对于property而言，其会自动修正不正确的值，而对于attribute而言，其保留了关于DOM节点元素原本的值，可以说attribute从语义上,更倾向于不可变更的值，而property从语义上更倾向于在其生命周期中是可变的值。下面是一个同样的例子，当更改输入框中的test值为其他值比如t时，分别取得其attribute以及property：

console.log(document.querySelector("#this-input").getAttribute("value")); // testconsole.log(document.querySelector("#this-input").value); // tconsole.log(document.querySelector("#this-input").defaultValue); // test

可以看到attribute依旧保留了其原始值，而property获得了改变后的值，如果需要在property获得其原始值可以使用defaultValue属性。
如果在DOM节点自定义了某些attribute，其不一定会同步到property，同样在property定义的属性不一定会同步到attribute。

<input ID="another-input" type="type" customize="test" />

console.log(document.querySelector("#another-input").customize); // undefinedconsole.log(document.querySelector("#another-input").getAttribute("customize")); // test

代码示例

<!DOCTYPE HTML><HTML><head>    <Title>Attribute Property</Title></head><body>    <input ID="this-input" type="t" value="test" />    <input ID="another-input" type="type" customize="test" /></body>    <script type="text/JavaScript">        console.log(document.querySelector("#this-input").type); // text        console.log(document.querySelector("#this-input").getAttribute("type")); // t        console.log(document.querySelector("#another-input").customize); // undefined        console.log(document.querySelector("#another-input").getAttribute("customize")); // test    </script></HTML>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jianshu.com/p/8415edb391cehttps://juejin.im/post/5bea695ae51d45196e141f7fhttps://stackoverflow.com/questions/6003819/what-is-the-difference-between-propertIEs-and-attributes-in-HTML/6377829#6377829

总结

以上是内存溢出为你收集整理的Attribute和Property的区别全部内容，希望文章能够帮你解决Attribute和Property的区别所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1015607.html