Sự khác biệt giữa thuộc tính và thuộc tính trong HTML là gì?

436
schalkneethling 2011-05-15 08:04.

Sau những thay đổi được thực hiện trong jQuery 1.6.1, tôi đã cố gắng xác định sự khác biệt giữa thuộc tính và thuộc tính trong HTML.

Nhìn vào danh sách trên ghi chú phát hành jQuery 1.6.1 (gần cuối), có vẻ như người ta có thể phân loại các thuộc tính và thuộc tính HTML như sau:

  • Thuộc tính: Tất cả những gì có giá trị boolean hoặc UA được tính toán chẳng hạn như selectIndex.

  • Thuộc tính: 'Thuộc tính' có thể được thêm vào một phần tử HTML không phải là boolean hoặc không chứa giá trị do UA tạo.

Suy nghĩ?

5 answers

885
Šime Vidas 2011-05-15 08:38.

Khi viết mã nguồn HTML, bạn có thể xác định các thuộc tính trên các phần tử HTML của mình. Sau đó, khi trình duyệt phân tích cú pháp mã của bạn, một nút DOM tương ứng sẽ được tạo. Nút này là một đối tượng, và do đó nó có các thuộc tính .

Ví dụ, phần tử HTML này:

<input type="text" value="Name:">

có 2 thuộc tính ( typevalue).

Khi trình duyệt phân tích cú pháp mã này, một đối tượng HTMLInputElement sẽ được tạo và đối tượng này sẽ chứa hàng tá thuộc tính như: accept, accessKey, align, alt, thuộc tính, tự động lấy nét, baseURI, đã kiểm tra, childElementCount, childNodes, children, classList, className, clientHeight, v.v.

Đối với một đối tượng nút DOM nhất định, thuộc tính là thuộc tính của đối tượng đó và thuộc tính là các phần tử của thuộc attributestính của đối tượng đó.

Khi một nút DOM được tạo cho một phần tử HTML nhất định, nhiều thuộc tính của nó liên quan đến các thuộc tính có tên giống nhau hoặc tương tự, nhưng nó không phải là mối quan hệ 1-1. Ví dụ: đối với phần tử HTML này:

<input id="the-input" type="text" value="Name:">

nút DOM tương ứng sẽ có id, typevaluetài sản (số những người khác):

  • Các idbất động sản là một tài sản phản ánh cho idthuộc tính: Bắt tài sản lần đọc giá trị thuộc tính, và thiết lập tài sản ghi giá trị thuộc tính. idlà một thuộc tính phản ánh thuần túy , nó không sửa đổi hoặc giới hạn giá trị.

  • Các typebất động sản là một tài sản phản ánh cho typethuộc tính: Bắt tài sản lần đọc giá trị thuộc tính, và thiết lập tài sản ghi giá trị thuộc tính. typekhông phải là thuộc tính được phản ánh thuần túy vì nó bị giới hạn ở các giá trị đã biết (ví dụ: các loại đầu vào hợp lệ). Nếu bạn có <input type="foo">, sau đó theInput.getAttribute("type")cho bạn "foo"nhưng theInput.typecho bạn "text".

  • Ngược lại, thuộc valuetính không phản ánh valuethuộc tính. Thay vào đó, nó là giá trị hiện tại của đầu vào. Khi người dùng thay đổi thủ công giá trị của hộp nhập, thuộc valuetính sẽ phản ánh sự thay đổi này. Vì vậy, nếu người dùng "John"nhập vào hộp nhập liệu, thì:

    theInput.value // returns "John"
    

    trong khi:

    theInput.getAttribute('value') // returns "Name:"
    

    Các valuebất động sản phản ánh hiện tại văn bản nội dung bên trong hộp đầu vào, trong khi các valuethuộc tính chứa ban đầu văn bản nội dung của các valuethuộc tính từ mã nguồn HTML.

    Vì vậy, nếu bạn muốn biết những gì hiện có bên trong hộp văn bản, hãy đọc thuộc tính. Tuy nhiên, nếu bạn muốn biết giá trị ban đầu của hộp văn bản là gì, hãy đọc thuộc tính. Hoặc bạn có thể sử dụng thuộc defaultValuetính, là valuethuộc tính phản ánh thuần túy của thuộc tính:

    theInput.value                 // returns "John"
    theInput.getAttribute('value') // returns "Name:"
    theInput.defaultValue          // returns "Name:"
    

Có một số tính năng mà trực tiếp phản ánh thuộc tính của họ ( rel, id), một số là phản ánh trực tiếp với những cái tên hơi khác nhau ( htmlForphản ánh forthuộc tính, classNamephản ánh classthuộc tính), nhiều phản ánh thuộc tính của họ, nhưng với những hạn chế / sửa đổi ( src, href, disabled, multiple), vv trên. Các thông số kỹ thuật bao gồm các loại phản xạ khác nhau.

66
subtleseeker 2018-12-26 07:35.

Sau khi đọc câu trả lời của Sime Vidas , tôi đã tìm kiếm thêm và tìm thấy một lời giải thích rất dễ hiểu và dễ hiểu trong các tài liệu góc cạnh .

Thuộc tính HTML so với thuộc tính DOM

-------------------------------

Các thuộc tính được định nghĩa bởi HTML. Thuộc tính được xác định bởi DOM (Mô hình đối tượng tài liệu).

  • Một số thuộc tính HTML có ánh xạ 1: 1 tới các thuộc tính. idlà một ví dụ.

  • Một số thuộc tính HTML không có thuộc tính tương ứng. colspanlà một ví dụ.

  • Một số thuộc tính DOM không có thuộc tính tương ứng. textContentlà một ví dụ.

  • Nhiều thuộc tính HTML xuất hiện để ánh xạ đến các thuộc tính ... nhưng không phải theo cách bạn có thể nghĩ!

Danh mục cuối cùng đó là khó hiểu cho đến khi bạn nắm được quy tắc chung này:

Các thuộc tính khởi tạo các thuộc tính DOM và sau đó chúng được thực hiện. Giá trị tài sản có thể thay đổi; giá trị thuộc tính không được.

Ví dụ: khi trình duyệt hiển thị <input type="text" value="Bob">, nó sẽ tạo một nút DOM tương ứng với thuộc valuetính được khởi tạo thành "Bob".

Khi người dùng nhập "Sally" vào hộp đầu vào, phần tử DOM value bất động sản trở thành "Sally". Nhưng value thuộc tính HTML vẫn không thay đổi khi bạn khám phá nếu bạn hỏi phần tử đầu vào về thuộc tính đó: input.getAttribute('value')trả về "Bob".

Thuộc tính HTML valuechỉ định giá trị ban đầu ; thuộc tính DOM valuelà giá trị hiện tại .


Các disabledthuộc tính là một ví dụ khác thường. disabledThuộc tính của nút falsetheo mặc định nên nút được bật. Khi bạn thêm disabledthuộc tính, chỉ sự hiện diện của nó sẽ khởi tạo thuộc tính của nút disabledđể truenút bị vô hiệu hóa.

Việc thêm và xóa disabledthuộc tính sẽ vô hiệu hóa và bật nút. Giá trị của thuộc tính không liên quan, đó là lý do tại sao bạn không thể bật nút bằng cách viết<button disabled="false">Still Disabled</button>.

Thiết của nút disabled sở hữu vô hiệu hóa hoặc cho phép các nút. Giá trị của tài sản là vấn đề.

Thuộc tính HTML và thuộc tính DOM không giống nhau, ngay cả khi chúng có cùng tên.

46
sibidiba 2011-06-17 09:58.

Các câu trả lời đã giải thích cách các thuộc tính và thuộc tính được xử lý khác nhau, nhưng tôi thực sự muốn chỉ ra điều này hoàn toàn điên rồ như thế nào . Ngay cả khi nó là thông số kỹ thuật ở một mức độ nào đó.

Thật là điên rồ, khi có một số thuộc tính (ví dụ: id, class, foo, bar ) chỉ giữ lại một loại giá trị trong DOM, trong khi một số thuộc tính (ví dụ: đã chọn, đã chọn ) để giữ lại hai giá trị; nghĩa là giá trị "khi nó được tải" và giá trị của "trạng thái động". (Không phải DOM được cho là đại diện cho trạng thái của tài liệu ở mức độ đầy đủ của nó?)

Điều hoàn toàn cần thiết là hai trường đầu vào , ví dụ như văn bảnhộp kiểm hoạt động theo cùng một cách . Nếu trường nhập văn bản không giữ lại giá trị "khi nó được tải" riêng biệt và giá trị "hiện tại, động", tại sao lại chọn hộp kiểm? Nếu hộp kiểm có hai giá trị cho thuộc tính đã kiểm tra , tại sao nó không có hai giá trị cho thuộc tính lớpid ? Nếu bạn muốn thay đổi giá trị của trường văn bản * đầu vào * và bạn mong đợi DOM (tức là "đại diện được tuần tự hóa") thay đổi và phản ánh sự thay đổi này, tại sao bạn lại không mong đợi điều tương tự từ trường đầu vào của gõ hộp kiểm vào thuộc tính đã chọn?

Sự khác biệt, "nó là một thuộc tính boolean" không có ý nghĩa gì đối với tôi, hoặc ít nhất không phải là một lý do đầy đủ cho điều này.

10
Daniel Ruf 2011-05-15 08:27.

những thứ này được w3c chỉ định thuộc tính là gì và thuộc tính là gì http://www.w3.org/TR/SVGTiny12/attributeTable.html

nhưng hiện tại attr và prop không quá khác nhau và gần như giống nhau

nhưng họ thích chỗ dựa cho một số thứ

Tóm tắt về cách sử dụng ưa thích

Phương thức .prop () nên được sử dụng cho các thuộc tính / thuộc tính boolean và cho các thuộc tính không tồn tại trong html (chẳng hạn như window.location). Tất cả các thuộc tính khác (những thuộc tính bạn có thể thấy trong html) có thể và sẽ tiếp tục được thao tác với phương thức .attr ().

Thực sự thì bạn không phải thay đổi thứ gì đó nếu bạn sử dụng attr hoặc prop hoặc cả hai, cả hai đều hoạt động nhưng tôi thấy trong ứng dụng của riêng tôi, prop hoạt động ở nơi atrr không nên tôi đã sử dụng prop ứng dụng 1.6 của mình =)

6
Willem van der Veen 2018-11-29 01:41.

Các thuộc tính và thuộc tính HTML khác biệt:

Trước tiên, hãy xem định nghĩa của những từ này trước khi đánh giá sự khác biệt trong HTML là gì:

Định nghĩa tiếng Anh:

  • Thuộc tính đề cập đến thông tin bổ sung của một đối tượng.
  • Thuộc tính là mô tả các đặc điểm của một đối tượng.

Trong ngữ cảnh HTML:

Khi trình duyệt phân tích cú pháp HTML, nó tạo ra một cấu trúc dữ liệu dạng cây mà về cơ bản là một biểu diễn trong bộ nhớ của HTML. Đó là cấu trúc dữ liệu cây chứa các nút là các phần tử HTML và văn bản. Các thuộc tính và thuộc tính liên quan đến điều này theo cách sau:

  • Thuộc tính là thông tin bổ sung mà chúng ta có thể đưa vào HTML để khởi tạo các thuộc tính DOM nhất định.
  • Thuộc tính được hình thành khi trình duyệt phân tích cú pháp HTML và tạo DOM. Mỗi phần tử trong DOM có tập hợp các thuộc tính riêng của chúng, tất cả đều do trình duyệt thiết lập. Một số thuộc tính này có thể có giá trị ban đầu được đặt bởi các thuộc tính HTML. Bất cứ khi nào một thuộc tính DOM thay đổi có ảnh hưởng đến trang được hiển thị, trang sẽ được hiển thị ngay lập tức

Điều quan trọng là phải nhận ra rằng ánh xạ của các thuộc tính này không phải là 1 đến 1. Nói cách khác, không phải mọi thuộc tính mà chúng tôi cung cấp trên một phần tử HTML sẽ có thuộc tính DOM có tên tương tự.

Hơn nữa có các phần tử DOM khác nhau thuộc tính khác nhau. Ví dụ, một <input>phần tử có thuộc tính giá trị không có trên một thuộc <div>tính.

Thí dụ:

Hãy xem tài liệu HTML sau:

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  <!-- charset is a attribute -->
  <meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
  <title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>

Sau đó, chúng tôi kiểm tra <div>, trong bảng điều khiển JS:

 console.dir(document.getElementById('foo'));

Chúng tôi thấy các thuộc tính DOM sau (chrome devtools, không phải tất cả các thuộc tính được hiển thị):

  • Chúng ta có thể thấy rằng id thuộc tính trong HTML bây giờ cũng là một thuộc tính id trong DOM. Id đã được khởi tạo bởi HTML (mặc dù chúng tôi có thể thay đổi nó bằng javascript).
  • Chúng ta có thể thấy rằng thuộc tính class trong HTML không có thuộc tính class tương ứng ( classlà từ khóa dành riêng trong JS). Nhưng thực tế là 2 thuộc tính, classListclassName.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Desiree Rogers, trái, và Cheryl Mayberry McKissack Chuyển sang, Fenty Beauty và Pat McGrath, có một đế chế làm đẹp mới do phụ nữ làm chủ đang trỗi dậy. Sau thương vụ mua lại mỹ phẩm Black Opal vào tháng 9, đội ngũ quyền lực của Giám đốc điều hành công ty Desiree Rogers và Chủ tịch Cheryl Mayberry McKissack đã thông báo mua lại thương hiệu làm đẹp tiên phong Fashion Fair từ người sáng lập Johnson Publishing Company (JPC).

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Đối với những người có quá nhiều thời gian, tiệc tiết lộ giới tính là một cách thú vị để không cần áp đặt những định kiến ​​hạn chế lên thai nhi trước một đối tượng bạn bè giả vờ quan tâm một cách lịch sự. Tuy nhiên, việc chỉ dựa vào những chiếc bánh nướng có màu nhân tạo để biểu thị một tiếng hoo-ha hoặc một đứa trẻ đi tè đã trở nên xa xỉ trong các bậc cha mẹ trên Instagram.

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Hôm thứ Tư, cựu Bộ trưởng An ninh Nội địa Kirstjen Nielsen vì một lý do nào đó đã được đưa ra một diễn đàn để phát biểu tại Hội nghị thượng đỉnh Những người phụ nữ quyền lực nhất của Fortune. Và có thể đoán trước được, người phụ nữ giám sát các nỗ lực (đang diễn ra) của chính quyền Trump nhằm chia cắt các gia đình ở biên giới đã sử dụng thời gian của mình như một cơ hội để tự bảo vệ mình và tự nhận mình là người — và hãy hít thở sâu ở đây — “đã nói sự thật với quyền lực.

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Vì thế hệ mới nhất của chiếc xe điều chỉnh được yêu thích trên thế giới hiện đã có mặt tại đây, nên chỉ có điều kiện là Toyota Racing Development sẽ đưa phiên bản Supra thế hệ thứ năm sửa đổi của riêng mình đến SEMA vào tháng tới. Toyota đã cho chúng tôi một gợi ý về những gì sẽ xảy ra trong tuần này: một chiếc Concept GR Supra 3000GT hiện đại.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language