HTML中的属性和属性有什么区别?

2020/09/28 04:01 · javascript ·  · 0评论

在jQuery 1.6.1中进行更改之后,我一直试图定义HTML中的属性和属性之间的差异。

查看jQuery 1.6.1发行说明中的列表(在底部附近),似乎可以对HTML属性和属性进行如下分类:

  • 属性:所有具有布尔值或UA计算得出的值,例如selectedIndex。

  • 属性:可以添加到既不是布尔也不包含UA生成值的HTML元素中的“属性”。

有什么想法吗?

编写HTML源代码时,可以在HTML元素上定义属性然后,一旦浏览器解析了您的代码,就会创建一个对应的DOM节点。该节点是一个对象,因此具有properties

例如,此HTML元素:

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

有2个属性(typevalue)。

浏览器解析此代码后,将创建一个HTMLInputElement对象,该对象将包含许多属性,例如:accept,accessKey,align,alt,attributes,autofocus,baseURI,checked,childElementCount,childNodes,childNodes,classList,className, clientHeight等

对于给定的DOM节点对象,属性是该对象的属性,而属性是该对象的属性的元素attributes

当为给定的HTML元素创建DOM节点时,其许多属性都与具有相同或相似名称的属性相关,但这不是一对一的关系。例如,对于此HTML元素:

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

相应的DOM节点将具有idtypevalue属性(以及其他属性):

  • id属性是一个反射属性id属性:获取属性读取的属性值,并且设置属性写入的属性值。id是一个反射属性,它不会修改或限制该值。

  • type属性是一个反射属性type属性:获取属性读取的属性值,并且设置属性写入的属性值。type不是纯反射属性,因为它仅限于已知值(例如,输入的有效类型)。如果你有<input type="foo">,那么theInput.getAttribute("type")给你"foo"theInput.type给你"text"

  • 相反,该value属性不能反映该value属性。相反,它是输入当前值当用户手动更改输入框的值时,该value属性将反映此更改。因此,如果用户"John"在输入框中输入内容,则:

    theInput.value // returns "John"
    

    而:

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

    value属性反映输入框内当前文本内容,而该value属性包含HTML源代码中属性的初始文本内容value

    因此,如果您想知道文本框中当前包含的内容,请阅读属性。但是,如果您想知道文本框的初始值是什么,请阅读属性。或者,您可以使用defaultValue属性,该属性是对value属性的纯粹反映

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

有几个属性,可直接反映他们的属性(relid),有些是用稍微不同的名称直接反射(htmlFor反映for属性,className体现了class属性),许多反映他们的属性,但有限制/修改(srchrefdisabledmultiple)等上。该规范涵盖了各种反射。

阅读Sime Vidas的答案后,我进行了更多搜索,并在Angular文档中找到了一个非常简单易懂的解释

HTML属性与DOM属性


属性由HTML定义。属性由DOM(文档对象模型)定义。

  • 一些HTML属性具有1:1到属性的映射。id就是一个例子。

  • 一些HTML属性没有相应的属性。colspan就是一个例子。

  • 某些DOM属性没有相应的属性。textContent
    就是一个例子。

  • 许多HTML属性似乎可以映射到属性...但是您可能无法想到!

在您掌握以下一般规则之前,最后一类令人困惑:

属性初始化 DOM属性,然后完成。属性值可以更改;属性值不能。

例如,当浏览器渲染时<input type="text" value="Bob">,它将创建一个具有value初始化为“ Bob” 属性的相应DOM节点

当用户在输入框中输入“ Sally”时,DOM元素value
属性将变为“ Sally”。但是,如果您向输入元素询问该属性,则HTML value 属性保持不变:input.getAttribute('value')返回“ Bob”。

HTML属性value指定初始值;DOM value
属性是
当前值。


disabled属性是另一个特殊的示例。默认情况下,按钮的
disabled属性是false默认设置,因此该按钮处于启用状态。当您添加disabled属性时,仅其存在就将按钮的disabled属性初始化为true因此该按钮被禁用。

添加和删​​除disabled属性将禁用并启用该按钮。该属性的值无关紧要,这就是为什么您不能通过编写启用按钮的原因<button disabled="false">Still
Disabled</button>.

设置按钮的disabled 属性将禁用或启用按钮。财产的价值至关重要。

即使HTML属性和DOM属性具有相同的名称,它们也不是相同的。

答案已经解释了如何不同地处理属性和属性,但是我真的想指出这是多么疯狂即使在某种程度上是规格。

疯狂的是,某些属性(例如id,class,foo,bar)仅在DOM中保留一种值,而某些属性(例如checked,selected)保留两个值;也就是说,值“加载时”和“动态状态”的值。(DOM是否应该完全代表文档的状态?)

绝对重要的是,两个输入字段(例如,文本复选框)的 行为必须完全相同如果文本输入字段没有保留单独的“加载时”值和“当前动态”值,那么为什么要选中该复选框?如果该复选框的确有两个值为checked属性,为什么它的classid属性没有两个值如果您希望更改文本 * input *字段的值,并且希望DOM(即“序列化表示形式”)发生更改并反映此更改,那么到底为什么您不希望输入字段的相同呢?键入复选框 在检查的属性?

对我来说,“这是布尔属性”的区分是没有任何意义的,或者至少不是充分的理由。

很好,这些是由w3c指定的。什么是属性,什么是属性
http://www.w3.org/TR/SVGTiny12/attributeTable.html

但目前attr和prop并没有太大不同,几乎相同

但是他们更喜欢道具

首选用法摘要

.prop()方法应用于布尔属性/属性以及html中不存在的属性(例如window.location)。所有其他属性(可以在html中看到的属性)都可以并且应该继续使用.attr()方法进行操作。

好吧,实际上,如果您使用attr或prop或同时使用attr和prop都不需要更改某些东西,但两者都可以工作,但是我在自己的应用程序中看到prop在atrr没有的地方起作用,所以我使用了1.6 app prop =)

区别HTML属性和属性:

在评估HTML的区别之前,让我们先看一下这些单词的定义:

英文定义:

  • 属性是指对象的其他信息。
  • 属性用于描述对象的特征。

在HTML上下文中:

当浏览器解析HTML时,它将创建一个树数据结构,该结构基本上是HTML的内存中表示形式。它的树数据结构包含HTML元素和文本的节点。与此相关的属性和属性如下所示:

  • 属性是我们可以放入HTML中以初始化某些DOM 属性的其他信息
  • 属性是在浏览器解析HTML并生成DOM时形成的。DOM中的每个元素都有自己的属性集,这些属性都由浏览器设置。其中一些属性可以通过HTML属性设置其初始值。每当DOM属性发生变化而对呈现的页面产生影响时,该页面将立即重新呈现

同样重要的是要认识到这些属性的映射不是1到1。换句话说,并不是我们在HTML元素上提供的每个属性都具有相似的命名DOM属性。

此外具有不同DOM元素的不同属性。例如,<input>元素的值属性不存在于<div>属性中。

例:

让我们看下面的HTML文档:

 <!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>

然后,我们<div>在JS控制台中检查

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

我们看到以下DOM属性(chrome devtools,未显示所有属性):

html属性和属性

  • 我们可以看到,HTML中的属性id现在也是DOM中的id属性。id已通过HTML初始化(尽管我们可以使用javascript进行更改)。
  • 我们可以看到HTML中的class属性没有相应的class属性(class在JS中为reserved关键字)。但实际上有2个属性,classListclassName
本文地址:http://javascript.askforanswer.com/htmlzhongdeshuxingheshuxingyoushenmequbie.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!