前端中的 Attribute & Property

wall2flower 發布于2019-08-21 18:41 / 1625人閱讀

摘要：在使用上面，已經表明態度模板綁定是通過和事件來工作的，而不是。更改的值，相當于再次初始化。原生操作讀寫刪除采用的是更改的方式，基本上對應中提供的三個操作的方法。

為了在翻譯上顯示出區別，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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90712.html

前端中的 Attribute &amp; Property

摘要：在使用上面，已經表明態度模板綁定是通過和事件來工作的，而不是。更改的值，相當于再次初始化。原生操作讀寫刪除采用的是更改的方式，基本上對應中提供的三個操作的方法。為了在翻譯上顯示出區別，Attribute一般被翻譯為特性，Property被譯為屬性。在使用上面，Angular已經表明態度 Template binding works with properties and even...

fou7 2019-08-01 18:22 評論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