Fatal编程技术网
  • javascript/
  • Javascript getAttribute（）与元素对象属性？

Javascript getAttribute（）与元素对象属性？

javascript html dom

Javascript getAttribute（）与元素对象属性？,javascript,html,dom,Javascript,Html,Dom,像Element.getAttribute（“id”）和Element.id这样的表达式返回相同的结果 当我们需要HtmleElement对象的属性时，应该使用哪一个 这些方法如getAttribute（）和setAttribute（）是否存在跨浏览器问题 或者直接访问对象属性与使用这些属性方法之间对性能的影响？.id节省了函数调用开销。（这很小，但你问过。）根据getAttribute比id属性慢 PS 奇怪的是，这两个语句在IE8上的性能都很差（与其他浏览器相比）。除非您有特定的理由不使用，

像
Element.getAttribute（“id”）
和
Element.id
这样的表达式返回相同的结果

当我们需要HtmleElement对象的属性时，应该使用哪一个

这些方法如
getAttribute（）
和
setAttribute（）
是否存在跨浏览器问题

或者直接访问对象属性与使用这些属性方法之间对性能的影响？

.id
节省了函数调用开销。（这很小，但你问过。）

根据
getAttribute
比
id
属性慢

PS

奇怪的是，这两个语句在IE8上的性能都很差（与其他浏览器相比）。

除非您有特定的理由不使用，否则始终使用这些属性

  • getAttribute（）
    和
    setAttribute（）
    在旧版IE中被破坏（以及在更高版本中的兼容模式）
  • 属性更方便（特别是与布尔属性相对应的属性）
有：

  • 访问
    元素的属性
  • 访问自定义属性（尽管我不鼓励使用自定义属性）
关于这个问题，我已经写过几次了，所以：

getAttribute
检索DOM元素的属性，而
el.id
检索此DOM元素的属性。它们不一样

大多数情况下，DOM属性与属性同步

但是，同步不能保证相同的值。一个典型的例子是锚元素的
el.href
和
el.getAttribute（'href'）
之间

例如：

<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>


var a=document.getElementById（'hey'）
a、 getAttribute（'href'）/“/”
a、 href//除了保留“/”的IE之外的完整URL
发生这种行为是因为根据，href属性必须是格式良好的链接。大多数浏览器都遵守这个标准（猜猜谁不遵守？）

输入
的
已选中
属性还有另一种情况。DOM属性返回
true
或
false
，而属性返回字符串
“checked”
或空字符串

还有一些属性是单向同步的。最好的例子是
输入
元素的
值
属性。通过DOM属性更改其值不会更改属性（编辑：检查第一条注释以获得更高的精度）

由于这些原因，我建议您继续使用DOM属性，而不是属性，因为它们的行为在浏览器之间有所不同

实际上，只有两种情况需要使用属性：

  • 自定义HTML属性，因为它未同步到DOM属性
  • 要访问未与属性同步的内置HTML属性，并且您确定需要该属性（例如，
    输入
    元素的原始
    值
    ）
    • 如果你想要更详细的解释，我强烈建议你阅读。这只需要几分钟，但您会对这些信息感到高兴（我在这里总结了这些信息）。

    getAttribute（'attribute'）
    通常以字符串形式返回属性值，这与页面的HTML源代码中定义的完全一样

    但是，
    element.attribute
    可以返回该属性的标准化值或计算值。示例：

      • a、 href将包含完整的URL
      • input.checked将为true（布尔值）
      • input.checked将为true（布尔值）
      • 在加载图像之前，img.width将为0（数字）
      • 加载图像（或图像的前几个字节）时，img.width将为64（数字）
      • img.width将为计算出的50%
      • 图像宽度为50（数字）
      • div.style将是一个对象
    尝试下面的例子来完全理解这一点。对于下面的DIV

    Element.getAttribute（'class'）
    将返回
    myclass
    ，但您必须使用
    Element.className
    从DOM属性中检索它。

    其中一个重要的方面是基于属性的css样式

    考虑以下几点：

    constdivs=document.queryselectoral（'div'）；
divs[1]。自定义=true；
divs[2]。setAttribute（'custom'，true）

    div{
边框：1px实心；
边缘底部：8px；
}
分区〔海关〕{
背景：#36a；
颜色：#fff；
}
    

    普通div
直接设置了自定义属性的div。

    一个具有自定义属性集且带有`setAttribute`
    Hi-gdoron的div，只是出于好奇：我试图找到一个关于这一点的'官方'解释（除了经验测试之外，这已经足够清楚了；），但没有成功。你有关于它的链接吗？+1通常是好的建议。不过，同步功能有点不正常：输入的
    value
    属性确实从属性中获取其初始值，但在其他方面根本不与属性绑定。
    value
    属性与
    defaultValue
    属性完全同步。同样地，选中了
    和
    defaultChecked
    。除了在旧IE中（将您的评论添加为“进一步解释”）-，我认为您的第一个示例是错误的
    a.href
    返回完整URL，
    a.getAttribute（“href”）
    返回的属性与HTML源代码中定义的属性完全相同。如果您试图确定某个值是否为非默认值，最好使用属性。许多现代浏览器都会返回默认值（例如，
    ）