一個案例搞明白DOM property 和 attribute的區別

小咪咪 2023-01-04 15:59 132阅读 0赞

property 和 attribute 兩個意思都是屬性的,看網上的說明,都跟繞口令一樣

參考

[ 中文的, https://blog.csdn.net/rudy\_zhou/article/details/104058741][https_blog.csdn.net_rudy_zhou_article_details_104058741]

[英文的 https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html\#answer-6004028][https_stackoverflow.com_questions_6003819_what-is-the-difference-between-properties-and-attributes-in-html_answer-6004028]

直接看兩張圖就清楚了

因為`jQuery v1.6.1發佈,開始討論兩者的區別的,直接用Juery打印下`

<input type='text' id='test' value='123' />
    <script>   
    $(document).ready(function(){
    var test=$('#test');
    console.log(test)
    });
    </script>

來看下<input type='text' id='test' value='123' />里的type屬性

1.attribute屬性,Dom節點下有個單獨的attributes屬性(此attributes屬於property ),attributes下面有type屬性(是attribute),對應值為text

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70][]

2.property屬性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 1][]

# 总结 #

attribute是dom節點property的attributes下面的值,通過setAttribute/attr修改屬性,發現兩者存在映射關係,不過超過input的type值的範圍時,type(property)屬性會變成text,而type(attribute)變化成修改的值

[https_blog.csdn.net_rudy_zhou_article_details_104058741]: https://blog.csdn.net/rudy_zhou/article/details/104058741
[https_stackoverflow.com_questions_6003819_what-is-the-difference-between-properties-and-attributes-in-html_answer-6004028]: https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html#answer-6004028
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70]: /images/20221119/19c89dc5514a47c7a1b9000344000f54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvc2VkZ3Vlc3Q_size_16_color_FFFFFF_t_70 1]: /images/20221119/7aa15f640be8400cbce47bfdf2e18ea5.png