国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

詳解 HTML attribute 和 DOM property

shiyang6017 / 2428人閱讀

摘要:在大多數的文章中,一般被翻譯為特性,被譯為屬性。但是,和并不總是一對一的關系。當修改特性時,屬性也會更新但是修改屬性后,特性卻還是原值。修改特性屬性也更新了修改屬性特性沒有更新非標準特性非標準特性并不會自動映射為屬性。

在大多數的文章中,attribute 一般被翻譯為“特性”,property 被譯為“屬性”。

結論

把結論寫在最前面,如果你全都懂,后面就不用看了。

HTML attribute DOM property
值永遠是字符串或 null 值可以是任意合法 js 類型
大小寫不敏感 大小寫敏感
不存在時返回 null 不存在時返回 undefined
對于 href, 返回 html 設置的值 對于 href 返回解析后的完整 url
更新 value, 屬性也更新 更新 value, 特性不更新
概述

當我們書寫 HTML 代碼的時候,我們為 HTML 元素設置特性 ,例如:

我們寫了一個 input 標簽,并給他定義了 2 個特性 (idvalue)。當瀏覽器解析這段代碼的時候,會把 html 源碼解析為 DOM 對象,確切的說是解析為 HTMLInputElement 對象。HTMLInputElement 的繼承關系是:

HTMLInputElement
  ↓
HTMLElement
  ↓
Element
  ↓
Node
  ↓
EventTarget
  ↓
Object

通過查看文檔會發現,HTMLInputElement 的原型上定義了很多屬性和方法,例如 form, name, type, alt, checked, src, value 等等,還有從 HTMLElement 繼承來的 id, title, clientTop 等等。

如果仔細找找,就不難發現其中就有我們為 input 標簽定義的特性idvalue當瀏覽器解析網頁時,將 HTML 特性映射為了 DOM 屬性

Element 類還有一個 attributes 屬性,里面包含了所有的特性。

但是,HTML attribute 和 DOM property 并不總是一對一的關系

1. DOM 屬性

當瀏覽器解析完 HTML 后,生成的 DOM 是一個繼承自 Object 的常規 JavaScript 對象,因此我們可以像操作任何 JS 對象那樣來操作 DOM 對象。

const el = document.getElementById("name")
el.foo = "bar"
el.user = { name: "jjc", age: "18"}

也可以為其添加方法。如果你想給每個 html 元素都添加屬性或方法,甚至可以直接修改 Element.prototype,不過我們不推薦這么做。

2. HTML 特性

和 DOM 屬性類似,除了那些規范里定義的標準特性外,HTML 也可以添加非標準的屬性,例如:

當 HTML 特性映射為 DOM 屬性時,只映射標準屬性,訪問非標準屬性將得到 undefined

const el = document.getElementById("name")
el.foo === undefined

好在 DOM 對象也提供了操作特性的 API:

Element.hasAttribute(name) – 判斷某個特性是否存在

elem.getAttribute(name) – 獲取指定特性的值

elem.setAttribute(name, value) – 設置指定特性的值

elem.removeAttribute(name) – 移除指定特性

以上 API 定義在 Element 上。

根據 HTML 規范,標簽以及特性名是不區分大小寫的,因此以下代碼是一樣的:

el.getAttribute("id")
el.getAttribute("ID")
el.getAttribute("iD")

并且,特性永遠都是字符串或 null。如果我們為特性設置非字符串的值,則引擎會將此值轉換為字符串。屬性是具有類型的:

el.getAttribute("checked") === "" // 特性是字符串
el.checked === false              // 屬性是 boolean 類型的值

el.getAttribute("style") === "color:blue" // 特性是字符串
typeof el.style === "object"                 // 屬性是 CSSStyleDeclaration 對象

即使都是字符串,屬性和特性也可能不同,有一個例外就是 href

el.getAttribute("href") === "#tag" // 特性原樣返回 html 設置的值
el.href === "http://jjc.fun#tag"   // 屬性返回解析后的完整 uri
3. 特性和屬性的同步

當標準的特性更新時,對應的屬性也會更新;反之亦然。

但是 input.value 的同步是單向的,只是 attribute --> property。當修改特性時,屬性也會更新;但是修改屬性后,特性卻還是原值。

el.setAttribute("value", "jjc");  // 修改特性
el.value === "jjc"                // 屬性也更新了  

el.value = "newValue";            // 修改屬性 
el.getAttribute("value")) === "jjc" // 特性沒有更新
4. 非標準特性

非標準 HTML 特性并不會自動映射為 DOM 屬性。當我們使用 data- 開頭的特性時,會映射到 DOM 的 dataset 屬性。中劃線格式會變成駝峰格式:

el.setAttribute("data-my-name", "jjc");
el.dataset.myName === "jjc"

el.setAttribute("data-my-AGE", 18);
el.dataset.myAge === "18"
自定義特性 VS 非規范特性

HTML 允許我們自定義標簽,也可以擴展標簽的特性,但是我們推薦使用已經進入 HTML5 規范的自定義特性 data-*。比如我們想為 div 標簽增加一個 age 特性,我們可以有 2 種選擇:

justjavac
justjavac

雖然第一種代碼更短,但是卻有一個潛在的風險。因為 HTML 規范是一直發展變化的,也許在未來的某個版本中,age 被添加進了標準特性里面,這將會引起潛在的 bug。


閱讀原文:HTML attribute 和 DOM property

討論地址:#15

如果你想參與討論,請點擊這里

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

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

相關文章

  • 詳解 HTML attribute DOM property

    摘要:在大多數的文章中,一般被翻譯為特性,被譯為屬性。但是,和并不總是一對一的關系。當修改特性時,屬性也會更新但是修改屬性后,特性卻還是原值。修改特性屬性也更新了修改屬性特性沒有更新非標準特性非標準特性并不會自動映射為屬性。 在大多數的文章中,attribute 一般被翻譯為特性,property 被譯為屬性。 結論 把結論寫在最前面,如果你全都懂,后面就不用看了。 HTML attri...

    0x584a 評論0 收藏0
  • vue 2.x 的 v-bind 指令的 .prop 事件修飾符詳解

    摘要:例子與各自的屬性和方法修飾符用途默認綁定到節點的上,使用修飾符后,會綁定到注意事項使用獲取最新的值設置的自定義屬性會在渲染后的標簽里顯示,不會。修飾符用途通過自定義屬性存儲變量,避免暴露數據防止污染結構例如標簽結構的值標簽結構 vue 官方文檔對 .prop 修飾符的解釋是: showImg(https://segmentfault.com/img/bV1Xao?w=381&h=35)...

    QiuyueZhong 評論0 收藏0
  • 前端中的 Attribute & Property

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

    fou7 評論0 收藏0

發表評論

0條評論

shiyang6017

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<