zoukankan      html  css  js  c++  java
  • 彻底区分html的attribute与dom的property

    当初在学html时始终没有弄清楚的关于attribute与property的区别,竟然在看angular文档时弄明白了。
    angular官方文档的数据绑定一节提到html attribute与dom property的区别。


    要想理解 Angular 绑定如何工作,重点是搞清 HTML attribute和 DOM property之间的区别。

    attribute 是由 HTML 定义的。property是由 DOM (Document Object Model) 定义的。

    • 少量 HTML attribute 和 property 之间有着 1:1 的映射,如id。

    • 有些 HTML attribute 没有对应的 property,如colspan。

    • 有些 DOM property 没有对应的 attribute,如textContent。

    • 大量 HTML attribute看起来映射到了property…… 但却不像我们想的那样!

    最后一类尤其让人困惑…… 除非我们能理解这个普遍原则:

    attribute 初始化 DOM property,然后它们的任务就完成了。property的值可以改变;attribute的值不能改变。

    例如,当浏览器渲染<input type="text" value="Bob">时,它将创建相应 DOM 节点, 其value的property被初始化为 “Bob”。

    当用户在输入框中输入 “Sally” 时,DOM 元素的value 的property变成了 “Sally”。 但是这个 HTML value的attribute保持不变。如果我们读取 input 元素的 attribute,就会发现确实没变: input.getAttribute('value') // 返回 "Bob"

    HTML attribute 中value指定了初始值;DOM value property 是当前值。

    disabled这个attribute是另一个古怪的例子。按钮的disabled的property 是false,因为默认情况下按钮是可用的。 当我们添加disabled这个attribute时,只要它出现了按钮的disabled property就初始化为true,于是按钮就被禁用了。

    添加或删除disabled attribute会禁用或启用这个按钮。但attribute 的值无关紧要,这就是我们为什么没法通过 <button disabled="false">仍被禁用</button>这种写法来启用按钮。

    设置按钮的disabledproperty(如,通过 Angular 绑定)可以禁用或启用这个按钮。 这就是property 的价值。

    就算名字相同,HTML attribute 和 DOM property 也不是同一样东西。

  • 相关阅读:
    ubuntu安装
    k8s 安装
    Blazor 路由
    ISO 8601
    Centos 8使用devstack快速安装openstack最新版
    使用devstack 一键安装 openstack详细过程和遇到的坑
    蓝瑟66000公里保养
    释放rsyslog占用的Linux内存
    Netty4.1 Http开发入门(一)服务端
    网络传输中的帧和payload
  • 原文地址:https://www.cnblogs.com/benymor/p/7696868.html
Copyright © 2011-2022 走看看