前端中的 Attribute & Property

fou7 发布于2019-08-01 18:22 / 3346人阅读

摘要：在使用上面，已经表明态度模板绑定是通过和事件来工作的，而不是。更改的值，相当于再次初始化。原生操作读写删除采用的是更改的方式，基本上对应中提供的三个操作的方法。

为了在翻译上显示出区别，Attribute一般被翻译为特性，Property被译为属性。
在使用上面，Angular已经表明态度

Template binding works with properties and events, not attributes.   
模板绑定是通过 property 和事件来工作的，而不是 attribute。

jQuery中的prop()和attr()如何选择，众说纷纭...

两种主流观点：

对于一些公认的attribute和property，使用setAttribute(),理由是property会出现class映射过去为className，名称不统一的问题。

红宝书作者推荐操作DOM property，因为在浏览器上面表现的比较一致。

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 初始化 DOM property，然后它们的任务就完成了。

更改 attribute 的值，相当于再次初始化DOM property 。

更改 property 的值，property值改变，attribute值不变。

几个有代表性的映射表

HTML attribute	DOM property
id	id
class	className
checked = "checked"	checked 值为true

普遍原则失效的情况

为什么说是普遍原则呢？在低版本的ie中，操作DOM property中的value，attribute中的value也发生了改变。完全不讲道理 - -

更改HTML attribute

myInput.setAttribute("value", "test Attr");

浏览器	myInput.getAttribute("value")	myInput.value
chrome ie11 ff	test Attr	test Attr
ie8	test Attr	test Attr

更改DOM property

document.getElementById("myInput").value = "test property";

浏览器	myInput.getAttribute("value")	myInput.value
chrome ie11 ff	123	test property
ie8	test property (普遍原则下应该为123)	test property

prop()和attr()的选择

prop()采用的是更改DOM property的方式，基本上对应更改DOM属性。

原生DOM	jQuery	操作
element.value	$element.prop( name[,value])	读写
delete element.propertyName	$element.removeProp( propertyName )	删除

attr() 采用的是更改HTML attribute的方式，基本上对应DOM中提供的三个操作attribute的方法。

原生DOM	jQuery	操作
element.getAttribute(name)	$element.attr(name)	读
element.setAttribute(name,value)	$element.attr(name ,value)	写
delete element.removeAttribute(name)	$element.removeAttr( name )	删除

小结

获取一些标签上面的的自定义属性，或者一些基本不会改变的特性的时候，多数情况下用attr()（data-*等除外）。

  $("form").attr("user-my-name"); // nilinli
  $("form").attr("action"); // test.php

其他情况下，操作DOM与页面交互，一般情况下用prop()

总的来说，尽量操作DOM property，只有在没有DOM property(自定义attribute或者没有相关映射)，才去操作HTML attribute。

GPU云服务器云服务器 python中的&amp java中的&amplt java中的占位符&039 Attribute

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51688.html

前端中的 Attribute &amp; Property

摘要：在使用上面，已经表明态度模板绑定是通过和事件来工作的，而不是。更改的值，相当于再次初始化。原生操作读写删除采用的是更改的方式，基本上对应中提供的三个操作的方法。为了在翻译上显示出区别，Attribute一般被翻译为特性，Property被译为属性。在使用上面，Angular已经表明态度 Template binding works with properties and even...

wall2flower 2019-08-21 18:41 评论0 收藏0
前端杂谈: Attribute VS Property

摘要：前端杂谈第一个问题什么是什么是是我们在代码中经常看到的键值对例如上面代码中的节点有三个是对应的节点的对象属性例如第二个问题从上面的例子来看似乎和是相同的那么他们有什么区别呢让我们来看另一段代码在页面加载后我们在这个中输入注意这段代码前端杂谈: Attribute VS Property 第一个问题: 什么是 attribute & 什么是 property ? attribute 是...

elina 2019-08-02 11:59 评论0 收藏0
jQuery中attr()和prop()的区别

摘要：需求很简单的，一个非常简单的复选框的使用。与的区别复选框设置设置自定义自定义设置类型设置类型支持类型在这里温馨提示提示一下，当我们设置这个属性时，再用获取的时候，控制提示。问题引入昨天接到了一个活，里面有一个小需求，在写的过程中遇到了一个小问题。虽然这个问题并不是很复杂的东西，但却是一个比较细节的问题。相信不少新手前端会遇到。下面我先描述一下我这个遇到的这个需求。 showImg(...

mo0n1andin 2019-08-20 15:38 评论0 收藏0
傻傻的分也分不清楚的property和attribute

摘要：最近，一个小伙伴问了我一个问题和的区别当时我想了又想，很不好意思的说了我不知道，所以，抽了个事件好好的利用了一下度娘和总结了一下。最近，一个小伙伴问了我一个问题property和attribute的区别？当时我想了又想，很不好意思的说了我不知道，所以，抽了个事件好好的利用了一下‘度娘’和‘Google’总结了一下。度娘搜索到的有用信息知乎中的讨论csdn搜索的结果，Google发现的...

SimpleTriangle 2019-08-21 18:20 评论0 收藏0
详解Vue3 Composition API优雅封装第三方组件

　　我们时常会想在保持第三方组件原有功能（属性props、事件events、插槽slots、方法methods）的基础上，这些功能如何优化的实现？　　以Element Plus的el-input为例：　　在封装一个MyInput组件，把要使用的属性props、事件events和插槽slots、方法methods先要依照自己的需求来编写：　　//MyInput.vue 　　<template&...

3403771864 2022-10-30 10:34 评论0 收藏0