成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

前端中的 Attribute & Property

fou7 / 3370人閱讀

摘要：在使用上面，已經(jīng)表明態(tài)度模板綁定是通過(guò)和事件來(lái)工作的，而不是。更改的值，相當(dāng)于再次初始化。原生操作讀寫(xiě)刪除采用的是更改的方式，基本上對(duì)應(yīng)中提供的三個(gè)操作的方法。

為了在翻譯上顯示出區(qū)別，Attribute一般被翻譯為特性，Property被譯為屬性。
在使用上面，Angular已經(jīng)表明態(tài)度

Template binding works with properties and events, not attributes.   
模板綁定是通過(guò) property 和事件來(lái)工作的，而不是 attribute。

jQuery中的prop()和attr()如何選擇，眾說(shuō)紛紜...

兩種主流觀點(diǎn)：

對(duì)于一些公認(rèn)的attribute和property，使用setAttribute(),理由是property會(huì)出現(xiàn)class映射過(guò)去為className，名稱(chēng)不統(tǒng)一的問(wèn)題。

紅寶書(shū)作者推薦操作DOM property，因?yàn)樵跒g覽器上面表現(xiàn)的比較一致。

HTML attribute & DOM property 關(guān)系與區(qū)別

引用Angular文檔中的一段話去概括兩者的關(guān)系和區(qū)別：

HTML attribute 與 DOM property 的對(duì)比  
attribute 是由 HTML 定義的。property 是由 DOM (Document Object Model) 定義的。  
少量 HTML attribute 和 property 之間有著 1:1 的映射，如id。  
有些 HTML attribute 沒(méi)有對(duì)應(yīng)的 property，如colspan。  
有些 DOM property 沒(méi)有對(duì)應(yīng)的 attribute，如textContent。

普遍原則：

HTML attribute 初始化 DOM property，然后它們的任務(wù)就完成了。

更改 attribute 的值，相當(dāng)于再次初始化DOM property 。

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

幾個(gè)有代表性的映射表

HTML attribute DOM property
id id
class className
checked = "checked" checked 值為true
普遍原則失效的情況

為什么說(shuō)是普遍原則呢？在低版本的ie中，操作DOM property中的value，attribute中的value也發(fā)生了改變。完全不講道理 - -

更改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 (普遍原則下應(yīng)該為123) test property
prop()和attr()的選擇

prop()采用的是更改DOM property的方式，基本上對(duì)應(yīng)更改DOM屬性。

原生DOM jQuery 操作
element.value $element.prop( name[,value]) 讀寫(xiě)
delete element.propertyName $element.removeProp( propertyName ) 刪除

attr() 采用的是更改HTML attribute的方式，基本上對(duì)應(yīng)DOM中提供的三個(gè)操作attribute的方法。

原生DOM jQuery 操作
element.getAttribute(name) $element.attr(name) 讀
element.setAttribute(name,value) $element.attr(name ,value) 寫(xiě)
delete element.removeAttribute(name) $element.removeAttr( name ) 刪除
小結(jié)

獲取一些標(biāo)簽上面的的自定義屬性，或者一些基本不會(huì)改變的特性的時(shí)候，多數(shù)情況下用attr()（data-*等除外）。

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

其他情況下，操作DOM與頁(yè)面交互，一般情況下用prop()

總的來(lái)說(shuō)，盡量操作DOM property，只有在沒(méi)有DOM property(自定義attribute或者沒(méi)有相關(guān)映射)，才去操作HTML attribute。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51688.html

相關(guān)文章

  • 前端中的 Attribute & Property

    摘要：在使用上面，已經(jīng)表明態(tài)度模板綁定是通過(guò)和事件來(lái)工作的，而不是。更改的值，相當(dāng)于再次初始化。原生操作讀寫(xiě)刪除采用的是更改的方式，基本上對(duì)應(yīng)中提供的三個(gè)操作的方法。 為了在翻譯上顯示出區(qū)別，Attribute一般被翻譯為特性，Property被譯為屬性。 在使用上面，Angular已經(jīng)表明態(tài)度 Template binding works with properties and even...

    wall2flower 評(píng)論0 收藏0

  • 前端雜談: Attribute VS Property

    摘要：前端雜談第一個(gè)問(wèn)題什么是什么是是我們?cè)诖a中經(jīng)常看到的鍵值對(duì)例如上面代碼中的節(jié)點(diǎn)有三個(gè)是對(duì)應(yīng)的節(jié)點(diǎn)的對(duì)象屬性例如第二個(gè)問(wèn)題從上面的例子來(lái)看似乎和是相同的那么他們有什么區(qū)別呢讓我們來(lái)看另一段代碼在頁(yè)面加載后我們?cè)谶@個(gè)中輸入注意這段代碼 前端雜談: Attribute VS Property 第一個(gè)問(wèn)題: 什么是 attribute & 什么是 property ? attribute 是...

    elina 評(píng)論0 收藏0

  • jQuery中attr()和prop()的區(qū)別

    摘要：需求很簡(jiǎn)單的，一個(gè)非常簡(jiǎn)單的復(fù)選框的使用。與的區(qū)別復(fù)選框設(shè)置設(shè)置自定義自定義設(shè)置類(lèi)型設(shè)置類(lèi)型支持類(lèi)型在這里溫馨提示提示一下，當(dāng)我們?cè)O(shè)置這個(gè)屬性時(shí)，再用獲取的時(shí)候，控制提示。 問(wèn)題引入 昨天接到了一個(gè)活，里面有一個(gè)小需求，在寫(xiě)的過(guò)程中遇到了一個(gè)小問(wèn)題。雖然這個(gè)問(wèn)題并不是很復(fù)雜的東西，但卻是一個(gè)比較細(xì)節(jié)的問(wèn)題。相信不少新手前端會(huì)遇到。下面我先描述一下我這個(gè)遇到的這個(gè)需求。 showImg(...

    mo0n1andin 評(píng)論0 收藏0

  • 傻傻的分也分不清楚的property和attribute

    摘要：最近，一個(gè)小伙伴問(wèn)了我一個(gè)問(wèn)題和的區(qū)別當(dāng)時(shí)我想了又想，很不好意思的說(shuō)了我不知道，所以，抽了個(gè)事件好好的利用了一下度娘和總結(jié)了一下。 最近，一個(gè)小伙伴問(wèn)了我一個(gè)問(wèn)題property和attribute的區(qū)別？當(dāng)時(shí)我想了又想，很不好意思的說(shuō)了我不知道，所以，抽了個(gè)事件好好的利用了一下‘度娘’和‘Google’總結(jié)了一下。度娘搜索到的有用信息知乎中的討論csdn搜索的結(jié)果，Google發(fā)現(xiàn)的...

    SimpleTriangle 評(píng)論0 收藏0

  • 詳解Vue3 Composition API優(yōu)雅封裝第三方組件

    　　我們時(shí)常會(huì)想在保持第三方組件原有功能（屬性props、事件events、插槽slots、方法methods）的基礎(chǔ)上，這些功能如何優(yōu)化的實(shí)現(xiàn)？　　以Element Plus的el-input為例：　　在封裝一個(gè)MyInput組件，把要使用的屬性props、事件events和插槽slots、方法methods先要依照自己的需求來(lái)編寫(xiě)：　　//MyInput.vue 　　<template&...

    3403771864 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<