• Attribute和Property的区别


    Attribute和Property的区别

    attributeXML元素中的概念,用于描述XML标签的附加信息,即XML标签的属性,propertyJavaScript对象中的概念,用于描述JavaScript对象的成员,即JavaScript对象的属性。

    描述

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

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

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

    id: this-input
    type: text
    value: test
    

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

    • 某些attribute存在与property1:1的映射,例如id属性。
    • 某些attribute存在与property1: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 // attribute
    console.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")); // test
    console.log(document.querySelector("#this-input").value); // t
    console.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); // undefined
    console.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/8415edb391ce
    https://juejin.im/post/5bea695ae51d45196e141f7f
    https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html/6377829#6377829
    
  • 相关阅读:
    Spring+Springmvc+SpringJDBC+freemaker+Logback配置
    POJ1942+找规律
    HDU2955+DP+背包变形
    HDU1201+简单题
    HDU1288+枚举
    面试经验(转)
    HDU1864+dp+类似背包
    PKU1659+havelhakimi定理
    算法复杂度分析(摘)
    HDU3047+并查集
  • 原文地址:https://www.cnblogs.com/WindrunnerMax/p/13245668.html
Copyright © 2020-2023  润新知