属性和特性

发布于 2019-08-05  6 次阅读


当浏览器加载页面时,它会“读取”(或者称之为:“解析”)HTML 文本并生成 DOM 对象。对于元素节点,大多数 HTML 特性会自动变成 DOM 对象的属性
在这个例子中,如果标签是 <body id="page">,那么 DOM 对象会生成这样一个属性 body.id="page"
但是特性 — 属性并不总是一一对应的!在这一篇文章中将带领你一起分清楚这两个概念,了解它们的具体作用,明白它们什么时候会相同什么时候会不同。

DOM属性

我们已经见过内置的 DOM 属性了。它的数量很庞大,但是 DOM 技术实现上没有限制我们对这个对象进行添加 —— 如果我们需要额外的属性的话。
DOM 节点是一个标准的 JavaScript 对象
<br />

我们可以给body添加属性

document.body.myData = {
  name: 'Caesar',
  title: 'Imperator'
};

alert(document.body.myData.title); // Imperator

甚至添加方法

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY(这个方法中的 &quot;this&quot; 指 document.body)

我们还可以修改内置属性的原型

Element.prototype.sayHi = function() {
  alert(`Hello, I'm ${this.tagName}`);
};

document.documentElement.sayHi(); // Hello, I'm HTML
document.body.sayHi(); // Hello, I'm BODY

所以,DOM 上的属性和方法其实就像是一个标准的 Javascript 对象

HTML特性

在 HTML 语言中,标签可能拥有特性。
当浏览器读取 HTML 文本并根据标签生成 DOM 对象,它会辨别标准化特性然后以此创建 DOM 属性。
因此当一个元素有 id 或其他标准化特性,会生相应的 DOM 属性。但是非标准化的特性则会被忽略。

&lt;body id=&quot;test&quot; something=&quot;non-standard&quot;&gt;
  &lt;script&gt;
    alert(document.body.id); // test
    // 非标准特性不会生成相应属性
    alert(document.body.something); // undefined
  &lt;/script&gt;
&lt;/body&gt;

不是每一个元素的标准化特性都是相同的
type&lt;input&gt; 的一个标准化特性(HTMLInputElement),但是 &lt;body&gt; 则没有(HTMLBodyElement)
每一个元素的标准化特性都有确切的规范描述。

<br />
以下几个方法是针对元素特性的操作:
1. elem.hasAttribute(name) —— 检验是否拥这个特性。
2. elem.getAttribute(name) —— 获取到这个特性值。
3. elem.setAttribute(name, value) —— 设置这个特性值。
4. elem.removeAttribute(name) —— 移除这个特性。

<br />
html特性有几个特征:
1. 它们的书写是大小写不敏感的(id 也可以写作 ID)。
2. 他们的值只能是字符串。
3. attributes 以 name 和 value 这样的键—值对收集在一个可迭代对象里。

属性和特性的同步

当一个标准化的特性被改变,相应的属性随之改变(有极个别除外),反之亦然。id

&lt;input&gt;

&lt;script&gt;
  let input = document.querySelector('input');

  // 特性 =&gt; 属性
  input.setAttribute('id', 'id');
  alert(input.id); // id(更新了)

  // 属性 =&gt; 特性
  input.id = 'newId';
  alert(input.getAttribute('id')); // newId(更新了)
&lt;/script&gt;

这里有一些特殊情况下的例子,input.value 只能从特性同步到属性,反过来则不行:

&lt;input&gt;

&lt;script&gt;
  let input = document.querySelector('input');

  // 特性 =&gt; 属性
  input.setAttribute('value', 'text');
  alert(input.value); // text

  // 这操作无效 属性 =&gt; 特性
  input.value = 'newValue';
  alert(input.getAttribute('value')); // text(没有更新!)
&lt;/script&gt;

DOM 属性的类型

DOM属性的值不总是字符串
input.checked 属性(多选框)是一个布尔类型的值。

&lt;input id=&quot;input&quot; type=&quot;checkbox&quot; checked&gt; checkbox
&lt;script&gt;
  alert(input.getAttribute('checked')); // 特性值是:空字符串
  alert(input.checked); // 属性的值是:true
&lt;/script&gt;

style 特性值是一个字符串,但 style 属性是一个对象:

&lt;div id=&quot;div&quot; style=&quot;color:red;font-size:120%&quot;&gt;Hello&lt;/div&gt;

&lt;script&gt;
  // 字符串
  alert(div.getAttribute('style')); // color:red;font-size:120%

  // 对象
  alert(div.style); // [object CSSStyleDeclaration]
  alert(div.style.color); // red
&lt;/script&gt;

还有一个非常重要的不同点。
DOM 属性的字符串可能跟特性值的字符串所表示的不是同一个东西!
例如 href DOM 属性总是一个绝对路径的,而特性值只包含相对路径或者只包含 #hash 这一部分。\

&lt;a id=&quot;a&quot; href=&quot;#hello&quot;&gt;link&lt;/a&gt;
&lt;script&gt;
  // 特性
  alert(a.getAttribute('href')); // #hello

  // 属性
  alert(a.href ); // 绝对路径 http://site.com/page#hello
&lt;/script&gt;

总结

  • 特性 —— 写在 HTML 中。
  • 属性 —— 是一个 DOM 对象。

<br />

属性特性
一些值字符串
大小写键名大小写敏感键名大小写不敏感


这个时间很美好,但它也很残酷